Closed ItsJonQ closed 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
This update fixes the a11y voiceover handling for the
SelectDropdown
component, which powers components like theFontSizePicker
.This was discovered after the integration of the
FontSizePicker
into Gutenberg: https://github.com/WordPress/gutenberg/pull/27594The solution was the adjust the render structure for the
SelectDropdown
to better accommodateuseSelect()
fromdownshift
(the same library/setup we use on thecustom-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 thatisCommitOnBlurOrEnter
is defaulted tofalse
, matching the interaction flow for standard inputs and inputs found in the@wordpress/components
library.We can revisit the
input[type="number"]
interactions forFontSizePicker
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