Merge pull request #216 from kk376/fix/hud-input-a11y-labels

fix(a11y): add accessible names to hud sliders and inputs

CHANGELOG.md

@@ -15,6 +15,8 @@ of current runtime behavior, see [`docs/CURRENT-STATE.md`](docs/CURRENT-STATE.md
 
 ### Fixed
 
+- Scope, Bloom, Sharpen, location search and generated style sliders expose
+  explicit accessible names. The first-run checkbox retains its native label.
 - FIRMS records a source as successful only after appending its rows, avoiding
   contradictory success/failure status if aggregation throws.
 - Radio country filtering and voice country requests now resolve common English

docs/CURRENT-STATE.md

@@ -10,6 +10,13 @@ Launch payloads with missing records now say PAYLOAD DATA UNAVAILABLE. Missing n
 
 Updated: August 24, 2026
 
+## Control names for assistive technology
+
+Scope, Bloom, Sharpen and location search have explicit accessible names.
+Generated style sliders use the same name as their visible parameter label.
+The first-run suppression checkbox keeps its native wrapping label, so its
+accessible name remains "Don't show this again". Control behavior is unchanged.
+
 ## FIRMS source status
 
 The FIRMS proxy records source success after appending its rows. If aggregation

index.html

@@ -440,7 +440,7 @@
              mirrors SCOPE_FEATHER_RATIO_DEFAULT in src/scopeMask.js. Feather
              softens the black mask edge; label fading is the separate Fade
              slider. -->
-        <input type="range" class="pp-slider" id="scope-feather-slider" min="0" max="100" value="11" title="Scope edge feather as a percentage of the keyhole radius" />
+        <input type="range" class="pp-slider" id="scope-feather-slider" min="0" max="100" value="11" aria-label="Scope edge feather" title="Scope edge feather as a percentage of the keyhole radius" />
         <span class="pp-slider-value" id="scope-feather-value">11%</span>
       </div>
     </div>
@@ -460,7 +460,7 @@
         <span class="pp-label">Bloom</span>
       </button>
       <div class="pp-slider-row" id="bloom-slider-row">
-        <input type="range" class="pp-slider" id="bloom-intensity-slider" min="0" max="200" value="0" />
+        <input type="range" class="pp-slider" id="bloom-intensity-slider" min="0" max="200" value="0" aria-label="Bloom intensity" />
         <span class="pp-slider-value" id="bloom-intensity-value">0%</span>
       </div>
     </div>
@@ -470,7 +470,7 @@
         <span class="pp-label">Sharpen</span>
       </button>
       <div class="pp-slider-row" id="sharpen-slider-row">
-        <input type="range" class="pp-slider" id="sharpen-intensity-slider" min="0" max="100" value="49" />
+        <input type="range" class="pp-slider" id="sharpen-intensity-slider" min="0" max="100" value="49" aria-label="Sharpen intensity" />
         <span class="pp-slider-value" id="sharpen-intensity-value">49%</span>
       </div>
     </div>
@@ -565,7 +565,7 @@
             <button id="search-toggle" class="search-toggle-btn" title="Search any location">
               <span>&#x1F50E;</span>
             </button>
-            <input type="text" id="location-search" placeholder="Search any location..." autocomplete="off" spellcheck="false" />
+            <input type="text" id="location-search" placeholder="Search any location..." autocomplete="off" spellcheck="false" aria-label="Search location by name or coordinates" />
           </div>
         </div>
       </div>

src/hudA11y.test.mjs

@@ -0,0 +1,30 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+
+const html = readFileSync(new URL('../index.html', import.meta.url), 'utf8');
+const ui = readFileSync(new URL('./ui.js', import.meta.url), 'utf8');
+
+// Focused markup guards; actual computed names are checked in Chromium.
+// Native labels and hidden inputs must not be treated as missing aria-labels.
+test('HUD sliders and location search have descriptive explicit names', () => {
+  for (const [id, name] of [
+    ['scope-feather-slider', 'Scope edge feather'],
+    ['bloom-intensity-slider', 'Bloom intensity'],
+    ['sharpen-intensity-slider', 'Sharpen intensity'],
+    ['location-search', 'Search location by name or coordinates'],
+  ]) {
+    const input = html.match(new RegExp(`<input\\b[^>]*\\bid="${id}"[^>]*>`))?.[0];
+    assert.ok(input, `${id} exists`);
+    assert.ok(input.includes(`aria-label="${name}"`), `${id} has its descriptive name`);
+  }
+});
+
+test('the first-run checkbox keeps its native visible label', () => {
+  assert.match(html, /<label\b[^>]*class="first-run-suppress"[^>]*>\s*<input type="checkbox" data-first-run-suppress \/>\s*<span>Don't show this again<\/span>\s*<\/label>/);
+});
+
+test('generated style sliders use the visible parameter label as their name', () => {
+  assert.match(ui, /label\.textContent\s*=\s*uMeta\.label;/);
+  assert.match(ui, /slider\.setAttribute\(['"]aria-label['"],\s*uMeta\.label\)/);
+});

src/ui.js

@@ -8930,6 +8930,7 @@ export class StyleManager {
       const slider = document.createElement('input');
       slider.type = 'range';
       slider.className = 'param-slider';
+      slider.setAttribute('aria-label', uMeta.label);
       slider.min = uMeta.min;
       slider.max = uMeta.max;
       slider.step = uMeta.max <= 1 ? '0.01' : '0.1';