CustomSelectControl: read currently selected value on focus #21461
Conversation
Aljullu
added
[Focus] Accessibility (a11y)
Aljullu
requested review from
ajitbohra,
chrisvanpatten,
jorgefilipecosta and
youknowriad
as code owners
|
Size Change: +77 B (0%) Total Size: 835 kB
ℹ️ View Unchanged
|
Aljullu
force-pushed
the
fix/21459-customselectcontrol-read-value-on-focus
branch
from
dd28227 to
275f85b
Compare
|
I rebased this branch to fix the conflicts that have recently appeared. |
|
Thanks for working on this @Aljullu! I just gave it a shot with voiceover. For example, the fontsize picker, the voiceover should mention "font size" group, "normal" currently selected. I believe cc'ing @diegohaz for a11y guidance 😊 |
|
Ideally, it should be done by adding both the button and the label IDs to the <span id="label">Label</span>
<button id="button" aria-labelledby="label button">
Content
</button>It should be announced as This is exactly how the Collapsible Dropdown Listbox Example is built on the WAI-ARIA recommendations site.
It seems that Downshift does this by default, but we're overwriting it here: gutenberg/packages/components/src/custom-select-control/index.js Lines 117 to 119 in ed06638 Which led me to #17926 (comment):
I would say that, if Dragon Speech doesn't support it, it's something that should be fixed on their side. We should follow the WAI-ARIA recommendations to avoid future issues. So, my suggestion here is to stick with Downshift defaults. cc'ing @epiqueras and @enriquesanchez as they may have other opinions on this. 😊 |
|
Being one of the biggest speech recognition apps, it was decided to add the necessary support for it. It was a tough call knowing that Dragon Speech is widely used by the a11y community but the company behind it is not really invested in accessibility. |
|
@enriquesanchez Are you able to use Dragon to interact with the dropdown on this page: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html ? If so, there might be some solution there that we could use. Otherwise, I think we should at least file a bug on Dragon or something. |
|
@diegohaz Just tried it and I can't interact with the dropdown. It seems that Dragon does not recognize the element. |
|
I believe I fixed this here: #33941 I know I tried to fix all the controls in the editor currently. Probably still some that need fixing. |
|
@alexstine you're right, thanks! I just tested it in Closing this PR since it's no longer needed. |
youknowriad
deleted the
fix/21459-customselectcontrol-read-value-on-focus
branch
Fixes #21459.
Description
In WooCommerce Blocks we are using the
CustomSelectControlcomponent to allow the user to select a Country. We noticed when focusing it, the currently selected value is not presented to the user if they use a screen reader. (See woocommerce/woocommerce-blocks#2040).How has this been tested?
I tested the
CustomSelectControlcomponent in the story book and in the Preset Size option of the Typography panel of the paragraph block. Basically testing that navigating to it with a screen reader presents the selected option to the user (ie:Large currently selected).Types of changes
a11y improvement
Checklist: