aria-practices icon indicating copy to clipboard operation
aria-practices copied to clipboard

Layout Grid Example 2: Focus lost after removing all recipients

Open jscholes opened this issue 2 years ago • 0 comments

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

  1. Open https://www.w3.org/WAI/ARIA/apg/example-index/grid/LayoutGrids.html.
  2. Locate the section on the page headed "Example 2: Pill List For a List of Message Recipients".
  3. Press the "Remove Recipient Name 1" button; focus will move to "Remove Recipient Name 2".
  4. 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

jscholes avatar Jul 08 '22 20:07 jscholes