Chip/token pattern

[brennanyoung]

A very common UI pattern is the "token" or "chip", typically used for filtering search results. (Are chips used anywhere else?)

These appear in (e.g.) ebay to show which filters are currently selected. Clicking the chip removes the filter. There's a screenshot from ebay at: https://user-images.githubusercontent.com/1430985/172394076-094bf4fe-0b40-4eef-8ad3-cce311747302.png showing chips.

These are typically oval-shaped elements with a text label and (very often) a 'close button' which removes the chip from the filter.

I've seen a few discussions about whether the close button should be a distinct focus target, separate from the chip itself. I don't know what is the more correct thing.

Chips often appear in popup/dropdown menus, so there are some additional focus management issues to consider.

There have been a couple of attempts to introduce a new aria role for these elements, which are neither buttons nor checkboxes, for example: https://github.com/w3c/aria/issues/689 https://github.com/w3c/aria/issues/1752

...but the consensus is rather lukewarm, and there are working accessible precedents out there "in the wild" so I don't expect any movement on this any time soon.

In practice, chips tend to be implemented as <a> elements, which is not an obvious choice. Still, this non-obvious practice seems to be quite well-established. I assume it was well-chosen, but it is not documented anywhere.

For that reason, I would like to see an APG pattern document for filter chips/tokens, showing the practices which work well today. Ideally this would represent the chips in the context of a filter.

[brennanyoung]

<a> seems to be contraindicated for chips that have a close box. (focusable elements are prohibited inside <a>) <a> seems to be contraindicated for chips that have no href (naming not supported for <a> without href)

[brennanyoung]

Usage notes that any forthcoming APG pattern guidance should address;

• Where are these elements permitted to appear?
• Some chips have a close box, but it's not a checkbox. What is it then?
• Some behave more like toggle buttons (can't be dismissed, but can be 'unchecked'). Perhaps these should be implemented as button with aria-pressed?
• Quite a few of the implementations "in the wild" support reordering of chips/tokens (typically by drag-and-drop). Suggest viable keyboard interface for this?
• If a token is in focus and you press "Delete" on the keyboard perhaps it should behave as if the close box has been clicked. (If there is a close box). Possibly viable if a chip/token is implemented as <a> where a focusable closebox element is forbidden.

[JAWS-test]

Since there is no ARIA role for chips (I would like it if there was), I would use an unsorted list (ul element). The chips would be the list entries (li element). For the close buttons I use the button element. The close buttons contain the name of the chip in their label (aria-label="Delete [name of chip]"). The list (ul element) is labeled so that it is clear what the chips refer to (e.g. aria-label="Selected items from ..."). Instead of ul a sorted list (ol element) can be used if the order of the chips is relevant.