A board that enables users to view and work with multiple records at the same time, with Kanban capabilities for organizing, tracking, and managing work.
Renders a visual board, in configurable workspaces, which can include vertical lanes, swim lanes, and cards. Once configured, you can add lanes, cards, or swimlanes. You can then perform different actions based on what's configured for the workspace that's using the component.
This release introduces comprehensive improvements to keyboard navigation, ARIA announcements, high-contrast support, theming, and multi-select behaviour across the board and card interactions.
1. Keyboard Navigation Enhancements
1.1 Arrow-Key Navigation
- Right arrow navigation is blocked after reaching the last element in the rightmost lane.
- Screen reader announces: “Last work item. Right navigation blocked.”
- Left arrow navigation is blocked after reaching the first element in the leftmost lane.
- Screen reader announces: “Last work item. Left navigation blocked.”
- Up/Down/Left/Right arrows move focus in their respective logical directions across lanes and cards.
- Arrow navigation now matches the visual layout precisely for predictable movement.
2. ARIA Screen Reader Improvements
- For both leftmost and rightmost boundaries:
- ARIA label reads out the card content, prefixed with:
- “Right navigation blocked. Last work item.” (right boundary)
- “Left navigation blocked. Last work item.” (left boundary)
- ARIA label reads out the card content, prefixed with:
- Ensures non-visual users understand navigation limits without confusion.
- All card content continues to be read as part of the ARIA label.
3. Tab Order & Focus Behavior
3.1 Standardized Tab Navigation
- Visual tab order now matches actual DOM tab order.
- Tab moves focus forward; Shift+Tab moves focus backward.
- No positive tabindex values are used to avoid unpredictable ordering.
- Tab order for:
- Cards
- Lanes
- Drag handles
- Inline actions
follows the structure defined in Figma.
3.2 Focus Visibility
- A clear, high-contrast ≥2px focus ring is applied to all interactive elements.
- Focus styles are distinct from hover and selected states.
- Focus rings remain visible in:
- Light theme
- Dark theme
- Windows High Contrast Mode
- Focus is never hidden under sticky headers or drag overlays.
4. Color, Contrast & Theming Compliance
All green checklist indicators validated per design. ✔
4.1 Text & Non-Text Contrast
- Normal text: ≥ 4.5:1
- Large text: ≥ 3:1
- Non-text elements: ≥ 3:1
- Card borders
- Column dividers
- Icons
- Focus rings
- Drag handles
All thresholds met. ✔
4.2 Dark Theme Enhancements
- Avoided pure black/white to preserve contrast:
- Board background: #121212
- Columns: #1E1E1E
- Cards: #262626
- All shadows, borders, and surfaces maintain ≥3:1 contrast.
4.3 Status Colors
- High-contrast, theme-friendly variants added (e.g., Success 600/200).
- Status chips remain readable in both themes and forced colors.
5. Windows High Contrast (Forced Colors) Mode
5.1 Automatic Forced-Colors Support
- The board respects system-defined colors:
- color: ButtonText;
- background-color: ButtonFace;
- border-color: WindowText;
- No UI element disables forced color adjustments.
5.2 Icons & Indicators
- Icons/SVGs dynamically adjust to forced colors.
- Removed reliance on gradients and background-images that break in HCM.
5.3 Drag & Drop in High Contrast
- Dragged card displays a strong system-highlight outline.
- Drop targets visibly adapt to system colors.
5.4 Essential Visual Indicators
- States are communicated via text + shape; never color alone.
- Priority, warnings, WIP limits, etc., all include non-color cues.
6. Disabled, Inactive & Read-Only States
- Each state is visually and programmatically distinct.
- Meets ≥3:1 non-text contrast ratio.
- States exposed correctly to screen readers.
7. Keyboard Multi-Select Enhancements
7.1 Multi-Select via Keyboard
- Multi-select now supported with:
- Command + Return (Mac)
- Ctrl + Enter (Windows)
- If a card is already selected:
- Pressing the same shortcut again deselects it.
- Works consistently across:
- Single card
- Multiple cards
- Cards across lanes
7.2 Fully Accessible Multi-Select
- No mouse required.
- Selection state announced to screen readers.
- Xanadu instance (26.x.x) with UI Builder