refactor: Simplify JavaScript snippets in a11y-debugging documentation and add debugging logs to a11y tests.

Author: natorion

skills/a11y-debugging/SKILL.md

@@ -35,30 +35,27 @@ The accessibility tree exposes the heading hierarchy and semantic landmarks.
 2.  Ensure interactive elements have an accessible name (e.g., a button should not just say `""` if it only contains an icon).
 3.  **Orphaned Inputs**: Verify that all form inputs have associated labels. Use `evaluate_script` to check for inputs missing `id` (for `label[for]`) or `aria-label`:
     ```javascript
-    (() => {
-      const f = () => {
-        const inputs = Array.from(
-          document.querySelectorAll('input, select, textarea'),
-        );
-        return inputs
-          .filter(i => {
-            const hasId = i.id && document.querySelector(`label[for="${i.id}"]`);
-            const hasAria =
-              i.getAttribute('aria-label') || i.getAttribute('aria-labelledby');
-            const hasImplicitLabel = i.closest('label');
-            return !hasId && !hasAria && !hasImplicitLabel;
-          })
-          .map(i => ({
-            tag: i.tagName,
-            id: i.id,
-            name: i.name,
-            placeholder: i.placeholder,
-          }));
-      };
-      try { console.log(f()); } catch(e) {} // Log for manual console usage
-      return f;
-    })()
-    ```
+    () => {
+  const inputs = Array.from(
+    document.querySelectorAll('input, select, textarea'),
+  );
+  return inputs
+    .filter(i => {
+      const hasId = i.id && document.querySelector(`label[for="${i.id}"]`);
+    const hasAria =
+    i.getAttribute('aria-label') || i.getAttribute('aria-labelledby');
+    const hasImplicitLabel = i.closest('label');
+    return !hasId && !hasAria && !hasImplicitLabel;
+    })
+    .map(i => ({
+    tag: i.tagName,
+    id: i.id,
+    name: i.name,
+    placeholder: i.placeholder,
+    }));
+    }
+ ```
+
 4.  Check images for `alt` text.
 
 ### 4. Focus & Keyboard Navigation
@@ -96,7 +93,6 @@ If native audits do not report issues (which may happen in some headless environ
 **Note**: This script uses a simplified algorithm and may not account for transparency, gradients, or background images. For production-grade auditing, consider injecting `axe-core`.
 
 ```javascript
-// Usage in console: copy, paste, and call with element: fn(element)
 el => {
   function getRGB(colorStr) {
     const match = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
@@ -136,24 +132,21 @@ _Pass the element's `uid` to test the contrast against WCAG AA (4.5:1 for normal
 Verify document-level accessibility settings often missed in component testing:
 
 ```javascript
-(() => {
-  const f = () => {
-    return {
-      lang:
-        document.documentElement.lang ||
-        'MISSING - Screen readers need this for pronunciation',
-      title: document.title || 'MISSING - Required for context',
-      viewport:
-        document.querySelector('meta[name="viewport"]')?.content ||
-        'MISSING - Check for user-scalable=no (bad practice)',
-      reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches
-        ? 'Enabled'
-        : 'Disabled',
-    };
+() => {
+  return {
+    lang:
+      document.documentElement.lang ||
+      'MISSING - Screen readers need this for pronunciation',
+    title: document.title || 'MISSING - Required for context',
+    viewport:
+      document.querySelector('meta[name="viewport"]')?.content ||
+      'MISSING - Check for user-scalable=no (bad practice)',
+    reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)')
+      .matches
+      ? 'Enabled'
+      : 'Disabled',
   };
-  try { console.log(f()); } catch(e) {} // Log for manual console usage
-  return f;
-})()
+};
 ```
 
 ## Troubleshooting

tests/skills/a11y_debugging.test.ts

@@ -5,9 +5,9 @@
  */
 
 import assert from 'node:assert';
-import {describe, it} from 'node:test';
 import fs from 'node:fs';
 import path from 'node:path';
+import { describe, it } from 'node:test';
 
 import {evaluateScript} from '../../src/tools/script.js';
 import {withMcpContext} from '../utils.js';
@@ -44,32 +44,35 @@ describe('a11y-debugging', () => {
     assert.ok(globalPageChecksSnippet, 'Global page checks snippet not found');
 
     await withMcpContext(async (response, context) => {
-        const page = context.getSelectedPage();
-        await page.setContent('<input id="foo"><label for="foo">Foo</label>');
+      const page = context.getSelectedPage();
+      await page.setContent('<input id="foo"><label for="foo">Foo</label>');
 
-        // Test Orphaned Inputs Snippet
-        await evaluateScript.handler(
-            {params: {function: orphanInputsSnippet}},
-            response,
-            context
-        );
-        let lineEvaluation = response.responseLines.at(2)!;
-        let result = JSON.parse(lineEvaluation);
-        // Expect empty array because we have a valid label
-        assert.deepStrictEqual(result, []);
+      // Test Orphaned Inputs Snippet
+      await evaluateScript.handler(
+        { params: { function: orphanInputsSnippet } },
+        response,
+        context,
+      );
+      let lineEvaluation = response.responseLines.at(2)!;
+      let result = JSON.parse(lineEvaluation);
+      // Expect empty array because we have a valid label
+      assert.deepStrictEqual(result, []);
 
-        // Test Global Page Checks Snippet
-        response.resetResponseLineForTesting();
-        await evaluateScript.handler(
-            {params: {function: globalPageChecksSnippet}},
-            response,
-            context
-        );
-        lineEvaluation = response.responseLines.at(2)!;
-        result = JSON.parse(lineEvaluation);
-        // We expect some result, just check keys
-        assert.ok('lang' in result);
-        assert.ok('title' in result);
+      // Test Global Page Checks Snippet
+      response.resetResponseLineForTesting();
+      await evaluateScript.handler(
+        { params: { function: globalPageChecksSnippet } },
+        response,
+        context,
+      );
+      console.log('Global Page Checks Snippet:', globalPageChecksSnippet);
+      const output = response.toString();
+      console.log('Response Output:', output);
+      lineEvaluation = response.responseLines.at(2)!;
+      result = JSON.parse(lineEvaluation);
+      // We expect some result, just check keys
+      assert.ok('lang' in result);
+      assert.ok('title' in result);
     });
   });
 });