refactor: const/let modernisation and eliminate duplicate date-parse logic

- Replace all var declarations in base.html, index.html scripts with
  const/let (const for bindings that are never reassigned, let otherwise)
- Add _toIso() helper to links.html script block and replace the two
  inline .replace(' UTC','Z').replace(' ','T') patterns with it
- Replace var with const in links.html _linksInterval

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/app.js

@@ -276,9 +276,12 @@ function openSuppressModal(type, name, detail) {
   updateSuppressForm();
   lt.modal.open('suppress-modal');
 
-  document.querySelectorAll('#suppress-modal .pill').forEach(p => p.classList.remove('active'));
+  document.querySelectorAll('#suppress-modal .pill').forEach(p => {
+    p.classList.remove('active');
+    p.setAttribute('aria-pressed', 'false');
+  });
   const manualPill = document.querySelector('#suppress-modal .pill-manual');
-  if (manualPill) manualPill.classList.add('active');
+  if (manualPill) { manualPill.classList.add('active'); manualPill.setAttribute('aria-pressed', 'true'); }
   const hint = document.getElementById('duration-hint');
   if (hint) hint.textContent = 'Suppression will persist until manually removed.';
 }
@@ -297,8 +300,11 @@ function updateSuppressForm() {
 
 function setDuration(mins, el) {
   document.getElementById('sup-expires').value = mins || '';
-  document.querySelectorAll('#suppress-modal .pill').forEach(p => p.classList.remove('active'));
-  if (el) el.classList.add('active');
+  document.querySelectorAll('#suppress-modal .pill').forEach(p => {
+    p.classList.remove('active');
+    p.setAttribute('aria-pressed', 'false');
+  });
+  if (el) { el.classList.add('active'); el.setAttribute('aria-pressed', 'true'); }
   const hint = document.getElementById('duration-hint');
   if (hint) {
     if (mins) {

static/style.css

@@ -143,8 +143,13 @@
   flex-shrink: 0;
 }
 
-/* ── Divider compact variant ─────────────────────────────────────── */
+/* ── Divider variants ────────────────────────────────────────────── */
 .lt-divider--compact { margin: 1rem 0 0.75rem; }
+.lt-divider--unifi   { margin: 20px 0 12px; }
+.lt-divider-label--unifi { color: var(--cyan); letter-spacing: .1em; }
+
+/* ── Stats grid spacing variant ──────────────────────────────────── */
+.lt-stats-grid--mb { margin-bottom: 16px; }
 
 /* ── Topology section collapse toggle ────────────────────────────── */
 .topo-collapse-btn {
@@ -213,6 +218,7 @@
 .events-filter-bar .lt-input-sm { width: 220px; }
 .sev-pills          { display: flex; gap: 4px; }
 .g-page-sub { font-size: .78em; color: var(--text-muted); margin-top: 4px; }
+.g-page-sub-aside { font-size: .78em; color: var(--text-muted); margin-left: 8px; }
 
 /* ── Badge severity color variants (used with lt-badge) ───────────── */
 .badge-critical { color: var(--red);    border-color: var(--red);    text-shadow: var(--glow-red); }

templates/base.html

@@ -231,12 +231,12 @@
           </div>
           <div class="lt-form-group lt-form-group--last">
             <label class="lt-label">Duration</label>
-            <div class="duration-pills">
-              <button type="button" class="pill" data-duration="30">30 min</button>
-              <button type="button" class="pill" data-duration="60">1 hr</button>
-              <button type="button" class="pill" data-duration="240">4 hr</button>
-              <button type="button" class="pill" data-duration="480">8 hr</button>
-              <button type="button" class="pill pill-manual active" data-duration="">Manual &#x221E;</button>
+            <div class="duration-pills" role="group" aria-label="Select suppression duration">
+              <button type="button" class="pill" data-duration="30" aria-pressed="false">30 min</button>
+              <button type="button" class="pill" data-duration="60" aria-pressed="false">1 hr</button>
+              <button type="button" class="pill" data-duration="240" aria-pressed="false">4 hr</button>
+              <button type="button" class="pill" data-duration="480" aria-pressed="false">8 hr</button>
+              <button type="button" class="pill pill-manual active" data-duration="" aria-pressed="true">Manual &#x221E;</button>
             </div>
             <input type="hidden" id="sup-expires" name="expires_minutes" value="">
             <div class="lt-field-hint" id="duration-hint">Persists until manually removed.</div>
@@ -286,12 +286,12 @@
       <div class="lt-modal-body">
         <div class="lt-form-group">
           <label class="lt-label">Auto-refresh interval</label>
-          <div class="duration-pills" id="settings-refresh-pills">
-            <button type="button" class="pill" data-refresh-interval="15">15 s</button>
-            <button type="button" class="pill" data-refresh-interval="30">30 s</button>
-            <button type="button" class="pill" data-refresh-interval="60">1 min</button>
-            <button type="button" class="pill" data-refresh-interval="300">5 min</button>
-            <button type="button" class="pill" data-refresh-interval="0">Off</button>
+          <div class="duration-pills" id="settings-refresh-pills" role="group" aria-label="Select auto-refresh interval">
+            <button type="button" class="pill" data-refresh-interval="15" aria-pressed="false">15 s</button>
+            <button type="button" class="pill" data-refresh-interval="30" aria-pressed="false">30 s</button>
+            <button type="button" class="pill" data-refresh-interval="60" aria-pressed="false">1 min</button>
+            <button type="button" class="pill" data-refresh-interval="300" aria-pressed="false">5 min</button>
+            <button type="button" class="pill" data-refresh-interval="0" aria-pressed="false">Off</button>
           </div>
           <div class="lt-field-hint" id="settings-refresh-hint"></div>
         </div>
@@ -324,7 +324,7 @@
       lt.init({ bootName: 'GANDALF' });
 
       // Theme toggle
-      var themeBtn = document.getElementById('lt-theme-btn');
+      const themeBtn = document.getElementById('lt-theme-btn');
       if (themeBtn) themeBtn.addEventListener('click', function() { lt.theme.toggle(); });
 
       // Command palette
@@ -343,9 +343,9 @@
 
     // ── Global footer + key actions ───────────────────────────────────────
     document.addEventListener('click', function(e) {
-      var btn = e.target.closest('[data-action]');
+      const btn = e.target.closest('[data-action]');
       if (!btn) return;
-      var action = btn.getAttribute('data-action');
+      const action = btn.getAttribute('data-action');
       if (action === 'show-keyboard-help' && window.lt)  lt.modal.open('lt-keys-help');
       if (action === 'open-settings' && window.lt)       lt.modal.open('lt-settings-modal');
     });
@@ -366,8 +366,8 @@
 
     // ── Settings modal ────────────────────────────────────────────────────
     (function() {
-      var LS_KEY = 'gandalf_settings';
-      var DEFAULT = { refreshInterval: 30 };
+      const LS_KEY = 'gandalf_settings';
+      const DEFAULT = { refreshInterval: 30 };
 
       function loadSettings() {
         try { return Object.assign({}, DEFAULT, JSON.parse(localStorage.getItem(LS_KEY) || '{}')); }
@@ -381,9 +381,11 @@
 
       function applyRefreshPillUI(interval) {
         document.querySelectorAll('#settings-refresh-pills .pill').forEach(function(p) {
-          p.classList.toggle('active', parseInt(p.dataset.refreshInterval) === interval);
+          const isActive = parseInt(p.dataset.refreshInterval) === interval;
+          p.classList.toggle('active', isActive);
+          p.setAttribute('aria-pressed', isActive ? 'true' : 'false');
         });
-        var hint = document.getElementById('settings-refresh-hint');
+        const hint = document.getElementById('settings-refresh-hint');
         if (hint) {
           if (interval === 0)        hint.textContent = 'Auto-refresh disabled.';
           else if (interval < 60)    hint.textContent = 'Refreshes every ' + interval + ' seconds.';
@@ -392,16 +394,16 @@
       }
 
       // Init pill UI from saved settings
-      var _settings = loadSettings();
+      const _settings = loadSettings();
       applyRefreshPillUI(_settings.refreshInterval);
 
       // Expose for pages that need to read it (e.g. index.html for autoRefresh)
       window.gandalfSettings = _settings;
 
       document.addEventListener('click', function(e) {
-        var pill = e.target.closest('#settings-refresh-pills .pill[data-refresh-interval]');
+        const pill = e.target.closest('#settings-refresh-pills .pill[data-refresh-interval]');
         if (!pill) return;
-        var interval = parseInt(pill.dataset.refreshInterval);
+        const interval = parseInt(pill.dataset.refreshInterval);
         _settings.refreshInterval = interval;
         saveSettings(_settings);
         applyRefreshPillUI(interval);
@@ -410,16 +412,16 @@
 
     // ── Notification Bell — shows active monitoring alerts ────────────────
     (function() {
-      var bell     = document.getElementById('lt-notif-bell');
-      var panel    = document.getElementById('lt-notif-panel');
-      var list     = document.getElementById('lt-notif-list');
-      var clearBtn = document.getElementById('lt-notif-clear-btn');
-      var wrapEl   = document.getElementById('lt-notif-wrap');
+      const bell     = document.getElementById('lt-notif-bell');
+      const panel    = document.getElementById('lt-notif-panel');
+      const list     = document.getElementById('lt-notif-list');
+      const clearBtn = document.getElementById('lt-notif-clear-btn');
+      const wrapEl   = document.getElementById('lt-notif-wrap');
       if (!bell || !panel) return;
 
-      var _open      = false;
-      var _lastEvents = [];
-      var LS_READ_KEY = 'gandalf_notif_read_before';
+      let _open       = false;
+      let _lastEvents = [];
+      const LS_READ_KEY = 'gandalf_notif_read_before';
 
       function getReadBefore() {
         try { return parseInt(localStorage.getItem(LS_READ_KEY) || '0'); } catch(_) { return 0; }
@@ -438,20 +440,20 @@
       }
 
       function fmtAgo(dateStr) {
-        var diff = Math.floor((Date.now() - toMs(dateStr)) / 1000);
+        const diff = Math.floor((Date.now() - toMs(dateStr)) / 1000);
         if (diff < 60)    return diff + 's ago';
         if (diff < 3600)  return Math.floor(diff/60) + 'm ago';
         if (diff < 86400) return Math.floor(diff/3600) + 'h ago';
         return Math.floor(diff/86400) + 'd ago';
       }
 
-      var SEV_DOT = { critical: 'var(--red)', warning: 'var(--amber)' };
+      const SEV_DOT = { critical: 'var(--red)', warning: 'var(--amber)' };
 
       function renderAlerts(events) {
         _lastEvents = events || [];
-        var readBefore = getReadBefore();
-        var active = _lastEvents.filter(function(e) { return e.severity !== 'info'; });
-        var unreadCount = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
+        const readBefore = getReadBefore();
+        const active = _lastEvents.filter(function(e) { return e.severity !== 'info'; });
+        const unreadCount = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
         lt.notif.set(bell, unreadCount);
 
         if (!active.length) {
@@ -459,8 +461,8 @@
           return;
         }
         list.innerHTML = active.slice(0, 25).map(function(e) {
-          var isUnread = toMs(e.last_seen) > readBefore;
-          var dotColor = SEV_DOT[e.severity] || 'var(--text-muted)';
+          const isUnread = toMs(e.last_seen) > readBefore;
+          const dotColor = SEV_DOT[e.severity] || 'var(--text-muted)';
           return '<div class="lt-notif-item' + (isUnread ? ' lt-notif-item--unread' : '') + '">' +
             '<div class="lt-notif-dot' + (isUnread ? '' : ' lt-notif-dot--read') + '" style="background:' + dotColor + '"></div>' +
             '<div class="lt-notif-item-body">' +
@@ -474,14 +476,14 @@
         fetch('/api/status', { credentials: 'same-origin' })
           .then(function(r) { return r.json(); })
           .then(function(data) {
-            var events = data.events || [];
+            const events = data.events || [];
             if (andRender) {
               renderAlerts(events);
             } else {
               _lastEvents = events;
-              var readBefore = getReadBefore();
-              var active = events.filter(function(e) { return e.severity !== 'info'; });
-              var unread = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
+              const readBefore = getReadBefore();
+              const active = events.filter(function(e) { return e.severity !== 'info'; });
+              const unread = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
               lt.notif.set(bell, unread);
             }
           })

templates/index.html

@@ -73,12 +73,13 @@
     <div class="lt-toolbar-left">
       <div class="lt-search">
         <input type="search" class="lt-input lt-search-input" id="events-search"
-               placeholder="Filter by target, type, description…" autocomplete="off">
+               placeholder="Filter by target, type, description…" autocomplete="off"
+               aria-label="Filter active alerts">
       </div>
-      <div class="sev-pills">
-        <button type="button" class="pill active" data-sev="">All</button>
-        <button type="button" class="pill" data-sev="critical">Critical</button>
-        <button type="button" class="pill" data-sev="warning">Warning</button>
+      <div class="sev-pills" role="group" aria-label="Filter by severity">
+        <button type="button" class="pill active" data-sev="" aria-pressed="true">All</button>
+        <button type="button" class="pill" data-sev="critical" aria-pressed="false">Critical</button>
+        <button type="button" class="pill" data-sev="warning" aria-pressed="false">Warning</button>
       </div>
     </div>
   </div>
@@ -316,7 +317,7 @@
     <div class="lt-toolbar-left">
       <div class="lt-search">
         <input type="search" class="lt-input lt-search-input lt-search-input--sm" id="host-search"
-               placeholder="Filter hosts…" autocomplete="off">
+               placeholder="Filter hosts…" autocomplete="off" aria-label="Filter hosts">
       </div>
     </div>
   </div>
@@ -357,7 +358,7 @@
                 data-sup-type="host"
                 data-sup-name="{{ name }}"
                 data-sup-detail=""
-                title="Suppress alerts for this host">
+                aria-label="Suppress alerts for {{ name }}">
           🔕 Suppress
         </button>
         <a href="{{ url_for('links_page') }}#{{ name }}"
@@ -416,7 +417,8 @@
               <button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
                       data-sup-type="unifi_device"
                       data-sup-name="{{ d.name }}"
-                      data-sup-detail="">
+                      data-sup-detail=""
+                      aria-label="Suppress alerts for {{ d.name }}">
                 🔕 Suppress
               </button>
               {% endif %}
@@ -464,7 +466,7 @@
 {% block scripts %}
 <script>
   // Start auto-refresh using saved settings interval (default 30 s)
-  var _savedInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 30;
+  const _savedInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 30;
   if (_savedInterval > 0) lt.autoRefresh.start(refreshAll, _savedInterval * 1000);
 
   // When settings change, restart auto-refresh with new interval
@@ -475,9 +477,9 @@
 
   // ── Topology collapse toggle ───────────────────────────────────
   (function() {
-    var LS_KEY = 'gandalf_topo_collapsed';
-    var btn    = document.getElementById('topo-toggle-btn');
-    var wrap   = document.getElementById('topo-collapsible-wrap');
+    const LS_KEY = 'gandalf_topo_collapsed';
+    const btn    = document.getElementById('topo-toggle-btn');
+    const wrap   = document.getElementById('topo-collapsible-wrap');
     if (!btn || !wrap) return;
 
     function setCollapsed(v) {
@@ -487,7 +489,7 @@
       try { localStorage.setItem(LS_KEY, v ? '1' : '0'); } catch(_) {}
     }
 
-    var saved = false;
+    let saved = false;
     try { saved = localStorage.getItem(LS_KEY) === '1'; } catch(_) {}
     setCollapsed(saved);
 
@@ -540,8 +542,12 @@
   document.querySelector('.sev-pills')?.addEventListener('click', e => {
     const pill = e.target.closest('.pill[data-sev]');
     if (!pill) return;
-    document.querySelectorAll('.sev-pills .pill').forEach(p => p.classList.remove('active'));
+    document.querySelectorAll('.sev-pills .pill').forEach(p => {
+      p.classList.remove('active');
+      p.setAttribute('aria-pressed', 'false');
+    });
     pill.classList.add('active');
+    pill.setAttribute('aria-pressed', 'true');
     _filterSev = pill.dataset.sev;
     applyEventsFilter();
   });
@@ -563,9 +569,12 @@
   document.querySelectorAll('.lt-stat-card[data-stat-filter]').forEach(card => {
     card.addEventListener('click', () => {
       const sev = card.dataset.statFilter;
-      document.querySelectorAll('.sev-pills .pill').forEach(p => p.classList.remove('active'));
+      document.querySelectorAll('.sev-pills .pill').forEach(p => {
+        p.classList.remove('active');
+        p.setAttribute('aria-pressed', 'false');
+      });
       const matchPill = document.querySelector(`.sev-pills .pill[data-sev="${sev}"]`);
-      if (matchPill) matchPill.classList.add('active');
+      if (matchPill) { matchPill.classList.add('active'); matchPill.setAttribute('aria-pressed', 'true'); }
       _filterSev = sev;
       applyEventsFilter();
       document.getElementById('events-table-wrap')?.scrollIntoView({ behavior: 'smooth', block: 'start' });

templates/inspector.html

@@ -8,7 +8,7 @@
     <h1 class="lt-page-title">Network Inspector</h1>
     <p class="g-page-sub">
       Visual switch chassis diagrams. Click a port to see detailed stats and LLDP path debug.
-      <span id="inspector-updated" style="margin-left:8px"></span>
+      <span id="inspector-updated" class="g-page-sub-aside"></span>
     </p>
   </div>
 </div>
@@ -320,7 +320,9 @@ function renderPanel(swName, idx) {
     _apiData.hosts && _apiData.hosts[d.lldp.system_name]);
   const diagHtml = hasDiagTarget ? `
     <div class="diag-bar">
-      <button class="btn-diag" data-action="run-diagnostic" data-sw="${escHtml(swName)}" data-idx="${idx}">Run Link Diagnostics</button>
+      <button class="btn-diag lt-btn lt-btn-secondary lt-btn-sm" data-action="run-diagnostic"
+              data-sw="${escHtml(swName)}" data-idx="${idx}"
+              aria-label="Run link diagnostics for port ${idx} on ${escHtml(swName)}">Run Diagnostics</button>
       <span class="diag-status" id="diag-status"></span>
     </div>
     <div class="diag-results" id="diag-results"></div>` : '';
@@ -433,7 +435,7 @@ function renderInspector(data) {
   }
 
   if (!Object.keys(switches).length) {
-    main.innerHTML = '<p class="empty-state">No switch data available. Monitor may still be initialising.</p>';
+    main.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">⬡</div><div class="lt-empty-state-title">No switch data available</div><div class="lt-empty-state-body">Monitor may still be initialising.</div></div>';
     return;
   }
 
@@ -460,7 +462,7 @@ async function loadInspector() {
     renderInspector(data);
   } catch (e) {
     document.getElementById('inspector-main').innerHTML =
-      '<p class="empty-state">Failed to load inspector data.</p>';
+      '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">✕</div><div class="lt-empty-state-title">Failed to load inspector data</div></div>';
     lt.toast.error('Failed to load inspector data');
   }
 }

templates/links.html

@@ -8,7 +8,7 @@
     <h1 class="lt-page-title">Link Debug</h1>
     <p class="g-page-sub">
       Per-interface stats: speed, duplex, SFP optical levels, TX/RX rates, errors, and carrier changes.
-      <span id="links-updated" style="margin-left:8px"></span>
+      <span id="links-updated" class="g-page-sub-aside"></span>
     </p>
   </div>
 </div>
@@ -17,7 +17,8 @@
   <div class="lt-toolbar-left">
     <div class="lt-search">
       <input type="search" class="lt-input lt-search-input" id="links-search"
-             placeholder="Filter by host or switch name…" autocomplete="off">
+             placeholder="Filter by host or switch name…" autocomplete="off"
+             aria-label="Filter by host or switch name">
     </div>
   </div>
   <div class="lt-toolbar-right">
@@ -35,6 +36,7 @@
 {% block scripts %}
 <script>
 const escHtml = s => lt.escHtml(s);
+const _toIso  = s => s ? s.replace(' UTC', 'Z').replace(' ', 'T') : s;
 
 // ── Formatting helpers ────────────────────────────────────────────
 function fmtRate(bytesPerSec) {
@@ -325,7 +327,7 @@ function renderPortCard(portName, d) {
 function renderUnifiSwitches(unifiSwitches, dataUpdated) {
   if (!unifiSwitches || !Object.keys(unifiSwitches).length) return '';
   const updStr = dataUpdated
-    ? new Date(dataUpdated.replace(' UTC', 'Z').replace(' ', 'T')).toLocaleTimeString()
+    ? new Date(_toIso(dataUpdated)).toLocaleTimeString()
     : '';
   const html = Object.entries(unifiSwitches).map(([swName, sw]) => {
     const ports = sw.ports || {};
@@ -358,7 +360,7 @@ function renderUnifiSwitches(unifiSwitches, dataUpdated) {
       </div>`;
   }).join('');
 
-  return `<div class="lt-divider" style="margin:20px 0 12px"><span class="lt-divider-label" style="color:var(--cyan);letter-spacing:.1em">UNIFI SWITCH PORTS</span></div>${html}`;
+  return `<div class="lt-divider lt-divider--unifi"><span class="lt-divider-label lt-divider-label--unifi">UNIFI SWITCH PORTS</span></div>${html}`;
 }
 
 // ── Panel collapse / expand ───────────────────────────────────────
@@ -407,37 +409,37 @@ function buildLinkSummary(hosts, unifiSwitches) {
   }
   const allTotal = totalIfaces + swTotal;
   const allDown  = downIfaces  + swDown;
-  const downColor = allDown  > 0 ? 'var(--red)'   : 'var(--green)';
-  const errColor  = errIfaces > 0 ? 'var(--amber)' : 'var(--green)';
+  const downCls    = allDown  > 0 ? 'lt-text-red'   : 'lt-text-green';
+  const errCls     = errIfaces > 0 ? 'lt-text-amber' : 'lt-text-green';
   const downCardCls = allDown  > 0 ? ' lt-stat-card--alert' : '';
   const poeCard = totalPoe > 0 ? `
     <div class="lt-stat-card">
-      <span class="lt-stat-icon" aria-hidden="true" style="color:var(--amber)">⚡</span>
+      <span class="lt-stat-icon lt-text-amber" aria-hidden="true">⚡</span>
       <div class="lt-stat-info">
-        <span class="lt-stat-value" style="color:var(--amber)">${totalPoe.toFixed(1)}</span>
+        <span class="lt-stat-value lt-text-amber">${totalPoe.toFixed(1)}</span>
         <span class="lt-stat-label">PoE Load (W)</span>
       </div>
     </div>` : '';
   return `
-    <div class="lt-stats-grid" style="margin-bottom:16px">
+    <div class="lt-stats-grid lt-stats-grid--mb">
       <div class="lt-stat-card">
-        <span class="lt-stat-icon" aria-hidden="true" style="color:var(--cyan)">⬡</span>
+        <span class="lt-stat-icon lt-text-cyan" aria-hidden="true">⬡</span>
         <div class="lt-stat-info">
-          <span class="lt-stat-value" style="color:var(--cyan)">${allTotal}</span>
+          <span class="lt-stat-value lt-text-cyan">${allTotal}</span>
           <span class="lt-stat-label">Interfaces</span>
         </div>
       </div>
       <div class="lt-stat-card${downCardCls}">
-        <span class="lt-stat-icon" aria-hidden="true" style="color:${downColor}">●</span>
+        <span class="lt-stat-icon ${downCls}" aria-hidden="true">●</span>
         <div class="lt-stat-info">
-          <span class="lt-stat-value" style="color:${downColor}">${allDown}</span>
+          <span class="lt-stat-value ${downCls}">${allDown}</span>
           <span class="lt-stat-label">Ports Down</span>
         </div>
       </div>
       <div class="lt-stat-card">
-        <span class="lt-stat-icon" aria-hidden="true" style="color:${errColor}">▲</span>
+        <span class="lt-stat-icon ${errCls}" aria-hidden="true">▲</span>
         <div class="lt-stat-info">
-          <span class="lt-stat-value" style="color:${errColor}">${errIfaces}</span>
+          <span class="lt-stat-value ${errCls}">${errIfaces}</span>
           <span class="lt-stat-label">With Errors</span>
         </div>
       </div>
@@ -557,7 +559,7 @@ async function loadLinks() {
 }
 
 loadLinks();
-var _linksInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
+const _linksInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
 if (_linksInterval > 0) lt.autoRefresh.start(loadLinks, Math.max(_linksInterval, 15) * 1000);
 
 window.onGandalfSettingsChanged = function(s) {

templates/suppressions.html

@@ -58,12 +58,12 @@
         <div class="form-row form-row-align">
           <div class="lt-form-group">
             <label class="lt-label">Duration</label>
-            <div class="duration-pills">
-              <button type="button" class="pill" data-duration="30">30 min</button>
-              <button type="button" class="pill" data-duration="60">1 hr</button>
-              <button type="button" class="pill" data-duration="240">4 hr</button>
-              <button type="button" class="pill" data-duration="480">8 hr</button>
-              <button type="button" class="pill pill-manual active" data-duration="">Manual ∞</button>
+            <div class="duration-pills" role="group" aria-label="Select suppression duration">
+              <button type="button" class="pill" data-duration="30" aria-pressed="false">30 min</button>
+              <button type="button" class="pill" data-duration="60" aria-pressed="false">1 hr</button>
+              <button type="button" class="pill" data-duration="240" aria-pressed="false">4 hr</button>
+              <button type="button" class="pill" data-duration="480" aria-pressed="false">8 hr</button>
+              <button type="button" class="pill pill-manual active" data-duration="" aria-pressed="true">Manual ∞</button>
             </div>
             <input type="hidden" id="s-expires" name="expires_minutes" value="">
             <div class="lt-field-hint" id="s-dur-hint">Persists until manually removed.</div>
@@ -110,7 +110,8 @@
             <td class="ts-cell">{{ s.created_at }}</td>
             <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
             <td>
-              <button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="{{ s.id }}">Remove</button>
+              <button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="{{ s.id }}"
+                      aria-label="Remove suppression for {{ s.target_name or 'global' }}">Remove</button>
             </td>
           </tr>
           {% endfor %}
@@ -221,8 +222,11 @@
 
   function setDur(mins, el) {
     document.getElementById('s-expires').value = mins || '';
-    document.querySelectorAll('.duration-pills .pill').forEach(p => p.classList.remove('active'));
-    if (el) el.classList.add('active');
+    document.querySelectorAll('.duration-pills .pill').forEach(p => {
+      p.classList.remove('active');
+      p.setAttribute('aria-pressed', 'false');
+    });
+    if (el) { el.classList.add('active'); el.setAttribute('aria-pressed', 'true'); }
     const hint = document.getElementById('s-dur-hint');
     if (mins) {
       const h = Math.floor(mins/60), m = mins%60;
@@ -251,7 +255,8 @@
         <td>${lt.escHtml(s.suppressed_by)}</td>
         <td class="ts-cell">${lt.escHtml(s.created_at || '')}</td>
         <td class="ts-cell">${s.expires_at ? lt.escHtml(s.expires_at) : '<em>manual</em>'}</td>
-        <td><button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="${s.id}">Remove</button></td>
+        <td><button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="${s.id}"
+            aria-label="Remove suppression for ${lt.escHtml(s.target_name || 'global')}">Remove</button></td>
       </tr>`).join('');
     wrap.innerHTML = `
       <div class="lt-frame">