Panel accessibility

What Panel handles for you, and what you still provide.

What Panel does automatically

Panel keeps aria-expanded in sync on every trigger (any element with [aria-controls]). It also applies inert to a closed panel, taking it out of the tab order and the accessibility tree without touching the layout.

Trigger markup

A trigger is any element whose aria-controls points at the panel's id. Panel keeps that trigger's aria-expanded in sync.

HTML 
<!-- aria-expanded is set automatically by Panel-->
<button aria-controls="my-panel" aria-expanded="false">Toggle</button>

Panel markup

Use role="dialog" for modal-like sidebars, role="region" for inline panels.

HTML 
<div id="my-panel" data-panel data-panel-axis="horizontal">
	<div class="panel-wrapper" role="dialog" aria-label="Settings">
		<button data-panel-close aria-label="Close Settings">✕</button>
		<!-- content-->
	</div>
</div>

Focus management

Use autoFocus to move focus into the panel when it opens, and returnFocus to send it back to the trigger when it closes.

JS 
new Panel('#my-panel', {
	autoFocus: 'first',   // focus first focusable element on open
	returnFocus: true     // return focus to trigger on close
});

autoFocus options

Panel and PanelSet take the same autoFocus values.

Value What it focuses Best for
'heading' First h1-h6 in panel (gets tabindex="-1" automatically) Standard tabs with headings
'first' First focusable element (button, link, input) Wizard steps, forms
true The panel element itself Panels with aria-label
'input' First form field (input, select, textarea) Forms, bypasses keyboard-only check
false Nothing (no focus movement) Page load, mouse-only interfaces