Components › Records & data › Table › Bulk action bar

Bulk action bar

canon

Floating pill at the bottom of a table or list once rows are selected: count, actions, ⋮ for the rest and × to clear; folds to one inline action on phones.

Beta 5 Oct 2026 (acrm !4743): one implementation everywhere (Lidé, Firmy, Segment, Pipeline table, Datamart, Komunikace). Phone (≤ 720 px) folding into ⋮, × always visible, page FAB hidden, Esc clears selection everywhere. Dev check 5 Oct 2026 at 390: Lidé '3 vybráno · Vytvořit obchod · ⋯ · ×', FAB hidden. Open: overflow trigger uses dots (⋯) — align with canon dots-vertical in the record-actions-menu wave. Canon after that wave. Owner approved 11 Oct 2026 (item 17 c, acrm !4961, prototype proto/bulkbar-mobile@d457d2c90): on the phone „Vybrat všech N" is the first item in ⋮ (divider, actions, divider, Koš last; gone when all selected); the bar hides under an open sheet or modal dialog at every width; one rule in bulk-bar.css. Dev check 11 Oct (Komunikace, 360/390 light/dark): × inside the bar (309 < 316 / 324 < 331), ⋮ order as approved, bar hidden under the sheet. ⋮ tap target 43×43 (as prototype). Dev check 19 Oct 2026 (Lidé, real data): 1440 light/dark bar '2 vybráno · Vytvořit obchod · Změnit vlastníka · Exportovat · Smazat', 390 dark '2 vybráno · Vytvořit obchod · ⋮ · ×' (⋮ = dots-vertical, menu Změnit vlastníka · Exportovat · Smazat), FAB hidden, brown 0. Blocker for canon: Esc does not clear the selection when focus is on a row checkbox (BulkActionBar Esc guard skips every input, incl. type=checkbox) — contradicts a11y.md; fix in acrm, then canon. Esc blocker fixed in acrm !5293 (19 Oct 2026): checkbox/radio no longer count as a typing field; re-checked on dev (Lidé 1440, focus on the row checkbox → Esc clears, bar unmounts). Canon 19 Oct 2026 (AD): stories Default · States · Composition, usage + a11y, dev check 1440/390 light/dark.

Used in 8 files · 4 areas · 8× — components/segment, pages/PipelinePage, pages/datamart, pages/komunikace

apps/web <BulkActionBar>.acrm-bulkbar .acrm-bulkbar-count .acrm-bulkbar-sepSourceStory
ExamplesCodeUsageAccessibilityChangelog

Keyboard

  • Tab reaches „Vybrat všech N", each action, „⋮" and × in visual order.
  • Esc clears the selection anywhere on the page, except while typing in a field or while a dialog or menu is open — there Esc closes that layer first (confirm, „⋮").
  • „⋮" is a MenuButton: Enter / Space opens, arrows move, Esc closes.

ARIA

  • The bar is role="region" with aria-label „Hromadné akce" (i18n common:bulk.region), so it is reachable as a landmark.
  • × has aria-label „Zrušit výběr"; its title „Zrušit výběr (Esc)" names the shortcut.
  • „⋮" has the accessible name „Další akce".
  • A disabled action keeps its reason in title (hint).

Focus

  • Appearing does not steal focus: the user keeps working in the list and Tabs to the bar.
  • After × or Esc the bar unmounts; focus stays where the user was in the list.
  • Destructive actions open Confirm, which traps focus and returns it on close.

Contrast

  • Count and noun use --accent on --surface-100; actions --fg; the bar has --border and --shadow-pop against the page in both themes.

Known limits

  • The count is not announced live when it changes; the region label and the count text are read when the user reaches the bar.
  • On touch screens the row checkbox is not revealed by hover; selection starts from the checkbox column (tables) or the lead cell (mail).

Source: docs/table/bulk-action-bar.a11y.md · GitLab