fix(multi-action-button, split-button): ensure screen reader commands can navigate menu popup #7074
Conversation
| @@ -679,49 +643,6 @@ test("should hide the additional buttons when a 'Escape' keydown event detected | |||
| expect(screen.queryByRole("list")).not.toBeInTheDocument(); | |||
| }); | |||
|
|
|||
| test("should render with the correct styles when 'align' prop is 'right'", async () => { | |||
There was a problem hiding this comment.
question: are testing this stuff anywhere else? I think PW would be better until we have play functions implemented but unit tests will also be okay in the interim etc
There was a problem hiding this comment.
Removed these as they seemed to be pretty much the same as the tests here
There was a problem hiding this comment.
Also looks like we have PW tests too
There was a problem hiding this comment.
nice one thanks for checking
| ); | ||
|
|
||
| // check if a child button is focused, if not hide the menu | ||
| const checkFocus = useCallback(() => { | ||
| const buttonChildren = getButtonChildren(); |
There was a problem hiding this comment.
suggestion (non-blocking): You could short-circuit the function or conditionally assign you can avoid checking it's truthyness on line 91
if (!buttonChildren) return;
or
const buttonChildren = getButtonChildren() || [] ;
… can navigate menu popup Fixes issue where screen reader users using VoiceOver could not navigate into the menu buttons using commands VO+Space to open the menu then VO+right to navigate. The first option will now gain focus on open using any interaction method, including onClick, keyboard navigation and screen reader controls. fix #7054
|
I have tested the VO and works as expected now, so will pass a11y review too. |
harpalsingh
added
Passed UX QA
Passed a11y Review
and removed
Pending UX QA
Pending a11y Review
labels
|
🎉 This PR is included in version 144.9.11 🎉 The release is available on: Your semantic-release bot 📦🚀 |
fix #7054
Proposed behaviour
Current behaviour
Checklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions
Best tested in an example containing several focusable elements e.g.: "Sizes" story.