LabelGroup

Accessibility and usability expectations

Presentation

Cognition

• Groups of labels should be related in some way, to help make their grouping clearer

Mobility

• For the Truncated variant, the "Show X more" control, must have a minimum target size of 24 by 24 CSS pixels. This is to ensure that the control is large enough to be easily activated by users with moving disabilities
• For the Truncated variant, when the "Show X more" control is activated, you must redirect focus to the pop-up container

Adaptability

• Make sure that content can be increased up to 200%, and all labels are available
• At a viewport size of 320 by 256 CSS pixels, labels must remain readable and available
• When adding additional text spacing, make sure that all housed labels can still be read in their entirety

Interaction

Keyboard

• For the Truncated variant, the "Show X more" control must receive focus when navigating with the Tab key
• For the Truncated variant, the Space key should activate the control to reveal the pop-up with the entire list of labels
  • When the pop-up is expanded, the Space key should activate the close control and return focus to the "Show X more" control

Touch and mouse

• For the Truncated variant, expanding the pop-up containing all labels must be activated on the up event, and not the down event, or there must be a way to prevent the action from taking place on the down event

Engineering for AT Compatibility

Screen reader

• The order in which the labels are implemented should result in a logical reading order
• For the Truncated variant, the pop-up must have a role of dialog, to help convey the structure of the group

Speech recognition

• For the Truncated variant, the "Show X more" control must include the visible label text in the accessible name

Built-in accessibility features

By default, labels included in this component are rendered as list items, within an unordered list. This helps to convey the number of labels present to people using assistive technologies.

<ul …>
  <li>…One…</li>
  <li>…Two…</li>
  <li>…Three…</li>
  …
</ul>

Truncated variant

The truncated variant will automatically include a control that allows people to view the full list of labels. This control is marked up as a button, and has an accessible name of "Show +X more", to convey its purpose. Alongside this, the control uses an aria-expanded attribute to convey when it is expanded/collapsed.

Implementation requirements

When implementing this pattern, you should consider whether using an unordered list is most appropriate for the context of use. If not, this can be changed using the as prop to change the element type that the container is rendered as.

How to test the component

Integration tests

• If the labels text is visible at wide viewports, ensure that it is not hidden or truncated at narrow viewports

Component tests

• The LabelGroup component is exposed as a <ul> element, with each label wrapped in a <li> element
• If using the Truncated variant, then the following must be true:
  • The "Show X more" control has an accessible name that includes the visible label
  • The "Show X more" control is marked up as a button
  • The resulting dialog has a role of dialog
  • The resulting dialog has a close control, with an accessible name of "Close", and a role of button
  • The "Show X more" control and "Close" controls can be navigate to and activated using only a keyboard
  • Focus remains trapped in the resulting dialog when it is present