Try fixing combobox a11y issues #27431
Merged
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
tellthemachines
added
[Type] Bug
tellthemachines
requested review from
ajitbohra and
chrisvanpatten
as code owners
|
Size Change: +429 B (0%) Total Size: 1.19 MB
ℹ️ View Unchanged
|
sarahricker
suggested changes
Dec 2, 2020
| @@ -135,7 +135,7 @@ function ComboboxControl( { | |||
| const onFocus = () => { | |||
| 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!
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?
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
talldan
approved these changes
Dec 3, 2020
|
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
added 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
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.
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: