aria-practices
aria-practices copied to clipboard
Layout Grid Example 2: Focus lost after removing all recipients
When operating the second of the Layout Grid Examples, focus is moved to another "Remove" button if there are remaining recipients in the grid. Pressing "Remove" with a single recipient, however, results in keyboard focus being lost, which is a potential failure of WCAG SC 2.4.3 Focus Order (level A) (depending on your WCAG interpretation). Even without an interpreted WCAG violation, the experience is not very good for screen reader and sighted keyboard users, who must explore to work out where they are.
Reproduce
- Open https://www.w3.org/WAI/ARIA/apg/example-index/grid/LayoutGrids.html.
- Locate the section on the page headed "Example 2: Pill List For a List of Message Recipients".
- Press the "Remove Recipient Name 1" button; focus will move to "Remove Recipient Name 2".
- Press "Remove Recipient Name 2".
Expected result
Focus moves to somewhere useful and informative, e.g. the "Add Recipient" input.
Actual behaviour
Keyboard focus is lost, i.e. document.activeElement
is set to the document body.
CC @IsaDC