Tag

The Tag component has been designed with accessibility in mind, providing proper semantic structure and keyboard navigation for interactive labels that can be selected, clicked, or removed.

Tag props:

• The component automatically manages ARIA attributes:
  • When onClick is provided, the tag receives role="button" and tabIndex="0" to make it keyboard accessible
  • When onRemove is provided, the dismiss button receives role="button", tabIndex="0", and aria-label from the labelDismiss prop
  • The dismiss button is properly isolated from the main tag interaction to prevent nested interactive elements
• Focus management is handled automatically:
  • Interactive tags are included in the tab order with proper focus indicators
  • The dismiss button can be focused independently from the main tag when both are present
• Keyboard navigation is fully supported:
  • Space and Enter keys activate both the main tag and dismiss button
  • Event propagation is properly managed to prevent conflicts between tag and dismiss actions

• Always provide a labelDismiss prop when using onRemove to ensure screen reader users understand the purpose of the dismiss button.
• Use clear, descriptive text content for tags to help users understand their meaning and purpose.
• Use the selected prop to indicate which tags are currently active or applied, providing clear visual feedback through enhanced contrast and styling.

When using icons in tags:

• Provide an ariaLabel if the icon has a meaning by itself that is not obvious to screen readers, regardless of the existence of text
• If the icon is decorative and the badge contains text, the icon should be marked as aria-hidden="true"

<Tag onClick={() => console.log("Tag clicked")}>Transport</Tag>

Screen reader announces: “Transport, button”

<Tag
  onClick={() => console.log("Tag clicked")}
  onRemove={() => console.log("Tag removed")}
  labelDismiss="Remove transport filter"
>
  Transport
</Tag>

Screen reader announces: “Transport, button” for the main tag, then “Remove transport filter, button” for the dismiss button

<Tag iconLeft={<Icons.PlusMinus ariaHidden />} onClick={() => console.log("Tag clicked")}>
  Add Filter
</Tag>

Screen reader announces: “Add Filter, button”