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><Kit.Phoenix.Roles.KeyboardSheet.opener sheet="shortcut-sheet" id="keyboard-sheet-opener">Keyboard shortcuts</Kit.Phoenix.Roles.KeyboardSheet.opener></p>
<details>
<summary id="shortcut-sheet-opener">Show the open keyboard sheet</summary>
<Kit.Phoenix.Roles.KeyboardSheet.keyboard_sheet
open
id="shortcut-sheet"
aria-labelledby="shortcut-sheet-title"
>
<:heading rest={%{id: "shortcut-sheet-title"}}>Keyboard shortcuts</:heading>
<:group shortcuts={[%Kit.Phoenix.Roles.KeyboardSheet.Shortcut{name: "Find", keys: ["/"]}, %Kit.Phoenix.Roles.KeyboardSheet.Shortcut{name: "Today", keys: ["t"]}]}>Find and navigate</:group>
<:group shortcuts={[%Kit.Phoenix.Roles.KeyboardSheet.Shortcut{name: "New booking", keys: ["n"]}, %Kit.Phoenix.Roles.KeyboardSheet.Shortcut{name: "Keyboard sheet", keys: ["?"]}]}>Booking work</:group>
<:close>Close shortcuts</:close>
</Kit.Phoenix.Roles.KeyboardSheet.keyboard_sheet>
</details>
<Kit.Phoenix.Roles.KeyboardSheet.keyboard_sheet
id="role-keyboard-sheet-open-empty-region"
aria-labelledby="empty-region-shortcut-sheet-title"
>
<:heading rest={%{id: "empty-region-shortcut-sheet-title"}}>Keyboard shortcuts</:heading>
<:close>Close shortcuts</:close>
</Kit.Phoenix.Roles.KeyboardSheet.keyboard_sheet>
<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 id="shortcut-sheet-inert-opener">Show the keyboard sheet while it loads</summary>
<Kit.Phoenix.Roles.KeyboardSheet.keyboard_sheet
open
id="shortcut-sheet-inert"
aria-labelledby="shortcut-sheet-inert-title"
>
<:heading rest={%{id: "shortcut-sheet-inert-title"}}>Keyboard shortcuts</:heading>
<:group shortcuts={[%Kit.Phoenix.Roles.KeyboardSheet.Shortcut{name: "Find", keys: ["/"]}, %Kit.Phoenix.Roles.KeyboardSheet.Shortcut{name: "Today", keys: ["t"]}]}>Find and navigate</:group>
<:close state={Kit.Phoenix.ActionState.inert("shortcut-sheet-inert-close", [Kit.Phoenix.Words.text("Close waits until the shortcuts have loaded.")])}>Close shortcuts</:close>
</Kit.Phoenix.Roles.KeyboardSheet.keyboard_sheet>
</details>