Keyboard sheet, open
Show the open keyboard sheet
Help carries the link above except where the primary pointer is coarse, where the sheet and the link are both absent. The core composition is open and not modal; Phoenix’s controller and React’s showModal make it modal, on its Backdrop, and return focus.
Source
<p><a id="kit-keyboard-sheet-opener" data-kit-opens="keyboard-sheet" href="#kit-keyboard-sheet">Keyboard shortcuts</a></p>
<details>
<summary>Show the open keyboard sheet</summary>
<dialog id="kit-keyboard-sheet" data-kit-role="keyboard-sheet" data-kit-state="open" open aria-labelledby="shortcut-sheet-title">
<h2 data-kit-region="heading" id="shortcut-sheet-title">Keyboard shortcuts</h2>
<div data-kit-region="groups">
<section data-kit-region="group" aria-labelledby="shortcut-navigation-title">
<h3 data-kit-region="heading" id="shortcut-navigation-title">Find and navigate</h3>
<ul data-kit-region="shortcuts">
<li data-kit-region="shortcut">
<span data-kit-region="name">Find</span>
<span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">/</kbd></span>
</li>
<li data-kit-region="shortcut">
<span data-kit-region="name">Today</span>
<span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">t</kbd></span>
</li>
</ul>
</section>
<section data-kit-region="group" aria-labelledby="shortcut-booking-title">
<h3 data-kit-region="heading" id="shortcut-booking-title">Booking work</h3>
<ul data-kit-region="shortcuts">
<li data-kit-region="shortcut">
<span data-kit-region="name">New booking</span>
<span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">n</kbd></span>
</li>
<li data-kit-region="shortcut">
<span data-kit-region="name">Keyboard sheet</span>
<span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">?</kbd></span>
</li>
</ul>
</section>
</div>
<div data-kit-region="actions">
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Close shortcuts</span></button>
</div>
</dialog>
</details>
<dialog id="role-keyboard-sheet-open-empty-region" data-kit-role="keyboard-sheet" aria-labelledby="empty-region-shortcut-sheet-title">
<h2 data-kit-region="heading" id="empty-region-shortcut-sheet-title">Keyboard shortcuts</h2>
<div data-kit-region="groups"></div>
<div data-kit-region="actions">
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Close shortcuts</span></button>
</div>
</dialog>
<p>Help carries the link above except where the primary pointer is coarse, where the sheet and the link are both absent. The core composition is open and not modal; Phoenix’s controller and React’s showModal make it modal, on its Backdrop, and return focus.</p>
Keyboard sheet, inert
Show the keyboard sheet while it loads
Source
<details>
<summary>Show the keyboard sheet while it loads</summary>
<dialog id="kit-keyboard-sheet-inert" data-kit-role="keyboard-sheet" data-kit-state="open" open aria-labelledby="shortcut-sheet-inert-title">
<h2 data-kit-region="heading" id="shortcut-sheet-inert-title">Keyboard shortcuts</h2>
<div data-kit-region="groups">
<section data-kit-region="group" aria-labelledby="shortcut-inert-navigation-title">
<h3 data-kit-region="heading" id="shortcut-inert-navigation-title">Find and navigate</h3>
<ul data-kit-region="shortcuts">
<li data-kit-region="shortcut">
<span data-kit-region="name">Find</span>
<span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">/</kbd></span>
</li>
<li data-kit-region="shortcut">
<span data-kit-region="name">Today</span>
<span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">t</kbd></span>
</li>
</ul>
</section>
</div>
<div data-kit-region="actions">
<button type="button" id="shortcut-sheet-inert-close" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="shortcut-sheet-inert-close-words"><span data-kit-region="label">Close shortcuts</span></button>
<p data-kit-region="words" id="shortcut-sheet-inert-close-words">Close waits until the shortcuts have loaded.</p>
</div>
</dialog>
</details>