a11y: aria-pressed for all pill groups, aria-label on search inputs and buttons

- Add role="group" + aria-label to duration-pills and sev-pills containers
- Add aria-pressed to severity filter, duration, and refresh-interval pills
- Keep aria-pressed in sync with JS (setDuration, applyRefreshPillUI, modal reset)
- Add aria-label to events-search, host-search, links-search inputs
- Add aria-label to host and UniFi device suppress buttons in templates
- Replace dynamic style color strings in links.html stat cards with TDS
  utility classes (lt-text-red/green/amber) via downCls/errCls variables

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

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 %}
@@ -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' });