-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make edit site pagination buttons accessibly disabled #62267
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Size Change: +24 B (0%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
59921d2
to
cbfdabc
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah ok that makes sense! Thanks for catching 🙏
…dd/on-async-directives * 'trunk' of https://github.com/WordPress/gutenberg: (72 commits) Top toolbar: fix half a pixel artifacting of the bottom border. (#62225) Fix UI order for theme.json spacing sizes (#62199) Chore: Simplify a padding style on global styles. (#62291) Editor: Avoid remounts of `DocumentBar` (#62214) Add `default-spacing-sizes` and `default-font-sizes` options for classic themes (#62252) Editor: Cleanup styles and classnames (#62237) Scripts: Pin the @wordpress/scripts version to a version supported by WP 6.5 (#62234) Documentation: Better changelogs for the JSX transform upgrade (#62265) Chore: Simplify a padding style on dataviews. (#62276) MediaUpload: Remove dialog markup on close (#62168) Tabs: Prevent accidental overflow in indicator (#61979) Make edit site pagination buttons accessibly disabled. (#62267) Fix: Remove unused code from dataviews styles. (#62275) Re-enable React StrictMode (#61943) Inserter: Return the same items when the state and parameters don't change (#62263) Update instances of text-wrap: pretty to fall back to balance (#62233) Update: Slotfill documentation samples (links, code, and rephrase). (#62271) Try: Fix mover positioning. (#62226) [Mobile] - Image corrector - Check the path extension is a valid one (#62190) Update: Block styles documentation. ...
Don't forget the |
Co-authored-by: afercia <[email protected]> Co-authored-by: mirka <[email protected]>
Co-authored-by: afercia <[email protected]> Co-authored-by: mirka <[email protected]>
Co-authored-by: afercia <[email protected]> Co-authored-by: mirka <[email protected]>
This was cherry-picked to the wp/6.6 branch. |
Follow-up to #62080
Cc @mirka
What?
Pagination buttons are a typical case where buttons must be still focusable also when 'disabled'.
Looking at the code statically as per the investigation made on #62080, it may appear that they can be 'truly' disabled. However, when using and interacting with these buttons via a keyboard here's the typical scenario where a focus loss must be prevented:
Why?
To prevent focus losses.
How?
Adds the
__experimentalIsFocusable
Removes the eslint disable comment.
Adjusts the style.
Note: the styling of a disabled-focusable button should work consistently with all button variants. For example, the Undo and Redo buttons use
opacity
while these buttons only use a color change. This should be addressed in the Button component though and there should not be 'local' styling overrides. I'll create a separate issue.Testing Instructions
aria-disabled="true"
attribute instead of adisabled
one.Testing Instructions for Keyboard
Screenshots or screencast