Menu button - submenu, accessibility issue to review

[anqaka]

Provide a general summary of the issue here

I found 3 issue to check:

1. Submenu level 2 works only on hover, even if user clicks item from menu level 1 - Screen recording: "menu-button-mouse".
2. VoiceOver SR doesn't navigate properly on submenu. It's not accessible with VO functional key, and SR focus doesn't move to submenu. Screen recording: "menu-button-screen-reader-vo"

On the recording I showed 2 actions: First action - with screen reader using keyboard without VO functional key - I can access submenu but VO focus doesn’t move, only standard keyboard focus Second action - with VO functional key, I cannot access submenu (level 2) when I use VO functional key

3. Question about aria-details: Why have you chosen this aria attribute? Instead of aria-details, I’d use aria-haspopup=”menu” or aria-haspopup=”true” and menu controls with the menu’s id (sl-popver-1). My source: Menu button pattern on Aria patterns I could missed something here.

The video files are too big to upload it here, I'm sharing links: menu-button-mouse

menu-button-screen-reader-vo

#accessibility #a11y

🤔 Expected Behavior?

1. If menu level 1 work on hover and on click, so I'd expect the same from the submenu level 2. What is expected behaviour with hover and click?
2. VO focus should move to the submenu and submenu should be accessible with VO functional key, just like menu level 2

😯 Current Behavior

1. Submenu level 2 works only on hover, even if user clicks item from menu level 1
2. VoiceOver SR doesn't navigate properly on submenu. It's not accessible with VO functional key, and SR focus doesn't move to submenu.

💁 Possible Solution

It requires investigation, test with NVDA screen reader and discussion

🖥️ Steps to Reproduce

Open Menu button -> Submenu component on storyblock: https://storybook.sanomalearning.design/?path=/story/actions-menu-button--submenu

1. Click with mouse on menu button, the menu level one is visible when user doesn't hover it, Click on menu level 1 item and move hover away from it, submenu level 2 is visible only when submenu item is hovered.
2. Enable VO. Test menu using VO functiona keys and arrow and test using Tab key. Check if VPO focus state is moved to the submenu

What browsers are you seeing the problem on? (only for bugs in code)

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS

👤 Your name

Anna Karoń

🧢 Your product/team

UX Team

🎨 Your Theme(s)

Sanoma Learning