Repository navigation
Feature/pagination button hover - #374
Conversation
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars.
 |
There was a problem hiding this comment.
🟡 Changes recommended
The slider collapses while retaining keyboard focus, allowing arrow keys to change pages invisibly; focus must return to the page button before collapse, with a keyboard regression test covering this path.
1 open issue
What changed in this PR
This PR aligns hover and keyboard-focus styling across the table pagination controls and removes the collapsed slider from the Tab order and accessibility tree.
Changes:
- Shares hover and focus styles across arrows, the page button, and the Per Page dropdown.
- Keeps the dropdown border grey on hover and focus.
- Adds collapsed-state accessibility attributes to the slider.
| File | Description |
|---|---|
src/components/mui/tables/components/table-styles.js |
Defines shared pagination hover and focus styles. |
src/components/mui/tables/components/SliderPagination.js |
Applies shared styles and controls collapsed-slider accessibility. |
src/components/mui/tables/components/CustomTablePagination.js |
Styles the Per Page dropdown and preserves its grey border. |
Review effort: Balanced
| }; | ||
|
|
||
| // grey on hover, darker grey on keyboard focus; shared by the pagination arrows, page button and per-page select | ||
| export const PAGINATION_BUTTON_SX = { |
There was a problem hiding this comment.
@ako3131 can we set these styles in customTheme instead targeting all pagination buttons ?
There was a problem hiding this comment.
Just to clarify, you mean move the styling into summit admin?
There was a problem hiding this comment.
no @ako3131 there is a custom theme base in uicore that you can use to set these buttons styles
There was a problem hiding this comment.
no @ako3131 there is a custom theme base in uicore that you can use to set these buttons styles
|
@ako3131 please put the ticket link in PR description |
ae2c7d8 to
4ddaf27
Compare
There was a problem hiding this comment.
🟡 Changes recommended
Disabling focus ripples leaves pagination arrows without a keyboard-focus indicator under MUI’s default theme because replacement styles depend on a separately installed custom theme.
2 open issues
1 resolved since last review
Review effort: Balanced
| onClick={prev} | ||
| disabled={currentPage <= 1} | ||
| aria-label={T.translate("mui_table.previous_page")} | ||
| disableFocusRipple |
| }, | ||
| // per-page select: keep the border grey on rest, hover and focus | ||
| "&.pagination-button": { | ||
| ...paginationButtonStyles(theme), |
… first time users that it is clickable
…agination chevrons
4ddaf27 to
9e6479d
Compare
ref: https://app.clickup.com/t/9014802374/86bcfkrr0
What
Makes the table pagination controls behave the same on hover and keyboard focus, and fixes a hidden Tab stop.
PAGINATION_BUTTON_SXintable-styles.jsis used by all three.