7. Accessibility

Target: UI-4 at 1.0; structure and ARIA are built from 0.1.

7.1 Focus order and regions#

F6 / Shift+F6 cycle regions while focus is inside the editor; Ctrl+F6 leaves it (§6.7). Tab moves within a region.

#	Region	Landmark	Notes
1	Left panel header	region “File”	Main menu, collapse
2	Left tabs	tablist
3	Pages	tree “Pages”
4	Layers	tree “Layers”	Every canvas node is reachable here
5	Canvas	application, aria-roledescription="design canvas"	One tab stop; arrows nudge; Tab cycles siblings; live region announces selection (“Button, instance, 326 by 48”)
6	Tool bar	toolbar “Tools”	Roving tabindex
7	Right panel header	region “Document”
8	Right tabs and properties	tablist, then form per section	Section titles are headings
9	Status strip	region “Status”	Buttons

Popovers return focus to their opener. Modals trap focus. Ctrl+Shift+? opens the Keyboard Shortcuts panel (a modal 640 listing commands by category with search).

7.2 ARIA per component#

Component	Role and attributes
ud-toolbar	toolbar, aria-label
ud-tool-button, ud-icon-button	button, aria-label, aria-pressed for toggles, aria-keyshortcuts
ud-tool-group	button with aria-haspopup="menu" on the chevron
ud-tabs	tablist / tab / tabpanel, aria-selected, aria-controls
ud-section	heading level 3; collapsible: button + aria-expanded
ud-number-field	spinbutton, aria-valuenow, aria-valuetext (“Mixed”, “Hug”), aria-invalid
ud-text-field, ud-search-field	textbox / searchbox
ud-dropdown	combobox + listbox / option
ud-segmented	radiogroup / radio
ud-checkbox, ud-toggle	checkbox (with mixed) / switch
ud-layer-tree, ud-layer-row, ud-page-row	tree / treeitem, aria-level, aria-expanded, aria-selected, aria-setsize, aria-posinset
ud-asset-tile grid	grid / gridcell, or listbox / option in list view
ud-menu	menu / menuitem / menuitemcheckbox / separator
ud-tooltip	tooltip, aria-describedby
ud-toast	status or alert
ud-modal	dialog, aria-modal, aria-labelledby
ud-banner	status
ud-agent-badge	status; Stop button
ud-comment-pin	button “Comment by Arthur, 2 replies”
ud-step-row	listitem in a log region (aria-live="polite")
Colour picker SV area, sliders	slider with aria-valuetext (“Saturation 40 %”)

7.3 Visual accessibility#

Rule	Value
Focus	Always visible on keyboard focus (:focus-visible), never removed
Contrast	Chrome inherits theme contrast; custom overlays (size label, distance labels) keep white on focus/red (≥ 4.5:1 in Dark Modern and Light Modern)
Hit targets	24 × 24 minimum; canvas handles have 12 px hit areas
Colour not alone	Component state uses icon + colour; diff uses icon + colour + label; comment state uses fill + icon
Reduced motion	§2.10
Zoom	Layout works at VS Code zoom levels −2 to +3 (webview scales)