feat(desktop): keyboard shortcuts cheatsheet + a11y landmarks / focus#3125
feat(desktop): keyboard shortcuts cheatsheet + a11y landmarks / focus#3125HUQIANTAO wants to merge 1 commit into
Conversation
github-actions
Bot
added
the
v2
Three related improvements to make the desktop app reachable from the keyboard and readable by screen readers. 1. Shortcuts cheatsheet (press ?). New component components/ShortcutsCheatsheet.tsx renders a single-column kbd+description table, grouped by section (Composer / Transcript / Global). Triggered by a '?' keypress from anywhere outside an editable element, or from a Help icon in the topbar. The dialog is role=dialog + aria-modal + aria-labelledby; on open, focus moves to the close button; on close, focus returns to the trigger. 2. ARIA landmarks + labels. App.tsx's <header>/<main>/<footer> get role=banner / role=main / role=contentinfo, and every icon-only topbar button gets an explicit aria-label. The error banner is role=alert. The composer textarea gets id=composer-input + aria-label so a skip-link can target it. The status-bar model name is aria-live=polite so a model switch is announced. 3. Skip-to-composer link. The first Tab from the topbar lands on a visually-hidden link that, when activated, jumps focus to the textarea. Saves keyboard-only users from tabbing through every topbar chip on every reload. 4. Focus rings. :focus-visible paints a 2px accent outline with a 2px offset across every interactive element. Disabled buttons skip the ring (it's not actionable). :focus (without -visible) is reset globally so the OS-default ring on mouse-clicks doesn't double up with the WebKitGTK focus rectangle on Linux. i18n: en + zh both gain a 'shortcuts' section (title, close, open, section.*, desc.*).
|
Thanks! This conflicts with the latest main-v2 in styles.css (other desktop PRs have since landed there). Could you rebase onto the latest main-v2? Happy to merge once green. Thank you! |
esengine
left a comment
esengine
left a comment
There was a problem hiding this comment.
Blocking finding: the component is never mounted — the diff adds ShortcutsCheatsheet.tsx, locales, and CSS, but no App.tsx wiring, so the "?" keybind and help entry don't exist and this ships as dead code. Three more for the same revision:
- Keep the
DictKeytyping instead oft: (id: string) => string— the dynamic"shortcuts.desc." + idlookups silently render raw keys on any typo. - The shortcut table predates the keybinding unification: Shift+Tab now only toggles Plan, Ctrl+Y toggles YOLO. Sync the content.
- Rebase (styles.css moved substantially).
|
Thanks @HUQIANTAO for the shortcuts cheatsheet and accessibility work here. I integrated this direction into #4515 on top of the latest Authorship note: @HUQIANTAO remains the primary author of the shortcuts help/a11y direction. @SivanCola contributed as a collaborator by integrating it with the current shortcut registry, folding in the related settings direction from #4202, and verifying the final state. Closing this PR as superseded by #4515. |
3 participants
Three related improvements to make the desktop app reachable from the keyboard and readable by screen readers.
:focus-visiblepaints a 2px accent outline with a 2px offset.