From 5fda4e2103cb26d4a641fd974f9d0e818e21c9a2 Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 03:27:53 +0200 Subject: [PATCH] a11y: sidebar nav-items keyboard-accessible + aria-current MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit All 7 sidebar nav-items (Twitch VODs / Clips / Cutter / Merge / Statistik / Archiv / Einstellungen) were plain `
` elements with only an onclick. Same a11y story as the previous two iterations: no role, no tabindex, no semantic active-state marker, no keyboard activation. Added on each nav item: - role="button" and tabindex="0" so they enter the tab order and read as activatable buttons to assistive tech - aria-current="page" applied to the active item, removed from the others — both managed in showTab() since that's the single switch point for active-state transitions - A delegated keydown handler on the .nav container (one listener, not seven) that fires showTab on Enter / Space for whatever nav-item descendant is currently focused. Bound once with a data-keynav-bound guard so init() re-running doesn't double-bind CSS adds a 2px purple focus-visible ring matching the rest of the keyboard-focus family added in 4.6.50 and 4.6.51. WCAG 2.1 success criterion 2.1.1 (Keyboard) — every interactive element activated by keyboard. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/index.html | 14 +++++++------- src/renderer.ts | 26 +++++++++++++++++++++++++- src/styles.css | 5 +++++ 3 files changed, 37 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index 8246dca..e98b111 100644 --- a/src/index.html +++ b/src/index.html @@ -186,31 +186,31 @@