From b51b39c3a78405461887e192f54c1605949ec0e2 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 10 May 2026 23:44:23 -0400
Subject: [PATCH] a11y: keyboard-accessible panel toggles, region landmarks in
 inspector

- Add role="button" tabindex="0" aria-expanded to .link-host-title
  in both static and JS-rendered panels (host panels + UniFi switches)
- Sync aria-expanded in togglePanel(), restoreCollapseState(),
  collapseAll(), and expandAll()
- Add keydown handler (Enter/Space) so panel headers are keyboard-operable
- Add role="region" aria-label to inspector main chassis area
- Add role="complementary" aria-label to inspector port detail panel
- Replace last inline date-parse in renderLinks() with _toIso() helper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 templates/inspector.html |  4 ++--
 templates/links.html     | 37 ++++++++++++++++++++++++++-----------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/templates/inspector.html b/templates/inspector.html
index 495b5df..90cff93 100644
--- a/templates/inspector.html
+++ b/templates/inspector.html
@@ -14,10 +14,10 @@
 </div>
 
 <div class="inspector-layout">
-  <div class="inspector-main" id="inspector-main">
+  <div class="inspector-main" id="inspector-main" role="region" aria-label="Switch chassis diagrams">
     <div class="link-loading">Loading inspector data</div>
   </div>
-  <div class="inspector-panel" id="inspector-panel">
+  <div class="inspector-panel" id="inspector-panel" role="complementary" aria-label="Port detail panel">
     <div class="inspector-panel-inner" id="inspector-panel-inner"></div>
   </div>
 </div>
diff --git a/templates/links.html b/templates/links.html
index 014725b..fb628fb 100644
--- a/templates/links.html
+++ b/templates/links.html
@@ -349,7 +349,7 @@ function renderUnifiSwitches(unifiSwitches, dataUpdated) {
 
     return `
       <div class="link-host-panel" id="panel-${CSS.escape(swName)}">
-        <div class="link-host-title" data-action="toggle-panel">
+        <div class="link-host-title" data-action="toggle-panel" role="button" tabindex="0" aria-expanded="true">
           <span class="link-host-name">${escHtml(swName)}</span>
           <span class="link-host-ip">${escHtml(sw.ip || '')}</span>
           <span class="link-host-upd">${escHtml(sw.model || '')}${updStr ? ' · ' + updStr : ''}${poeLoad}</span>
@@ -366,8 +366,11 @@ function renderUnifiSwitches(unifiSwitches, dataUpdated) {
 // ── Panel collapse / expand ───────────────────────────────────────
 function togglePanel(panel) {
   panel.classList.toggle('collapsed');
-  const btn = panel.querySelector('.panel-toggle');
-  if (btn) btn.textContent = panel.classList.contains('collapsed') ? '[+]' : '[–]';
+  const isCollapsed = panel.classList.contains('collapsed');
+  const btn   = panel.querySelector('.panel-toggle');
+  const title = panel.querySelector('.link-host-title');
+  if (btn)   btn.textContent = isCollapsed ? '[+]' : '[–]';
+  if (title) title.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
   const id = panel.id;
   if (id) {
     const collapsed = JSON.parse(sessionStorage.getItem('linksCollapsed') || '{}');
@@ -383,8 +386,10 @@ function restoreCollapseState() {
     if (!panel) continue;
     if (isCollapsed) {
       panel.classList.add('collapsed');
-      const btn = panel.querySelector('.panel-toggle');
-      if (btn) btn.textContent = '[+]';
+      const btn   = panel.querySelector('.panel-toggle');
+      const title = panel.querySelector('.link-host-title');
+      if (btn)   btn.textContent = '[+]';
+      if (title) title.setAttribute('aria-expanded', 'false');
     }
   }
 }
@@ -463,12 +468,12 @@ function renderLinks(data) {
     const sample  = Object.values(ifaces)[0] || {};
     const ip      = sample.host_ip || '';
     const updStr  = data.updated
-      ? new Date(data.updated.replace(' UTC', 'Z').replace(' ', 'T')).toLocaleTimeString()
+      ? new Date(_toIso(data.updated)).toLocaleTimeString()
       : '';
 
     parts.push(`
       <div class="link-host-panel" id="panel-${CSS.escape(hostname)}">
-        <div class="link-host-title" data-action="toggle-panel">
+        <div class="link-host-title" data-action="toggle-panel" role="button" tabindex="0" aria-expanded="true">
           <span class="link-host-name">${escHtml(hostname)}</span>
           <span class="link-host-ip">${escHtml(ip)}</span>
           <span class="link-host-upd">${updStr}</span>
@@ -498,8 +503,10 @@ function applyLinksSearch() {
 function collapseAll() {
   document.querySelectorAll('.link-host-panel').forEach(p => {
     p.classList.add('collapsed');
-    const btn = p.querySelector('.panel-toggle');
-    if (btn) btn.textContent = '[+]';
+    const btn   = p.querySelector('.panel-toggle');
+    const title = p.querySelector('.link-host-title');
+    if (btn)   btn.textContent = '[+]';
+    if (title) title.setAttribute('aria-expanded', 'false');
   });
   sessionStorage.setItem('linksCollapsed', JSON.stringify(
     Object.fromEntries([...document.querySelectorAll('.link-host-panel')].map(p => [p.id, true]))
@@ -509,8 +516,10 @@ function collapseAll() {
 function expandAll() {
   document.querySelectorAll('.link-host-panel').forEach(p => {
     p.classList.remove('collapsed');
-    const btn = p.querySelector('.panel-toggle');
-    if (btn) btn.textContent = '[–]';
+    const btn   = p.querySelector('.panel-toggle');
+    const title = p.querySelector('.link-host-title');
+    if (btn)   btn.textContent = '[–]';
+    if (title) title.setAttribute('aria-expanded', 'true');
   });
   sessionStorage.setItem('linksCollapsed', '{}');
 }
@@ -575,6 +584,12 @@ document.addEventListener('click', e => {
   if (e.target.closest('[data-action="expand-all"]'))   { expandAll();   return; }
 });
 
+document.addEventListener('keydown', e => {
+  if (e.key !== 'Enter' && e.key !== ' ') return;
+  const toggleTitle = e.target.closest('[data-action="toggle-panel"]');
+  if (toggleTitle) { e.preventDefault(); togglePanel(toggleTitle.closest('.link-host-panel')); }
+});
+
 document.getElementById('links-search')?.addEventListener('input', applyLinksSearch);
 </script>
 {% endblock %}