Lw/adds horizontal scroll test

.github/actions/find/src/findForUrl.ts

@@ -12,21 +12,51 @@ export async function findForUrl(url: string, authContext?: AuthContext): Promis
   console.log(`Scanning ${page.url()}`);
 
   let findings: Finding[] = [];
+  // try {
+  //   const rawFindings = await new AxeBuilder({ page }).analyze();
+  //   findings = rawFindings.violations.map(violation => ({
+  //     scannerType: 'axe',
+  //     url,
+  //     html: violation.nodes[0].html.replace(/'/g, "'"),
+  //     problemShort: violation.help.toLowerCase().replace(/'/g, "'"),
+  //     problemUrl: violation.helpUrl.replace(/'/g, "'"),
+  //     ruleId: violation.id,
+  //     solutionShort: violation.description.toLowerCase().replace(/'/g, "'"),
+  //     solutionLong: violation.nodes[0].failureSummary?.replace(/'/g, "'")
+  //   }));
+  // } catch (e) {
+  //   console.error('Error during axe accessibility scan:', e);
+  // }
+
+  // Check for horizontal scrolling at 320x256 viewport
   try {
-    const rawFindings = await new AxeBuilder({ page }).analyze();
-    findings = rawFindings.violations.map(violation => ({
-      scannerType: 'axe',
-      url,
-      html: violation.nodes[0].html.replace(/'/g, "'"),
-      problemShort: violation.help.toLowerCase().replace(/'/g, "'"),
-      problemUrl: violation.helpUrl.replace(/'/g, "'"),
-      ruleId: violation.id,
-      solutionShort: violation.description.toLowerCase().replace(/'/g, "'"),
-      solutionLong: violation.nodes[0].failureSummary?.replace(/'/g, "'")
-    }));
+    // Wait for page to be fully loaded and stable before checking viewport
+    await page.waitForLoadState('domcontentloaded');
+    await page.setViewportSize({ width: 320, height: 256 });
+    console.log('scanning page')
+    const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
+    const clientWidth = await page.evaluate(() => document.documentElement.clientWidth);
+    console.log('widths', scrollWidth, clientWidth)
+
+    // Match local test: check without tolerance (don't allow any horizontal scroll)
+    if (scrollWidth > clientWidth) {
+      console.log('page is too wide!')
+
+      findings.push({
+        scannerType: 'viewport',
+        ruleId: 'horizontal-scroll',
+        url,
+        html: 'n/a',
+        problemShort: 'page requires horizontal scrolling at 320x256 viewport',
+        problemUrl: 'https://www.w3.org/WAI/WCAG21/Understanding/reflow.html',
+        solutionShort: 'ensure content is responsive and does not require horizontal scrolling at small viewport sizes',
+        solutionLong: `The page has a scroll width of ${scrollWidth}px but a client width of only ${clientWidth}px at 320x256 viewport, requiring horizontal scrolling. This violates WCAG 2.1 Level AA Success Criterion 1.4.10 (Reflow).`
+      });
+    }
   } catch (e) {
-    // do something with the error
+    console.error('Error checking horizontal scroll:', e);
   }
+
   await context.close();
   await browser.close();
   return findings;

.github/workflows/a11y-scan.yml

@@ -0,0 +1,22 @@
+name: Accessibility Scanner
+on: workflow_dispatch
+
+jobs:
+  accessibility_scanner:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: github/accessibility-scanner@v2
+        with:
+          urls: |
+            https://github.com
+            https://primer.style
+            https://primer.style/product/getting-started/foundations/layout/ # requires horizontal scrolling
+            https://primer.style/brand/primitives/color/ # Hex color cut off
+            https://primer.style/react/storybook/?path=/story/components-banner-features--actions-layout-inline # Buttons are overlapping
+            https://support.github.com/request/landing # 2d scroll
+            https://innovationgraph.github.com/ # Content disappears on mobile
+            https://github.com/partners/service-channel-partners # 2d scroll at 200%
+          repository: lindseywild/accessibility-scanner
+          token: ${{ secrets.GH_TOKEN }}
+          cache_key: cached_results-lindseywild-scanner-main.json
+          skip_copilot_assignment: true