[pagination] Manage focus whenever first / last / next / previous buttons become disabled - #48877
[pagination] Manage focus whenever first / last / next / previous buttons become disabled#48877silviuaavram wants to merge 4 commits into
Conversation
silviuaavram
added
accessibility
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
There was a problem hiding this comment.
Pull request overview
This PR improves keyboard/focus accessibility for Pagination by restoring focus to the currently selected page when a navigation control (first/previous/next/last) becomes disabled after activation, preventing focus from being lost to <body>. It also updates the usePagination docs example and adds regression tests to cover the new behavior.
Changes:
- Add focus-restoration logic in
Paginationafter navigation buttons become disabled. - Add unit tests covering boundary-navigation focus behavior (including controlled usage and “don’t override consumer-managed focus”).
- Update the
usePaginationdocs demo to manage focus when navigating to the first/last page via previous/next.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/mui-material/src/Pagination/Pagination.js | Tracks the triggering control and restores focus to the selected page when focus is lost due to a control becoming disabled. |
| packages/mui-material/src/Pagination/Pagination.test.js | Adds focused regression tests for disabled-navigation focus restoration, including controlled and boundary-count scenarios. |
| docs/data/material/components/pagination/UsePagination.tsx | Updates the usePagination example to keep focus on a stable page target when previous/next navigation reaches a boundary. |
| docs/data/material/components/pagination/UsePagination.js | Keeps the generated JS demo in sync with the updated TS demo logic. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
silviuaavram
changed the title
Done, check the description. I'm auditing our components for a11y issues. |
Paginationneeds to have focus managed whenever the first / next / last / previous buttons are focused, pressed, and they become disabled. Currently, the focus is lost to the<body>so we manage it to the active item whenever that happens.On click even, we store the button pressed, then on the subsequent render, in effect, we check if we need to manage focus (focused element is either body or disabled button), and we focus the button that has
aria-current="page".Also update the
usePaginationdocs example since that needs its focus to be managed.Repro:
Expected: focus should be managed to an active element
Actual: focus is lost to the body.
Fix: focus is managed to
the first page button (when back becomes disabled) or the last page button (when next page becomes disabled).
Before:
Screen.Recording.2026-08-04.at.10.21.07.mov
After:
Screen.Recording.2026-08-04.at.10.22.31.mov