Qeetrix

Action Bar

The bulk-selection bar: floats above the page while rows are selected.

Usage

Import

import { ActionBar } from "@qeetrix/ui";

It can also be imported on its own from @qeetrix/ui/components/action-bar.

States

hover · open

Support

FeatureStatus
Right-to-leftSupported
Dark modeSupported
DensityNot supported
Server renderingClient component
Reduced motionSupported

Accessibility

Follows the WAI-ARIA toolbar pattern. Audited.

CheckResult
SemanticsPass
Accessible namePass
KeyboardPass
FocusPass
Screen readerPass
Right-to-leftNot applicable
Reduced motionPass
Forced coloursPass
ContrastPass

Keyboard

Tab Enter Space ArrowLeft ArrowRight

Focus

One Tab stop for the group; arrow keys move between items (roving tab stop).

Tests

Covered by unit, accessibility (axe), interaction and visual tests.

On this page

UsageImportStatesSupportAccessibilityKeyboardFocusTests