DataTable: Add outline-offset to DataTable pagination buttons
#6055
Conversation
🦋 Changeset detectedLatest commit: ef5ef1f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
There was a problem hiding this comment.
Pull Request Overview
Adds an outline-offset and matching focus-visible styles to the active pagination button in the DataTable component to improve keyboard focus visibility.
- Introduces a new focus-visible style block for
.TablePaginationPage[data-active='true'] - Uses CSS variables for outline color and box-shadow to match existing accent tokens
Comments suppressed due to low confidence (2)
packages/react/src/DataTable/Pagination.tsx:92
- [nitpick] The CSS variable
--bgColor-accent-emphasisis inconsistent with the existing naming pattern (--fgColor-onEmphasis). Consider unifying to match your theme’s token naming conventions or useget()to retrieve the same token.
outline: 2px solid var(--bgColor-accent-emphasis);
packages/react/src/DataTable/Pagination.tsx:91
- We don’t have existing tests covering keyboard focus visuals on pagination buttons. Consider adding a snapshot or visual regression test to ensure the new focus-visible styles render correctly.
.TablePaginationPage[data-active='true']:focus-visible {
| } | ||
|
|
||
| .TablePaginationPage[data-active='true'] { | ||
| background-color: ${get('colors.accent.emphasis')}; | ||
| color: ${get('colors.fg.onEmphasis')}; | ||
| } | ||
|
|
||
| .TablePaginationPage[data-active='true']:focus-visible { | ||
| outline: 2px solid var(--bgColor-accent-emphasis); | ||
| outline-offset: -2px; |
There was a problem hiding this comment.
A negative outline-offset will draw the outline inside the element’s border, which can reduce visible separation. Consider using a positive offset (e.g., 2px) to push the outline outward for better visibility.
| outline-offset: -2px; | |
| outline-offset: 2px; |
Copilot uses AI. Check for mistakes.
size-limit report 📦
|
Context: https://github.com/github/accessibility-audits/issues/11135
Adds outline offset to focus outline on pagination buttons in DataTable.
Before:
After:
Changelog
Changed
Rollout strategy
Testing & Reviewing
Merge checklist