Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SelectDropdown: Fix some a11y voiceover issues #239

Merged
merged 5 commits into from
Jan 21, 2021

Conversation

ItsJonQ
Copy link
Owner

@ItsJonQ ItsJonQ commented Jan 21, 2021

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:
WordPress/gutenberg#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

@ItsJonQ ItsJonQ added bug Something isn't working components a11y labels Jan 21, 2021
@ItsJonQ ItsJonQ self-assigned this Jan 21, 2021
@vercel
Copy link

vercel bot commented Jan 21, 2021

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

Copy link
Collaborator

@sarayourfriend sarayourfriend left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y bug Something isn't working components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants