fix(Pagination): Use anchor instead of button for disabled prev/next controls #4951
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: cca5a45 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 |
francinelucca
temporarily deployed
to
github-pages
GitHub Actions
Inactive
francinelucca
changed the title
size-limit report 📦
|
francinelucca
temporarily deployed
to
github-pages
GitHub Actions
Inactive
francinelucca
commented
Sep 11, 2024
Comment on lines
+79
to
+83
| margin: 0 2px; | ||
|
|
||
| &:first-child { | ||
| margin-right: 6px; | ||
| } |
There was a problem hiding this comment.
I had to do this to enforce no visual regressions when changing from button to anchor to account for the 2px border all buttons have. Couldn't find a mapping in the theme spaces but happy to do this differently if there's a better alternative!
…ce-make-disabled-previousnext-control-non-focusable
francinelucca
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…ce-make-disabled-previousnext-control-non-focusable
francinelucca
temporarily deployed
to
github-pages
GitHub Actions
Inactive
TylerJDev
requested changes
Sep 16, 2024
| @@ -148,13 +148,14 @@ export function buildComponentData( | |||
| key = 'page-prev' | |||
| content = 'Previous' | |||
| if (page.disabled) { | |||
| Object.assign(props, {as: 'button', 'aria-disabled': 'true'}) | |||
| Object.assign(props, {'aria-disabled': 'true'}) | |||
There was a problem hiding this comment.
We can add role="link" here, since I believe we'd only need it when the link is disabled. This should allow us to remove it below in the else condition
…5-prcpagination-best-practice-make-disabled-previousnext-control-non-focusable
francinelucca
temporarily deployed
to
github-pages
GitHub Actions
Inactive
|
👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/341793 |
TylerJDev
approved these changes
Sep 16, 2024
francinelucca
deleted the
francinelucca/3395-prcpagination-best-practice-make-disabled-previousnext-control-non-focusable
branch
TylerJDev
pushed a commit
that referenced
this pull request
Sep 23, 2024
…controls (#4951) * fix(Pagination): a11y improvements * Create friendly-boats-serve.md * fix(Pagination): only add role link to disabled anchors
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #https://github.com/github/primer/issues/3395
Makes the Previous/Next controls in
Paginationnon-focusable by rendering them asas instead ofbutton. Also addsrole="link" to all's in the component.Changelog
New
buttonborders andasChanged
ainstead ofbuttonto make them non-focusablerole="link"to all<a>'s (Next, Previous and page numbers) in the component to improve accessibilityRemoved
Rollout strategy
Testing & Reviewing
Integration Test PR: https://github.com/github/github/pull/341793
role="link"on themaria-disabledanchor, not a button. Confirm there's nohreforroleattribute on itaria-disabledanchor, not a button. Confirm there's nohreforroleattribute on itMerge checklist