feat: add tests for the a11y-debugging skill and update its JavaScript snippets to be IIFEs with console logging for manual usage.

Author: natorion

skills/a11y-debugging/SKILL.md

@@ -35,25 +35,29 @@ 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 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,
-        }));
-    };
+    (() => {
+      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;
+    })()
     ```
 4.  Check images for `alt` text.
 
@@ -71,6 +75,7 @@ Testing "keyboard traps" and proper focus management without visual feedback rel
 According to web.dev, tap targets should be at least 48x48 pixels with sufficient spacing. Since the accessibility tree doesn't show sizes, use `evaluate_script`:
 
 ```javascript
+// Usage in console: copy, paste, and call with element: fn(element)
 el => {
   const rect = el.getBoundingClientRect();
   return {width: rect.width, height: rect.height};
@@ -91,6 +96,7 @@ 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+)/);
@@ -130,20 +136,24 @@ _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
-() => {
-  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',
+(() => {
+  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',
+    };
   };
-};
+  try { console.log(f()); } catch(e) {} // Log for manual console usage
+  return f;
+})()
 ```
 
 ## Troubleshooting

tests/skills/a11y_debugging.test.ts

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import assert from 'node:assert';
+import {describe, it} from 'node:test';
+import fs from 'node:fs';
+import path from 'node:path';
+
+import {evaluateScript} from '../../src/tools/script.js';
+import {withMcpContext} from '../utils.js';
+
+describe('a11y-debugging', () => {
+  const skillPath = path.join(
+    process.cwd(),
+    'skills',
+    'a11y-debugging',
+    'SKILL.md',
+  );
+  const skillContent = fs.readFileSync(skillPath, 'utf8');
+
+  // Extract snippets
+  // We assume snippets are in ```javascript ... ``` blocks.
+  const snippets: string[] = [];
+  const regex = /```javascript([\s\S]*?)```/g;
+  let match;
+  while ((match = regex.exec(skillContent)) !== null) {
+    snippets.push(match[1].trim());
+  }
+
+  it('snippets should be valid javascript', () => {
+    assert.ok(snippets.length > 0, 'Should find snippets in SKILL.md');
+  });
+
+  it('0-arg snippets (IIFEs) should execute with evaluate_script', async () => {
+    // The 1st snippet (orphaned inputs) and 4th snippet (global checks) are IIFEs returning a function.
+    // 2nd and 3rd are arg-taking functions (not IIFEs).
+    const orphanInputsSnippet = snippets[0];
+    const globalPageChecksSnippet = snippets[3];
+
+    assert.ok(orphanInputsSnippet, 'Orphaned inputs snippet not found');
+    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>');
+
+        // 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);
+    });
+  });
+});