fix(ContextualMenuDropdown): Context menu focuses first item on opening

[jmuzina]

Done

• Updated the ContextualMenuDropdpown to focus the first non-disabled child item after opening. Then the user can tab through the items to access them via keyboard.
• Adds a keyboard focus trap to the contextual menu
• Added proper accessible roles for the menu, groups, and menu items to communicate to assistive technologies that the menu is a menu
• Updates the MultiSelect component to opt-out of the ContextualMenu autofocusing the first element, as this would make text search difficult (focus should move to the text input, not the first option in that case)

Future work

There is still more work that can be done to make this component more accessible & WCAG compliant. WCAG specifies that context menus should be navigable with Arrow keys, and Tab should close the context menu and focus the next item after it. This PR at least makes the context menu navigable with Tab - more work will need to be done to comply with this spec.

I've left that for a separate task as it'll take a bit more work and I wanted to get the component at least minimally accessible in the short-term (a screen reader user raised with WPE that a context menu in 360 is almost impossible to navigate because focus does not move to it on opening and there is no focus trap)

QA

Pinging @canonical/react-library-maintainers for a review.

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Open the ContextualMenuDropdown story.
• Use your keyboard to open the dropdown.
• See that focus has moved to the first link.
• Use tab and see that focus moves to the next link.
• Keep pressing tab and see that focus only moves within the context menu (focus wraps from the end to the front).
• Press escape and verify the context menu still closes.
• Verify that no functional regressions have happened in the MultiSelect component, which consumes ContextualMenu.
• Bonus: activate a screen reader and verify that the context menu announces itself as a semantic menu

Percy steps

• No visual changes expected

Fixes

Fixes: #1248

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

A possible improvement we can already add in this PR is to return focus to the element that opened the context menu when it closes.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[fasih-mehmood]

I'm not able to close the dropdown using the keyboard. With the trapped focus, the focus switches back to the first option when pressing Tab at the last option. Pressing Esc does not close the dropdown either. Perhaps the dropdown should close if we press Tab at the last option or alternatively pressing Esc should close it. Wdyt?

[edlerd]

Did you check the CustomSelect component with this change? I suspect it might need to opt out as well -- at least if the search variant of it is in place.

[jmuzina]

I'm not able to close the dropdown using the keyboard

@fasih-mehmood Which story are you trying this out on, and which browser? In Chromium on the ContextualMenu toggle story, pressing escape closes the dropdown for me

[jmuzina]

Did you check the CustomSelect component with this change? I suspect it might need to opt out as well -- at least if the search variant of it is in place.

@edlerd No, I didn't check that one - thanks for flagging, I'll investigate

[fasih-mehmood]

I'm not able to close the dropdown using the keyboard

@fasih-mehmood Which story are you trying this out on, and which browser? In Chromium on the ContextualMenu toggle story, pressing escape closes the dropdown for me

@jmuzina I tried the ContextualMenu Toggle story on Chrome.