Try fixing combobox a11y issues #27431
Merged
tellthemachines merged 3 commits intomasterfrom Dec 3, 2020
Merged
Conversation
|
Size Change: +429 B (0%) Total Size: 1.19 MB
ℹ️ View Unchanged
|
sarahricker
suggested changes
Dec 2, 2020
sarahricker
left a comment
There was a problem hiding this comment.
Looks pretty good - but haven't tested locally yet. Left a question and a note inline.
| setIsExpanded( true ); | ||
| onFilterValueChange( '' ); | ||
| setInputValue( '' ); | ||
| // setInputValue( '' ); |
There was a problem hiding this comment.
Suggested change
| // setInputValue( '' ); |
There was a problem hiding this comment.
Might as well just remove it instead of commenting out :) We've got git!
Contributor
Author
There was a problem hiding this comment.
Whoops, that was unintended! I don't think removing it changes anything, but it's not needed for the fix so I'll revert the change.
| aria-label={ | ||
| currentLabel | ||
| ? `${ currentLabel }, ${ label }` | ||
| : null |
There was a problem hiding this comment.
Is there any other default value that would be good here rather than null?
Contributor
Author
There was a problem hiding this comment.
The purpose of null here is to not render the aria-label if there's no currently selected value, because in that case, its contents are identical to the already existing label, so we don't need to override it with aria-label.
kevin940726
approved these changes
Dec 3, 2020
Member
kevin940726
left a comment
There was a problem hiding this comment.
LGTM, I don't have any knowledge of the aria-label change though.
talldan
approved these changes
Dec 3, 2020
Contributor
talldan
left a comment
There was a problem hiding this comment.
Looks good and works well in testing 👍
Contributor
|
I can confirm that this fix is perfect for Mac Voiceover. NVDA doesn't seem to handle this well as it reads the description first, the current selected item, Parent Page, and then something else after. I guess it is the current cursor position in the list. It's very odd, but I think it will just have to suffice until something better can be done. In general this searchable combo box is not the most accessible thing in the world, but I support this PR as it fixes a major issue on Mac. Thanks. |
tellthemachines
added a commit
that referenced
this pull request
Dec 3, 2020
* Fix label announcement on VoiceOver * Try to fix selection announcement * Revert commented line.
6 tasks
tellthemachines
added a commit
that referenced
this pull request
Dec 3, 2020
nylen
pushed a commit
to nylen/wordpress-develop-svn
that referenced
this pull request
Dec 3, 2020
@wordpress/components: 11.1.2 -> 11.1.3 This fixes an accessibility regression with VoiceOver not announcing the input label or an existing selection in the parent page dropdown under "Page Attributes" in the sidebar. See WordPress/gutenberg#27431 for more details. Props isabel_brison, sarahricker, alexstine, kevin940726, talldanwp. Fixes #51923. git-svn-id: https://develop.svn.wordpress.org/trunk@49737 602fd350-edb4-49c9-b593-d223f7449a82
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Dec 3, 2020
@wordpress/components: 11.1.2 -> 11.1.3 This fixes an accessibility regression with VoiceOver not announcing the input label or an existing selection in the parent page dropdown under "Page Attributes" in the sidebar. See WordPress/gutenberg#27431 for more details. Props isabel_brison, sarahricker, alexstine, kevin940726, talldanwp. Fixes #51923. git-svn-id: https://develop.svn.wordpress.org/trunk@49737 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Dec 3, 2020
@wordpress/components: 11.1.2 -> 11.1.3 This fixes an accessibility regression with VoiceOver not announcing the input label or an existing selection in the parent page dropdown under "Page Attributes" in the sidebar. See WordPress/gutenberg#27431 for more details. Props isabel_brison, sarahricker, alexstine, kevin940726, talldanwp. Fixes #51923. Built from https://develop.svn.wordpress.org/trunk@49737 git-svn-id: http://core.svn.wordpress.org/trunk@49460 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Dec 3, 2020
@wordpress/components: 11.1.2 -> 11.1.3 This fixes an accessibility regression with VoiceOver not announcing the input label or an existing selection in the parent page dropdown under "Page Attributes" in the sidebar. See WordPress/gutenberg#27431 for more details. Props isabel_brison, sarahricker, alexstine, kevin940726, talldanwp. Reviewed by isabel_brison, SergeyBiryukov. Merges [49737] to the 5.6 branch. Fixes #51923. git-svn-id: https://develop.svn.wordpress.org/branches/5.6@49738 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Dec 3, 2020
@wordpress/components: 11.1.2 -> 11.1.3 This fixes an accessibility regression with VoiceOver not announcing the input label or an existing selection in the parent page dropdown under "Page Attributes" in the sidebar. See WordPress/gutenberg#27431 for more details. Props isabel_brison, sarahricker, alexstine, kevin940726, talldanwp. Reviewed by isabel_brison, SergeyBiryukov. Merges [49737] to the 5.6 branch. Fixes #51923. Built from https://develop.svn.wordpress.org/branches/5.6@49738 git-svn-id: http://core.svn.wordpress.org/branches/5.6@49461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
gMagicScott
pushed a commit
to gMagicScott/core.wordpress-mirror
that referenced
this pull request
Dec 3, 2020
@wordpress/components: 11.1.2 -> 11.1.3 This fixes an accessibility regression with VoiceOver not announcing the input label or an existing selection in the parent page dropdown under "Page Attributes" in the sidebar. See WordPress/gutenberg#27431 for more details. Props isabel_brison, sarahricker, alexstine, kevin940726, talldanwp. Fixes #51923. Built from https://develop.svn.wordpress.org/trunk@49737 git-svn-id: https://core.svn.wordpress.org/trunk@49460 1a063a9b-81f0-0310-95a4-ce76da25c4cd
gMagicScott
pushed a commit
to gMagicScott/core.wordpress-mirror
that referenced
this pull request
Dec 3, 2020
@wordpress/components: 11.1.2 -> 11.1.3 This fixes an accessibility regression with VoiceOver not announcing the input label or an existing selection in the parent page dropdown under "Page Attributes" in the sidebar. See WordPress/gutenberg#27431 for more details. Props isabel_brison, sarahricker, alexstine, kevin940726, talldanwp. Reviewed by isabel_brison, SergeyBiryukov. Merges [49737] to the 5.6 branch. Fixes #51923. Built from https://develop.svn.wordpress.org/branches/5.6@49738 git-svn-id: https://core.svn.wordpress.org/branches/5.6@49461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
VenusPR
pushed a commit
to VenusPR/Wordpress_Richard
that referenced
this pull request
Mar 9, 2023
@wordpress/components: 11.1.2 -> 11.1.3 This fixes an accessibility regression with VoiceOver not announcing the input label or an existing selection in the parent page dropdown under "Page Attributes" in the sidebar. See WordPress/gutenberg#27431 for more details. Props isabel_brison, sarahricker, alexstine, kevin940726, talldanwp. Reviewed by isabel_brison, SergeyBiryukov. Merges [49737] to the 5.6 branch. Fixes #51923. Built from https://develop.svn.wordpress.org/branches/5.6@49738 git-svn-id: http://core.svn.wordpress.org/branches/5.6@49461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
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.
Description
Fixes #27385.
The issue with VoiceOver not announcing the input label is straightforward: changing the
aria-livesetting topolitefixes it. (Thanks for the suggestion, @talldan 😄 )The selection not being announced is trickier as different screen readers announce input selection in different order. What I tried here was adding an
aria-labelwith the selection value as well as the original label value (because the aria-label will override the label) and that reads out in VoiceOver in the same order as a nativeselectwould, but in NVDA it doesn't quite match.Would be good to have some a11y input into this.
How has this been tested?
Tested with VoiceOver/Safari on macOS and NVDA/Firefox on Windows 10.
Screenshots
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist: