Try fixing combobox a11y issues #27431

tellthemachines · 2020-12-02T03:40:10Z

Description

The issue with VoiceOver not announcing the input label is straightforward: changing the aria-live setting to polite fixes 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-label with 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 native select would, 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:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

github-actions · 2020-12-02T03:50:06Z

Size Change: +429 B (0%)

Total Size: 1.19 MB

Filename	Size	Change
`build/block-library/editor-rtl.css`	8.88 kB	+18 B (0%)
`build/block-library/editor.css`	8.88 kB	+15 B (0%)
`build/block-library/index.js`	148 kB	+330 B (0%)
`build/block-library/style-rtl.css`	8.34 kB	+71 B (0%)
`build/block-library/style.css`	8.34 kB	+71 B (0%)
`build/components/index.js`	172 kB	+15 B (0%)
`build/components/style-rtl.css`	15.3 kB	-8 B (0%)
`build/components/style.css`	15.3 kB	-8 B (0%)
`build/edit-site/index.js`	24.1 kB	-5 B (0%)
`build/editor/index.js`	43.2 kB	-70 B (0%)
`build/editor/style-rtl.css`	3.85 kB	-2 B (0%)
`build/editor/style.css`	3.85 kB	+2 B (0%)

ℹ️

View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.8 kB	0 B
`build/api-fetch/index.js`	3.42 kB	0 B
`build/autop/index.js`	2.84 kB	0 B
`build/blob/index.js`	665 B	0 B
`build/block-directory/index.js`	8.72 kB	0 B
`build/block-directory/style-rtl.css`	943 B	0 B
`build/block-directory/style.css`	942 B	0 B
`build/block-editor/index.js`	128 kB	0 B
`build/block-editor/style-rtl.css`	11.2 kB	0 B
`build/block-editor/style.css`	11.2 kB	0 B
`build/block-library/theme-rtl.css`	789 B	0 B
`build/block-library/theme.css`	790 B	0 B
`build/block-serialization-default-parser/index.js`	1.88 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.06 kB	0 B
`build/blocks/index.js`	48.1 kB	0 B
`build/compose/index.js`	9.95 kB	0 B
`build/core-data/index.js`	14.8 kB	0 B
`build/data-controls/index.js`	827 B	0 B
`build/data/index.js`	8.98 kB	0 B
`build/date/index.js`	11.2 kB	0 B
`build/deprecated/index.js`	768 B	0 B
`build/dom-ready/index.js`	571 B	0 B
`build/dom/index.js`	4.95 kB	0 B
`build/edit-navigation/index.js`	11.1 kB	0 B
`build/edit-navigation/style-rtl.css`	881 B	0 B
`build/edit-navigation/style.css`	885 B	0 B
`build/edit-post/index.js`	306 kB	0 B
`build/edit-post/style-rtl.css`	6.42 kB	0 B
`build/edit-post/style.css`	6.4 kB	0 B
`build/edit-site/style-rtl.css`	4.06 kB	0 B
`build/edit-site/style.css`	4.06 kB	0 B
`build/edit-widgets/index.js`	26.3 kB	0 B
`build/edit-widgets/style-rtl.css`	3.13 kB	0 B
`build/edit-widgets/style.css`	3.13 kB	0 B
`build/editor/editor-styles-rtl.css`	476 B	0 B
`build/editor/editor-styles.css`	478 B	0 B
`build/element/index.js`	4.63 kB	0 B
`build/escape-html/index.js`	735 B	0 B
`build/format-library/index.js`	6.86 kB	0 B
`build/format-library/style-rtl.css`	547 B	0 B
`build/format-library/style.css`	548 B	0 B
`build/hooks/index.js`	2.27 kB	0 B
`build/html-entities/index.js`	623 B	0 B
`build/i18n/index.js`	3.56 kB	0 B
`build/is-shallow-equal/index.js`	698 B	0 B
`build/keyboard-shortcuts/index.js`	2.54 kB	0 B
`build/keycodes/index.js`	1.94 kB	0 B
`build/list-reusable-blocks/index.js`	3.1 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	476 B	0 B
`build/list-reusable-blocks/style.css`	476 B	0 B
`build/media-utils/index.js`	5.32 kB	0 B
`build/notices/index.js`	1.82 kB	0 B
`build/nux/index.js`	3.42 kB	0 B
`build/nux/style-rtl.css`	671 B	0 B
`build/nux/style.css`	668 B	0 B
`build/plugins/index.js`	2.56 kB	0 B
`build/primitives/index.js`	1.43 kB	0 B
`build/priority-queue/index.js`	791 B	0 B
`build/redux-routine/index.js`	2.84 kB	0 B
`build/reusable-blocks/index.js`	2.92 kB	0 B
`build/rich-text/index.js`	13.4 kB	0 B
`build/server-side-render/index.js`	2.77 kB	0 B
`build/shortcode/index.js`	1.69 kB	0 B
`build/token-list/index.js`	1.27 kB	0 B
`build/url/index.js`	2.84 kB	0 B
`build/viewport/index.js`	1.86 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.22 kB	0 B

_{compressed-size-action}

sarahricker

Looks pretty good - but haven't tested locally yet. Left a question and a note inline.

sarahricker · 2020-12-02T15:07:37Z

packages/components/src/combobox-control/index.js

@@ -135,7 +135,7 @@ function ComboboxControl( {
 	const onFocus = () => {
 		setIsExpanded( true );
 		onFilterValueChange( '' );
-		setInputValue( '' );
+		// setInputValue( '' );


Suggested change

// setInputValue( '' );

Might as well just remove it instead of commenting out :) We've got git!

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.

sarahricker · 2020-12-02T15:07:37Z

packages/components/src/combobox-control/index.js

+								aria-label={
+									currentLabel
+										? `${ currentLabel }, ${ label }`
+										: null


Is there any other default value that would be good here rather than null?

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

LGTM, I don't have any knowledge of the aria-label change though.

talldan

Looks good and works well in testing 👍

alexstine · 2020-12-03T06:00:33Z

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.

* Fix label announcement on VoiceOver * Try to fix selection announcement * Revert commented line.

@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

@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

@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

@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

@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

@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

* Fix label announcement on VoiceOver * Try to fix selection announcement * Revert commented line.

tellthemachines added 2 commits Dec 2, 2020

Fix label announcement on VoiceOver

64b6b2c

Try to fix selection announcement

Loading status checks…

b5b1adf

tellthemachines added [Type] Bug Accessibility (a11y) Needs Accessibility Feedback labels Dec 2, 2020

tellthemachines requested review from ajitbohra and chrisvanpatten as code owners Dec 2, 2020

tellthemachines added this to Needs Review in WordPress 5.6 Must Haves via automation Dec 2, 2020

tellthemachines requested review from talldan and adamsilverstein Dec 2, 2020

sarahricker suggested changes Dec 2, 2020

View changes

Revert commented line.

Loading status checks…

b23d7b7

kevin940726 approved these changes Dec 3, 2020

View changes

talldan approved these changes Dec 3, 2020

View changes

alexstine mentioned this pull request Dec 3, 2020

Parent page dropdown: screen reader issues #27385

Closed

WordPress 5.6 Must Haves automation moved this from Needs Review to Done Dec 3, 2020

tellthemachines deleted the fix/combobox-a11y branch Dec 3, 2020

github-actions bot added this to the Gutenberg 9.6 milestone Dec 3, 2020

tellthemachines added a commit that referenced this pull request Dec 3, 2020

Try fixing combobox a11y issues (#27431)

Loading status checks…

97a3ec2

* Fix label announcement on VoiceOver * Try to fix selection announcement * Revert commented line.

tellthemachines mentioned this pull request Dec 3, 2020

Backport for WP 5.6 RC3 #27454

Merged

0 of 6 tasks complete

tellthemachines mentioned this pull request Dec 3, 2020

Update @wordpress/components package WordPress/wordpress-develop#785

Closed

vcanales added a commit to vcanales/gutenberg that referenced this pull request Dec 3, 2020

Try fixing combobox a11y issues (WordPress#27431)

e370247

* Fix label announcement on VoiceOver * Try to fix selection announcement * Revert commented line.

WordPress / gutenberg

Try fixing combobox a11y issues #27431

Try fixing combobox a11y issues #27431

tellthemachines commented Dec 2, 2020

github-actions bot commented Dec 2, 2020 •

edited

sarahricker left a comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

kevin940726 left a comment

talldan left a comment

alexstine commented Dec 3, 2020

WordPress / gutenberg

Join GitHub today

GitHub is where the world builds software

Try fixing combobox a11y issues #27431

Try fixing combobox a11y issues #27431

Conversation

tellthemachines commented Dec 2, 2020

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

github-actions bot commented Dec 2, 2020 • edited

sarahricker left a comment

This comment has been minimized.

sarahricker Dec 2, 2020

This comment has been minimized.

sarahricker Dec 2, 2020

This comment has been minimized.

tellthemachines Dec 2, 2020 Author Contributor

This comment has been minimized.

sarahricker Dec 2, 2020

This comment has been minimized.

tellthemachines Dec 2, 2020 Author Contributor

kevin940726 left a comment

talldan left a comment

alexstine commented Dec 3, 2020

Essential cookies

Always active

Analytics cookies

github-actions bot commented Dec 2, 2020 •

edited

tellthemachines Dec 2, 2020
Author Contributor

tellthemachines Dec 2, 2020
Author Contributor