A11y popup menu - Githubissues

bpmn-io / diagram-js

A toolbox for displaying and modifying diagrams on the web.

MIT License

1.65k stars 418 forks source link

A11y popup menu #874

Closed nikku closed 3 months ago

nikku commented 3 months ago

Firefox

capture 5fPyRh_optimized

Chrome

capture 5w5PjG_optimized

This PR improves the accessibility of the popup menu:

Ensures all items are keyboard accessible
Ensures that existing TAB and arrow key navigation continues to work
Ensures that SPACE and ENTER can be used as expected to toggle features
Ensure that outside click is no longer trapped
Use browser native outline for keyboard focus state

Additional notes:

I decided that tabbing through the whole component (all entries) shall be possible
I decided against making this a partial select/fake drop down from aria perspective, as it does not work in scenarios without search

Can be tried out using the following command on your local machine:

npx @bpmn-io/sr bpmn-io/bpmn-js -l bpmn-io/diagram-js#a11y-popup-menu

Closes #871

nikku commented 3 months ago

To be considered: Do not browser focus existing element, but only do so on tab navigation:

capture r7pQV7_optimized

nikku commented 3 months ago

As per discussion discarded the automatic keyboard focus:

Ensure that resonable item is intially focused

capture 4dT3A2_optimized

nikku commented 3 months ago

Updated with latest screenshots, preventing outline cut off via https://github.com/bpmn-io/diagram-js/pull/874/commits/a574bf01aeef9fcd06f4e7e057225093dc096dda. Now ready for review.

barmac commented 3 months ago

It looks good on Chrome, but there are some problems on Safari:

https://github.com/bpmn-io/diagram-js/assets/28307541/7c9ebc06-f333-462e-9e6c-e48b76ceae91

The outline is cut-off.
I cannot focus headers buttons with keyboard.
The menu is blurred when zoomed in o.O (out of scope).

barmac commented 3 months ago

This is Safari 17.0

barmac commented 3 months ago

On Firefox, the outline is also cut off, but at least I can focus the header buttons, and the menu is never blurred:

nikku commented 3 months ago

So we have to decide if we invent a completely new outline, standardized across all browsers.

I'd keep that as a follow-up activity.

barmac commented 3 months ago

I'm OK with outline cut-off but it would be great if the focus worked correctly. I will check in the dev tools what is happening there.

barmac commented 3 months ago

So via TAB I cannot reach the header modules, and after I TAB out, it focusses the body.

barmac commented 3 months ago

OK it might be that I don't know my tool. I can tab to the header buttons via Option+TAB: https://stackoverflow.com/questions/1848390/safari-ignoring-tabindex