+
diff --git a/src/renderer.ts b/src/renderer.ts
index 606e114..d354c27 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -43,6 +43,26 @@ async function init(): Promise
{
renderStreamers();
renderQueue();
+ // Keyboard activation for nav-items (Enter / Space). The items are
+ // div[role="button"][tabindex="0"], so browsers won't synthesise a
+ // click on Enter/Space natively — we wire it here once via event
+ // delegation so the listener doesn't need re-binding per tab switch.
+ const nav = document.querySelector('.nav');
+ if (nav && !nav.hasAttribute('data-keynav-bound')) {
+ nav.setAttribute('data-keynav-bound', '1');
+ nav.addEventListener('keydown', (event) => {
+ const ev = event as KeyboardEvent;
+ if (ev.key !== 'Enter' && ev.key !== ' ') return;
+ const target = ev.target as HTMLElement | null;
+ const item = target?.closest('.nav-item') as HTMLElement | null;
+ if (!item) return;
+ const tab = item.dataset.tab;
+ if (!tab) return;
+ ev.preventDefault();
+ showTab(tab);
+ });
+ }
+
// Kick off live-status subscription so the sidebar dots populate.
const liveStatusInit = (window as unknown as { initLiveStatusSubscription?: () => Promise }).initLiveStatusSubscription;
if (typeof liveStatusInit === 'function') void liveStatusInit();
@@ -777,7 +797,10 @@ function persistActiveTab(tab: string): void {
}
function showTab(tab: string): void {
- queryAll('.nav-item').forEach((i) => i.classList.remove('active'));
+ queryAll('.nav-item').forEach((i) => {
+ i.classList.remove('active');
+ i.removeAttribute('aria-current');
+ });
queryAll('.tab-content').forEach((c) => c.classList.remove('active'));
const navItem = query(`.nav-item[data-tab="${tab}"]`);
@@ -787,6 +810,7 @@ function showTab(tab: string): void {
return;
}
navItem.classList.add('active');
+ navItem.setAttribute('aria-current', 'page');
byId(tab + 'Tab').classList.add('active');
const titles: Record = UI_TEXT.tabs;
diff --git a/src/styles.css b/src/styles.css
index a4731fd..f76d775 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -89,6 +89,11 @@ body {
color: white;
}
+.nav-item:focus-visible {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.55);
+}
+
.nav-item svg {
width: 20px;
height: 20px;