From 4e3d0a1f0a12d8e2a319eec1ff89afd38aad8556 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Mon, 11 May 2026 12:58:32 -0400
Subject: [PATCH] fix: aria-required sync, aria-label pills, deduplicate
 setDuration logic

- updateSuppressForm() now sets required + aria-required on sup-name/sup-detail
  when target type changes; sup-reason gets static aria-required="true"
- onTypeChange() in suppressions page syncs aria-required on s-name
- s-name in suppressions.html gets initial required/aria-required (default type=host)
- Duration pills in both modal and suppressions page now have descriptive
  aria-label ("30 minutes", "1 hour", etc.) alongside the group aria-label
- setDuration() in app.js accepts optional {expiresId,pillSel,hintId} opts so
  logic lives in one place; suppressions.html setDur() delegates to it
- Post-create form reset uses setDur() instead of manually patching DOM

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/app.js               | 23 +++++++++++++++++++----
 templates/base.html         | 12 ++++++------
 templates/suppressions.html | 37 ++++++++++++++-----------------------
 3 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/static/app.js b/static/app.js
index 2dfb050..2697fbf 100644
--- a/static/app.js
+++ b/static/app.js
@@ -294,18 +294,33 @@ function updateSuppressForm() {
   const type      = document.getElementById('sup-type').value;
   const nameGrp   = document.getElementById('sup-name-group');
   const detailGrp = document.getElementById('sup-detail-group');
+  const nameInput   = document.getElementById('sup-name');
+  const detailInput = document.getElementById('sup-detail');
   if (nameGrp)   nameGrp.style.display   = (type === 'all') ? 'none' : '';
   if (detailGrp) detailGrp.style.display = (type === 'interface') ? '' : 'none';
+  if (nameInput) {
+    const req = (type !== 'all');
+    nameInput.required = req;
+    nameInput.setAttribute('aria-required', String(req));
+  }
+  if (detailInput) {
+    const req = (type === 'interface');
+    detailInput.required = req;
+    detailInput.setAttribute('aria-required', String(req));
+  }
 }
 
-function setDuration(mins, el) {
-  document.getElementById('sup-expires').value = mins || '';
-  document.querySelectorAll('#suppress-modal .pill').forEach(p => {
+function setDuration(mins, el, opts) {
+  const o         = opts || {};
+  const expiresEl = document.getElementById(o.expiresId || 'sup-expires');
+  const pillSel   = o.pillSel || '#suppress-modal .pill';
+  const hint      = document.getElementById(o.hintId || 'duration-hint');
+  if (expiresEl) expiresEl.value = mins || '';
+  document.querySelectorAll(pillSel).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) {
       const h = Math.floor(mins / 60), m = mins % 60;
diff --git a/templates/base.html b/templates/base.html
index b142b38..9e3b700 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -227,16 +227,16 @@
           <div class="lt-form-group">
             <label class="lt-label" for="sup-reason">Reason <span class="required">*</span></label>
             <input type="text" class="lt-input" id="sup-reason" name="reason"
-                   placeholder="e.g. Planned switch reboot" required>
+                   placeholder="e.g. Planned switch reboot" required aria-required="true">
           </div>
           <div class="lt-form-group lt-form-group--last">
             <label class="lt-label">Duration</label>
             <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>
+              <button type="button" class="pill" data-duration="30" aria-pressed="false" aria-label="30 minutes">30 min</button>
+              <button type="button" class="pill" data-duration="60" aria-pressed="false" aria-label="1 hour">1 hr</button>
+              <button type="button" class="pill" data-duration="240" aria-pressed="false" aria-label="4 hours">4 hr</button>
+              <button type="button" class="pill" data-duration="480" aria-pressed="false" aria-label="8 hours">8 hr</button>
+              <button type="button" class="pill pill-manual active" data-duration="" aria-pressed="true" aria-label="Manual, no expiry">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>
diff --git a/templates/suppressions.html b/templates/suppressions.html
index 7e74cf8..20b30ec 100644
--- a/templates/suppressions.html
+++ b/templates/suppressions.html
@@ -32,7 +32,7 @@
             <label class="lt-label" for="s-name">Target Name <span class="required">*</span></label>
             <input type="text" class="lt-input" id="s-name" name="target_name"
                    placeholder="hostname or device name" autocomplete="off"
-                   list="target-name-list">
+                   required aria-required="true" list="target-name-list">
             <datalist id="target-name-list">
               {% for name in snapshot.hosts.keys() | sort %}
               <option value="{{ name }}">
@@ -59,11 +59,11 @@
           <div class="lt-form-group">
             <label class="lt-label">Duration</label>
             <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>
+              <button type="button" class="pill" data-duration="30" aria-pressed="false" aria-label="30 minutes">30 min</button>
+              <button type="button" class="pill" data-duration="60" aria-pressed="false" aria-label="1 hour">1 hr</button>
+              <button type="button" class="pill" data-duration="240" aria-pressed="false" aria-label="4 hours">4 hr</button>
+              <button type="button" class="pill" data-duration="480" aria-pressed="false" aria-label="8 hours">8 hr</button>
+              <button type="button" class="pill pill-manual active" data-duration="" aria-pressed="true" aria-label="Manual, no expiry">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>
@@ -217,23 +217,16 @@
     const t = document.getElementById('s-type').value;
     document.getElementById('name-group').style.display = (t==='all') ? 'none' : '';
     document.getElementById('detail-group').style.display = (t==='interface') ? '' : 'none';
-    document.getElementById('s-name').required = (t!=='all');
+    const nameInput = document.getElementById('s-name');
+    if (nameInput) {
+      const req = (t !== 'all');
+      nameInput.required = req;
+      nameInput.setAttribute('aria-required', String(req));
+    }
   }
 
   function setDur(mins, el) {
-    document.getElementById('s-expires').value = mins || '';
-    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;
-      hint.textContent = `Expires in ${h?h+'h ':''}${m?m+'m':''}`.trim()+'.';
-    } else {
-      hint.textContent = 'Persists until manually removed.';
-    }
+    setDuration(mins, el, { expiresId: 's-expires', pillSel: '#create-suppression-form .pill', hintId: 's-dur-hint' });
   }
 
   function renderActiveRows(rows) {
@@ -302,9 +295,7 @@
       showToast('Suppression applied', 'success');
       form.reset();
       onTypeChange();
-      document.querySelectorAll('.duration-pills .pill').forEach(p => p.classList.remove('active'));
-      document.querySelector('.duration-pills .pill-manual')?.classList.add('active');
-      document.getElementById('s-dur-hint').textContent = 'Persists until manually removed.';
+      setDur(null, document.querySelector('#create-suppression-form .pill-manual'));
       await refreshActive();
     } catch (err) {
       showToast(err.message || 'Error', 'error');