benmichael/gods-eye-view
1
0 Fork 0
mirror of https://github.com/bilawalsidhu/gods-eye-view.git synced 2026-11-06 03:14:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge main and narrow accessible input names to useful controls

Browse Source
This commit is contained in:
Sameh Khamis committed 2026-09-10 21:33:45 -07:00
2 parents 9e92ab6f9b e7cb08f5f6
commit 3d526f208d
12 files changed
+312 -64
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/hudA11y.test.mjs
+19 -41
View File
@@ -1,52 +1,30 @@
import test from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync } from 'node:fs';
import path from 'node:path';
test('index.html: all interactive input elements have accessible names (WCAG 4.1.2)', () => {
const htmlPath = path.resolve(process.cwd(), 'index.html');
const html = readFileSync(htmlPath, 'utf8');
const html = readFileSync(new URL('../index.html', import.meta.url), 'utf8');
const ui = readFileSync(new URL('./ui.js', import.meta.url), 'utf8');
// Match all <input ... /> tags
const inputMatches = [...html.matchAll(/<input\b([^>]*)\/?>/g)];
assert.ok(inputMatches.length > 5, 'expected to find interactive input elements');
for (const match of inputMatches) {
const attrs = match[1];
const hasAriaLabel = /aria-label=["'][^"']+["']/.test(attrs);
const hasAriaLabelledby = /aria-labelledby=["'][^"']+["']/.test(attrs);
const idMatch = attrs.match(/\bid=["']([^"']+)["']/);
const id = idMatch ? idMatch[1] : null;
let hasAssociatedLabel = false;
if (id) {
// Check if there is a <label for="id">
const labelForRegex = new RegExp(`<label\\b[^>]*\\bfor=["']${id}["']`, 'i');
hasAssociatedLabel = labelForRegex.test(html);
}
const hasAccessibleName = hasAriaLabel || hasAriaLabelledby || hasAssociatedLabel;
assert.ok(
hasAccessibleName,
`input tag "${match[0]}" must have an accessible name (aria-label, aria-labelledby, or label for)`
);
// 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('index.html: HUD sliders and controls have descriptive accessible labels', () => {
const htmlPath = path.resolve(process.cwd(), 'index.html');
const html = readFileSync(htmlPath, 'utf8');
assert.match(html, /id="scope-feather-slider"[^>]*aria-label="Scope edge feather"/);
assert.match(html, /id="bloom-intensity-slider"[^>]*aria-label="Bloom intensity"/);
assert.match(html, /id="sharpen-intensity-slider"[^>]*aria-label="Sharpen intensity"/);
assert.match(html, /id="location-search"[^>]*aria-label="Search location by name or coordinates"/);
assert.match(html, /data-first-run-suppress[^>]*aria-label="Do not show this message again on startup"/);
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('ui.js: dynamic style parameter sliders set aria-label', () => {
const uiPath = path.resolve(process.cwd(), 'src/ui.js');
const uiJs = readFileSync(uiPath, 'utf8');
assert.match(uiJs, /slider\.setAttribute\(['"]aria-label['"],\s*uMeta\.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\)/);
});