xRangerDEandClaude Opus 4.7
5fda4e2103
All 7 sidebar nav-items (Twitch VODs / Clips / Cutter / Merge / Statistik / Archiv / Einstellungen) were plain `<div class="nav-item">` 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) <noreply@anthropic.com>