search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.86k stars 1.82k forks source link

[a11y]: ContainedList [usage examples] - additional unnecessary tab stop #13949

Open andreancardona opened 1 year ago

andreancardona commented 1 year ago

Package

@carbon/react

Browser

FF

Package version

carbon/react@1.30.0

Automated testing tool and ruleset

Manual QA

Assistive technology

JAWS

Description

Option button menu which is available after the list item

Additional tab stop after expanding the menu options

WCAG 2.1 Violation

2.4.3 Focus Order

Reproduction/example

Record Number 40 in the below table: https://airtable.com/shrFsaeHhImOkuVNR

Steps to reproduce

After expanding when we use tab key to go to the next interactive element, there is an additional tab stop where sr is reading as "list item option contest menu".

Recommended fix

Avoid additional tab stop.

Note: Works as expected in the following ARIA example page which can be referred. https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/

When elements receive unnecessary tab stops, keyboard navigation becomes tedious. This particularly impacts keyboard-only users with motor disabilities.

Code of Conduct

ljcarot commented 1 year ago

@andreancardona Can you move the content from Automated testing to the WCAG violation field? e.g Automated testing tool and ruleset shows 2.4.3 Focus Order, but that is the WCAG violation