spectrum-web-components icon indicating copy to clipboard operation
spectrum-web-components copied to clipboard

[overlay|overlay-trigger] a11y review

Open Westbrook opened this issue 4 years ago • 0 comments

Feedback

❌ ARC - non active element in tab order (sp-active-overlay)

  • The example does not move keyboard focus correctly. I would assume that this should happen automatically where focus moved from the trigger to the content when opened - and back when closed, but this does not seem to occur in the example (review internally, should be fixed) ❌ active-overlay has tabindex=0 but no role or accessible name ❌ there is no way for a keyboard user to close the overlay in this example (understood that this is an example - but should meet a11y guidelines) ❌ The button opens the popover but focus does not move, so nothing is read.

Path forward

  1. Let's review how to get that result in the ARC tooling so I can understand what this means to the UI.
  2. This is due to not having a specific plan for this content and having a longer standing "default" that is not accessible. Make a 'breaking' change to set the default to something that "works" even if it's only in specific use cases.
  3. This is related to the above, will need revisit after that work is done.
  4. Is escape enough of an option here, or do we need to add more? This has been added since your view. Or do we need to add a "hidden" button?
  5. Related to no. 2 above.

Notice:

This content has since been expanded to: https://opensource.adobe.com/spectrum-web-components/components/overlay https://opensource.adobe.com/spectrum-web-components/components/overlay-trigger

cc @jnurthen

Westbrook avatar Mar 11 '21 17:03 Westbrook