chore: refactor testing script

Author: dtopalov

scripts/test-a11y-unified.mjs

@@ -185,97 +185,108 @@ function checkLabelAssociation(el, document) {
     return { matched: false };
 }
 
-function isIdReferencePattern(attrName, expectedValue) {
-    return ID_REFERENCE_ATTRS.includes(attrName) && expectedValue &&
-        (expectedValue.includes(' id') || expectedValue.startsWith('.k-'));
-}
-
-function validateIdReference(el, attrName, expectedValue, document) {
-    const actualValue = el.getAttribute(attrName);
-    if (!actualValue?.trim()) {
-        return { matched: false, reason: 'missing-id-reference', expected: `ID reference (${expectedValue})`, actual: actualValue };
-    }
+// ── Strategy validators ─────────────────────────────────────────────
+// Each returns { matched, actual?, expected?, reason? }
 
-    const targetSelector = expectedValue.replace(/\s+id$/, '').trim();
-    const targetEl = document.getElementById(actualValue);
-    if (!targetEl) {
-        return { matched: false, reason: 'id-not-found', expected: `element with id="${actualValue}"`, actual: 'no element found' };
-    }
-
-    if (targetSelector?.startsWith('.k-')) {
-        const isListboxSel = targetSelector === '.k-list-ul';
-        if (!targetEl.matches(targetSelector) && !(isListboxSel && targetEl.matches('.k-list-content[role="listbox"]'))) {
-            return { matched: false, reason: 'id-wrong-element', expected: `${targetSelector} with id="${actualValue}"`, actual: targetEl.className };
-        }
-    }
-    return { matched: true, actual: actualValue, reason: 'id-reference-valid' };
-}
-
-/**
- * Check a single attribute spec against a DOM element.
- * Handles: boolean attrs, ID references, "or" alternatives, label associations,
- * nodeName checks, and simple presence/value checks.
- */
-function checkSingleAttr(el, attrSpec, document) {
-    if (attrSpec === 'label for') {
-        return checkLabelAssociation(el, document);
-    }
-    if (attrSpec.startsWith('nodeName=')) {
-        return { matched: el.nodeName.toUpperCase() === attrSpec.split('=')[1].toUpperCase() };
-    }
+const attrValidators = {
+    labelFor: (el, _attr, _val, doc) =>
+        checkLabelAssociation(el, doc),
 
-    const m = attrSpec.match(/^(\S+?)(?:=(.+))?$/);
-    if (!m) { return { matched: false }; }
+    nodeName: (el, _attr, tag) =>
+        ({ matched: el.nodeName.toUpperCase() === tag.toUpperCase() }),
 
-    const [, attr, rawVal] = m;
-    // Strip surrounding quotes from value (e.g. role="switch" → switch)
-    const val = rawVal?.replace(/^["']|["']$/g, '');
-    if (BOOLEAN_ATTRS.includes(attr)) {
+    boolean: (el, attr) => {
         const present = el.getAttribute(attr) !== null;
         return { matched: present, actual: present ? 'present' : null, expected: 'present' };
-    }
-    if (isIdReferencePattern(attr, val)) {
-        return validateIdReference(el, attr, val, document);
-    }
+    },
 
-    // Role check — account for implicit roles from semantic HTML
-    if (attr === 'role' && val) {
+    idReference: (el, attr, val, doc) => {
+        const actual = el.getAttribute(attr);
+        if (!actual?.trim()) {
+            return { matched: false, reason: 'missing-id-reference', expected: `ID reference (${val})`, actual };
+        }
+        const targetSelector = val.replace(/\s+id$/, '').trim();
+        const targetEl = doc.getElementById(actual);
+        if (!targetEl) {
+            return { matched: false, reason: 'id-not-found', expected: `element with id="${actual}"`, actual: 'no element found' };
+        }
+        if (targetSelector?.startsWith('.k-')) {
+            const isListboxSel = targetSelector === '.k-list-ul';
+            if (!targetEl.matches(targetSelector) && !(isListboxSel && targetEl.matches('.k-list-content[role="listbox"]'))) {
+                return { matched: false, reason: 'id-wrong-element', expected: `${targetSelector} with id="${actual}"`, actual: targetEl.className };
+            }
+        }
+        return { matched: true, actual, reason: 'id-reference-valid' };
+    },
+
+    role: (el, _attr, val) => {
         const explicit = el.getAttribute('role');
         if (explicit === val) { return { matched: true, actual: explicit }; }
         const implicit = getImplicitRole(el);
         if (implicit === val) { return { matched: true, actual: `${val} (implicit from <${el.nodeName.toLowerCase()}>)` }; }
         return { matched: false, actual: explicit || implicit || null, expected: val };
-    }
-
-    // tabindex — natively focusable elements don't need explicit tabindex="0"
-    if (attr === 'tabindex' && val === '0' && NATIVE_FOCUSABLE.includes(el.nodeName)) {
-        return { matched: true, actual: '0 (natively focusable)', reason: 'native-focusable' };
-    }
+    },
 
-    const actual = el.getAttribute(attr);
+    nativeFocusable: () =>
+        ({ matched: true, actual: '0 (natively focusable)', reason: 'native-focusable' }),
 
-    // Value with alternatives: "true/false" or "list|both|inline"
-    // If the attribute is absent, the rule passes (value constraint only applies when present)
-    if (val && (val.includes('/') || val.includes('|'))) {
+    multiValue: (el, attr, val) => {
         const alternatives = val.split(/[/|]/).map(v => v.trim());
+        const actual = el.getAttribute(attr);
         if (actual === null) { return { matched: true, actual: null, reason: 'optional-value-absent' }; }
-        const matched = alternatives.includes(actual);
-        return { matched, actual, expected: alternatives.join(' or ') };
-    }
+        return { matched: alternatives.includes(actual), actual, expected: alternatives.join(' or ') };
+    },
 
-    // Template variable pattern: ${id}-something → match any non-empty value
-    if (val && val.includes('${')) {
-        const matched = actual !== null && actual.trim() !== '';
-        return { matched, actual, expected: `pattern: ${val}` };
-    }
+    templatePattern: (el, attr, val) => {
+        const actual = el.getAttribute(attr);
+        return { matched: actual !== null && actual.trim() !== '', actual, expected: `pattern: ${val}` };
+    },
+
+    stateDependentAbsent: () =>
+        ({ matched: true, actual: null, reason: 'state-dependent-absent' }),
 
-    // State-dependent attributes: presence-only check (no =value) passes when absent
-    if (!val && STATE_DEPENDENT_ATTRS.includes(attr) && actual === null) {
-        return { matched: true, actual: null, reason: 'state-dependent-absent' };
+    exactValue: (el, attr, val) => {
+        const actual = el.getAttribute(attr);
+        return { matched: actual === val, actual, expected: val };
+    },
+
+    presence: (el, attr) => {
+        const actual = el.getAttribute(attr);
+        return { matched: actual !== null, actual, expected: 'present' };
     }
+};
+
+// ── Classifier ──────────────────────────────────────────────────────
+// Maps an attribute spec string + element context to a strategy key + parsed parts.
+
+function classifyAttr(attrSpec, el) {
+    if (attrSpec === 'label for') { return { type: 'labelFor' }; }
+    if (attrSpec.startsWith('nodeName=')) { return { type: 'nodeName', val: attrSpec.split('=')[1] }; }
 
-    const matched = val ? actual === val : actual !== null;
-    return { matched, actual, expected: val || 'present' };
+    const m = attrSpec.match(/^(\S+?)(?:=(.+))?$/);
+    if (!m) { return null; }
+
+    const attr = m[1];
+    const val = m[2]?.replace(/^["']|["']$/g, '');
+
+    if (BOOLEAN_ATTRS.includes(attr)) { return { type: 'boolean', attr }; }
+    if (ID_REFERENCE_ATTRS.includes(attr) && val && (val.includes(' id') || val.startsWith('.k-'))) { return { type: 'idReference', attr, val }; }
+    if (attr === 'role' && val) { return { type: 'role', attr, val }; }
+    if (attr === 'tabindex' && val === '0' && NATIVE_FOCUSABLE.includes(el.nodeName)) { return { type: 'nativeFocusable', attr, val }; }
+    if (val && (val.includes('/') || val.includes('|'))) { return { type: 'multiValue', attr, val }; }
+    if (val && val.includes('${')) { return { type: 'templatePattern', attr, val }; }
+    if (!val && STATE_DEPENDENT_ATTRS.includes(attr) && el.getAttribute(attr) === null) { return { type: 'stateDependentAbsent', attr }; }
+    if (val) { return { type: 'exactValue', attr, val }; }
+    return { type: 'presence', attr };
+}
+
+// ── Single attribute check (delegates to strategy) ──────────────────
+
+function checkSingleAttr(el, attrSpec, document) {
+    const classified = classifyAttr(attrSpec, el);
+    if (!classified) { return { matched: false }; }
+    const { type, attr, val } = classified;
+    return attrValidators[type](el, attr, val, document);
 }
 
 function checkAttributeRule(el, attribute, document) {