Chips

Chips

Accessibility: Selectable chips use aria-pressed and stable names; removal has a separate named button and deliberate focus restoration. Informational chips are text. APG toggle-button guidance.

Informational labels, selectable filters, and removable selections share 28px short faces and 8px visible gaps at a 16px root. Long labels wrap. The compact X sits close to its label; only its button removes the selection.

Transparent target extensions fill the gaps without changing layout: selectable targets are at least 36px wide and high, and remove targets are 36×36px at defaults. Rows may touch at their target edges but do not overlap. This satisfies the size requirement of WCAG 2.2 SC 2.5.8 (AA), not the 44px target requirement of SC 2.5.5 (AAA), and is not a full-page conformance claim. Mouse and touchscreen layouts are identical.

Preserve the chip-list gaps and keep surrounding targets clear: allow half a gap (4px) above/below and at inline start, and a full gap (8px) at inline end. Do not clip the extended areas. Customize spacing with --barba-space-2 on the list, not a smaller independent gap. Informational chips remain noninteractive. Applications own state, focus, and announcements; these examples keep changes local.

Dashed boundaries show the transparent clickable extensions. Gray boundaries mark disabled buttons. Tab shows focus around the visible button; selection uses a thicker face border. Removing moves focus to the next enabled X, the previous X, or Restore selections when none remain.