Skip to content

Overflow

C-27 · Components · Content

All elements · Overflow on the Components page

Last checked 2026-10-22 · Awaiting approval · Accessibility tests

Copies the bun run a11y:approve command for Overflow.

Overflow

C-27WCAG 2.2 AA · Passed #420

Measures children and collapses the tail into a +N that opens a Popover. The static contract is a clipped flex row with a trailing counter chip.

Chips, avatars, toolbar items
FinanceQ3Audit
Acme HoldingsUrgent
jdakmr+5

Guidance

When to use

  • Fit a row of tags or Chips into a fixed width and collapse the rest into a +N button that opens a Popover.
  • Show the first few avatars of a group and a +N count for the rest.
  • Keep a table cell or card footer one line high when the number of items varies.
  • Wrap to at most two rows before collapsing with data-axis="y".

When to consider something else

  • When the hidden items are commands, let the Toolbar collapse them into a More Menu. See Menu.
  • When the full set matters more than the space, let the Chips wrap or show them in a List. See List.
  • When the text itself is too long, truncate it with Text and offer a Tooltip. See Tooltip.

Usability

Do
  • Keep the items in a stable order so the hidden ones are predictable.
  • Show the hidden items in the Popover in the same form as the visible ones.
  • Recalculate the count when the container resizes, so the counter is always correct.
Don’t
  • Don't hide an item the user needs to act on first, such as an error tag.
  • Don't make the avatar +N look clickable unless it opens the full list.
  • Don't use overflow for fewer than two hidden items when there is room to wrap.

Accessibility

Keyboard

Overflow keyboard
Keys Action
Tab Moves to the +N button after any interactive items in the row.
Enter or Space Opens the Popover with the hidden items.
Escape Closes the Popover and returns focus to the +N button.

Roles and names

  • The +N counter is a button that opens a popover; it carries aria-expanded while open.
  • "+2" is not a clear name; the binding must label it, for example aria-label="Show 2 more tags".
  • Hidden items must be removed from the accessibility tree, not just clipped, or screen readers read items sighted users cannot see while the Popover repeats them.
  • The avatar +5 in the specimen is a plain span; give it text such as "5 more people" for screen readers, or make it a button if it opens the list.

Focus

  • Hidden interactive items must not take focus while clipped.
  • When the Popover opens, focus stays on the button or moves to the first item; when it closes, focus returns to the +N button.
  • The +N button shows the shared focus ring.

Other requirements

  • The +N Chip is at least 1.5rem high; keep it there or larger to meet 2.5.8.
  • When the count changes on resize, do not announce it; users get the count when they reach the button.
  • At 320px (1.4.10) and 400% zoom more items collapse, so every item must still be reachable through the Popover.

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

WCAG 2.2 AA · Passed

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

Overflow test checklist
Area Automated A person checks
General Passed Color is never the only cue, text alternatives say the same thing as the graphic, and the element reads the same in the light and the dark theme.
Zoom Passed At 200% zoom, at 320 CSS pixels wide and with the WCAG text-spacing overrides, nothing is lost, clipped or overlapping.
Keyboard Passed Every row of the Keyboard table works, focus is always visible and never trapped, and the tab order follows the reading order. (3 rows)
Screen reader Passed With NVDA or JAWS on Windows and VoiceOver on macOS, names, roles and states are announced as Roles and names says, and changes are announced once. (4 items)

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- overflow --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

Overflow package
Source css/classic/components/utility.css
Specimens also use Avatar · Box · Card · Chip · Icon · Popover · Text · Toolbar
Sprites sprites/icons.svg
React Not yet available: the React binding has not started.

Latest updates

No recorded changes yet.

All release notes