ItsJonQ / g2

✨ An experimental reimagining of WordPress components
http://g2-components.com/
MIT License
105 stars 12 forks source link

SelectDropdown: Fix some a11y voiceover issues #239

Closed ItsJonQ closed 3 years ago

ItsJonQ commented 3 years ago
Screen Shot 2021-01-21 at 9 10 40 AM

This update fixes the a11y voiceover handling for the SelectDropdown component, which powers components like the FontSizePicker.

This was discovered after the integration of the FontSizePicker into Gutenberg: https://github.com/WordPress/gutenberg/pull/27594

Screen Shot 2021-01-21 at 8 56 23 AM

The solution was the adjust the render structure for the SelectDropdown to better accommodate useSelect() from downshift (the same library/setup we use on the custom-select-control.

Unfortunately, we do lose the ability to Portal the menu content with this adjustment. It's more important that voiceover works correctly though.

We can revisit useSelect + portal'ing in the future. From my experience, this doesn't seem like a very straight forward thing to do.

Other adjustments would be for the TextInput. It's been adjusted so that isCommitOnBlurOrEnter is defaulted to false, matching the interaction flow for standard inputs and inputs found in the @wordpress/components library.

We can revisit the input[type="number"] interactions for FontSizePicker in the future.


Testing

The quickest way to test would be to visit this URL: https://g2-git-fix-select-dropdown-a11y.itsjonq.vercel.app/iframe.html?id=components-fontsizecontrol--periodic-rerender&viewMode=story

Turn on Mac OS voiceover to ensure that the focus and selections are working as expected.

--

cc'ing @talldan

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/itsjonq/g2/ml37vhze2
✅ Preview: https://g2-git-fix-select-dropdown-a11y.itsjonq.vercel.app