Use <kbd> tag to describe keyboard shortcuts

When describing, in the guide, the keyboard shortcuts that we accept,
let's use the `<kbd>` element.  This causes the key to render in a box
that people will recognize as conventional.

The way that this is displayed helps to make it clear that, though we
present the key in uppercase, we actually mean for the lowercase
letter to be entered.  Therefore, we present the key in uppercase
since 1) that's how it appears on most keyboards and 2) for some
characters such as `l`, presenting the character in lowercase might be
ambiguous.

We'll spell out "Escape" rather than saying "Esc" (even though many
keyboards spell it that way) since the `KeyboardEvent.keycode`[^1] is
called "Escape", and that's how it would appear in an
`aria-keyshortcuts` attribute[^2].

[^1]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

[^2]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-keyshortcuts
This commit is contained in:
Travis Cross
2025-05-13 20:45:36 +00:00
parent 3e871d1971
commit 52e406bf95

View File

@@ -42,14 +42,14 @@ Tapping the menu bar will scroll the page to the top.
## Search
Each book has a built-in search system.
Pressing the search icon (<i class="fa fa-search"></i>) in the menu bar, or pressing the `/` or `S` key on the keyboard will open an input box for entering search terms.
Pressing the search icon (<i class="fa fa-search"></i>) in the menu bar, or pressing the <kbd>/</kbd> or <kbd>S</kbd> key on the keyboard will open an input box for entering search terms.
Typing some terms will show matching chapters and sections in real time.
Clicking any of the results will jump to that section.
The up and down arrow keys can be used to navigate the results, and enter will open the highlighted section.
After loading a search result, the matching search terms will be highlighted in the text.
Clicking a highlighted word or pressing the `Esc` key will remove the highlighting.
Clicking a highlighted word or pressing the <kbd>Escape</kbd> key will remove the highlighting.
## Code blocks