fix(theme): make dropdown navbar items accessible via screen readers#11889
fix(theme): make dropdown navbar items accessible via screen readers#11889GalacticAvenger wants to merge 1 commit intofacebook:mainfrom
Conversation
The onClick handler now toggles the dropdown instead of only calling preventDefault(). Screen readers (NVDA, Narrator) fire a synthetic click event instead of keydown when pressing Enter on focused elements, so the previous code that only toggled in onKeyDown was bypassed. Also adds Escape key support to close dropdowns. Fixes facebook#8478
|
Hi @GalacticAvenger! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
1 participant
Summary
Fixes the dropdown navbar item (language selector, doc version selector) to be accessible via screen readers.
Fixes #8478
Problem
Screen readers like NVDA and Windows Narrator fire a synthetic
clickevent (not akeydownevent) when the user presses Enter on a focused element. The previousonClickhandler only callede.preventDefault()without toggling the dropdown, while the toggle logic lived exclusively inonKeyDown. This meant screen reader users could never open dropdown menus.Changes
onClicknow toggles the dropdown when there's notoprop (i.e., the element acts as a button, not a link). This ensures screen readers that fire synthetic clicks can open/close the menu.Test plan