Dashboard Layout

Accessibility

Import DashboardLayout, DashboardLayoutLandmark, DashboardLayoutPanel, DashboardLayoutPanelSpan, DashboardLayoutPanelState, DashboardLayoutSection, DashboardLayoutState from @prepared911/ui/blocks/dashboard-layout.

The root is a main landmark by default. With landmark={DashboardLayoutLandmark.Section} it is a section named by the page title, so it is a region landmark.
The page header's title is the h1. Each section is a region landmark named by its h2 through aria-labelledby. Panel and tile titles are h3.
Reading order is DOM order at every width. The grid uses auto-placement with no dense packing and no order, so tab order and screen reader order match the visual order after a reflow.
While the dashboard or a panel loads, a status region with aria-busy carries a visually hidden label; the placeholders are aria-hidden. On a ready dashboard that suspends, LoadingBoundary names the pending state and announces it once.
A panel's chart names itself; the layout adds no label to the chart slot.
At 320 CSS px or 200% text the grid is one column and nothing passes the container edge.
Reflow is driven by the dashboard's width. A dashboard in a narrow pane is one column even on a wide screen.
Unbroken strings wrap: the dashboard sets overflow-wrap: anywhere on its root. A Button label in the header actions wraps the same way. Nothing in the header clips, so a focused control's ring is never cut off.

Dashboard Layout / API and Development

Detail Drawer / Usage

Dashboard Layout

Accessibility

The root is a main landmark by default. With landmark={DashboardLayoutLandmark.Section} it is a section named by the page title, so it is a region landmark.
The page header's title is the h1. Each section is a region landmark named by its h2 through aria-labelledby. Panel and tile titles are h3.
Reading order is DOM order at every width. The grid uses auto-placement with no dense packing and no order, so tab order and screen reader order match the visual order after a reflow.
While the dashboard or a panel loads, a status region with aria-busy carries a visually hidden label; the placeholders are aria-hidden. On a ready dashboard that suspends, LoadingBoundary names the pending state and announces it once.
A panel's chart names itself; the layout adds no label to the chart slot.
At 320 CSS px or 200% text the grid is one column and nothing passes the container edge.
Reflow is driven by the dashboard's width. A dashboard in a narrow pane is one column even on a wide screen.
Unbroken strings wrap: the dashboard sets overflow-wrap: anywhere on its root. A Button label in the header actions wraps the same way. Nothing in the header clips, so a focused control's ring is never cut off.

Dashboard Layout / API and Development

Detail Drawer / Usage