Adds reflow scan plugin

Author: lindseywild

.github/actions/file/src/generateIssueBody.ts

@@ -26,7 +26,7 @@ export function generateIssueBody(finding: Finding, screenshotRepo: string): str
   `
 
   const body = `## What
-  An accessibility scan flagged the element \`${finding.html}\` on ${finding.url} because ${finding.problemShort}. Learn more about why this was flagged by visiting ${finding.problemUrl}.
+  An accessibility scan ${finding.html ? `flagged the element \`${finding.html}\`` : `found an issue on ${finding.url}`} because ${finding.problemShort}. Learn more about why this was flagged by visiting ${finding.problemUrl}.
 
   ${screenshotSection ?? ''}
   To fix this, ${finding.solutionShort}.

.github/actions/file/src/openIssue.ts

@@ -21,7 +21,10 @@ export async function openIssue(octokit: Octokit, repoWithOwner: string, finding
   const owner = repoWithOwner.split('/')[0]
   const repo = repoWithOwner.split('/')[1]
 
-  const labels = [`${finding.scannerType} rule: ${finding.ruleId}`, `${finding.scannerType}-scanning-issue`]
+  const labels = [
+    `${finding.scannerType}${finding.ruleId ? ` rule: ${finding.ruleId}` : ''}`,
+    `${finding.scannerType}-scanning-issue`,
+  ]
   const title = truncateWithEllipsis(
     `Accessibility issue: ${finding.problemShort[0].toUpperCase() + finding.problemShort.slice(1)} on ${new URL(finding.url).pathname}`,
     GITHUB_ISSUE_TITLE_MAX_LENGTH,

.github/actions/file/src/types.d.ts

@@ -1,8 +1,8 @@
 export type Finding = {
   scannerType: string
-  ruleId: string
+  ruleId?: string
   url: string
-  html: string
+  html?: string
   problemShort: string
   problemUrl: string
   solutionShort: string

.github/actions/file/src/updateFilingsWithNewFindings.ts

@@ -5,7 +5,7 @@ function getFilingKey(filing: ResolvedFiling | RepeatedFiling): string {
 }
 
 function getFindingKey(finding: Finding): string {
-  return `${finding.url};${finding.ruleId};${finding.html}`
+  return `${finding.url};${finding.ruleId ?? ''};${finding.html ?? ''}`
 }
 
 export function updateFilingsWithNewFindings(

.github/actions/file/tests/generateIssueBody.test.ts

@@ -11,6 +11,14 @@ const baseFinding = {
   solutionShort: 'ensure the contrast between foreground and background colors meets WCAG thresholds',
 }
 
+const findingWithEmptyOptionalFields = {
+  scannerType: 'reflow',
+  url: 'https://example.com/page',
+  problemShort: 'elements must meet minimum color contrast ratio thresholds',
+  problemUrl: 'https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=playwright',
+  solutionShort: 'ensure the contrast between foreground and background colors meets WCAG thresholds',
+}
+
 describe('generateIssueBody', () => {
   it('includes acceptance criteria and omits the Specifically section when solutionLong is missing', () => {
     const body = generateIssueBody(baseFinding, 'github/accessibility-scanner')
@@ -61,4 +69,11 @@ describe('generateIssueBody', () => {
     expect(body).not.toContain('View screenshot')
     expect(body).not.toContain('.screenshots')
   })
+
+  it('uses url fallback when html is not present', () => {
+    const body = generateIssueBody(findingWithEmptyOptionalFields, 'github/accessibility-scanner')
+
+    expect(body).toContain(`found an issue on ${findingWithEmptyOptionalFields.url}`)
+    expect(body).not.toContain('flagged the element')
+  })
 })

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

@@ -48,6 +48,7 @@ export async function findForUrl(
             plugin,
             page,
             addFinding,
+            url,
           })
         } else {
           core.info(`Skipping plugin ${plugin.name} because it is not included in the 'scans' input`)

.github/actions/find/src/pluginManager.ts

@@ -13,6 +13,7 @@ const __dirname = path.dirname(__filename)
 type PluginDefaultParams = {
   page: playwright.Page
   addFinding: (findingData: Finding) => void
+  url: string
 }
 
 type Plugin = {
@@ -102,6 +103,6 @@ export async function loadPluginsFromPath({pluginsPath}: {pluginsPath: string})
 type InvokePluginParams = PluginDefaultParams & {
   plugin: Plugin
 }
-export function invokePlugin({plugin, page, addFinding}: InvokePluginParams) {
-  return plugin.default({page, addFinding})
+export function invokePlugin({plugin, page, addFinding, url}: InvokePluginParams) {
+  return plugin.default({page, addFinding, url})
 }

.github/actions/find/src/types.d.ts

@@ -1,7 +1,7 @@
 export type Finding = {
   scannerType: string
   url: string
-  html: string
+  html?: string
   problemShort: string
   problemUrl: string
   solutionShort: string

…hub/scanner-plugins/test-plugin/index.js …hub/scanner-plugins/reflow-scan/index.js.github/scanner-plugins/test-plugin/index.js renamed to .github/scanner-plugins/reflow-scan/index.js .github/scanner-plugins/test-plugin/index.js renamed to .github/scanner-plugins/reflow-scan/index.js

@@ -1,32 +1,25 @@
-export default async function test({ page, addFinding, url } = {}) {
-  console.log('test plugin');
-    // Check for horizontal scrolling at 320x256 viewport
+export default async function reflowScan({ page, addFinding, url } = {}) {
+  console.log('reflow plugin');
+  // Check for horizontal scrolling at 320x256 viewport
   try {
     await page.setViewportSize({ width: 320, height: 256 });
     const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
     const clientWidth = await page.evaluate(() => document.documentElement.clientWidth);
 
     // If horizontal scroll is required (with 1px tolerance for rounding)
     if (scrollWidth > clientWidth + 1) {
-      const htmlSnippet = await page.evaluate(() => {
-        return `<html lang="${document.documentElement.lang || 'en'}">`;
-      });
-
-      addFinding({
-        scannerType: 'viewport',
-        ruleId: 'horizontal-scroll-320x256',
+      await addFinding({
+        scannerType: 'reflow-scan',
         url,
-        html: htmlSnippet.replace(/'/g, "&apos;"),
-        problemShort: 'page requires horizontal scrolling at 320x256 viewport',
+        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',
+        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) {
     console.error('Error checking horizontal scroll:', e);
   }
-
 }
 
-export const name = 'test-plugin';
+export const name = 'reflow-scan';

.github/scanner-plugins/reflow-scan/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "reflow-scan",
+  "version": "1.0.0",
+  "description": "Scans pages at a 320x256 viewport size to identify potential reflow issues, such as horizontal scrolling and content overflow.",
+  "type": "module"
+}