Selection bar
A frosted bar that floats in while table rows are checked: the count, and what you can do with them.
Examples
Bulk actions
Check a row or the header box: the bar slides in with the count. The header box turns indeterminate for a partial selection.| Project | Owner | Pages | |
|---|---|---|---|
| Atlas | Mika | 42 | |
| Harbor | Jun | 9 | |
| Northlight | Ada | 128 |
Anatomy
.selection-bar[hidden] | After the .table (or its .table-scroll), in the same parent. Sticky to the bottom of the scroll area, centred, frosted. Starts hidden. |
> span > [data-selected] | The count. aequitas.js writes the number into it. |
> hr | Optional vertical hairline between groups of actions. |
> .btn | Actions on the selection. A [data-clear] button unchecks every row. |
API
| Attribute | Values | Description |
|---|---|---|
hidden | boolean | Hides the bar. aequitas.js removes it while at least one row is checked and sets it again at zero. |
data-selected | boolean | On the element inside the bar that holds the count. |
data-clear | boolean | On a button in the bar: unchecks every row of the table. |
role | region | With an aria-label, makes the bar a landmark people can jump to. |
Behaviour
A checkbox in the table's thead checks or unchecks every tbody checkbox. Any change sets aria-selected="true" on checked rows, makes the header box indeterminate for a partial selection, writes the count into [data-selected] and toggles the bar's hidden. When the bar was hidden, the count is written a frame after it appears, so a live region around it hears the first number. Without it, the checkboxes are plain inputs and the bar stays as you leave it.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- Give every checkbox a label naming its row (
aria-label="Select Atlas"); the header one selects all. - The count changes silently. If people need to hear it, add
aria-live="polite"to the count's parent; aequitas.js writes the first count after the bar is shown, so it is announced too. - Keep the bar right after the table in the markup so Tab reaches it next, whatever its sticky position on screen.
| Key | Effect |
|---|---|
| Space | On a row or header checkbox: toggles it, and the bar updates. |
| Tab | Moves from the table into the bar's actions, which follow it in source order. |