Update reflow-scan text to improve clarity and reference WCAG 2.2

Author: taarikashenafi

.github/scanner-plugins/reflow-scan/index.ts

@@ -1,9 +1,9 @@
-export default async function reflowScan({ page, addFinding } = {}) {
+export default async function reflowScan({page, addFinding} = {}) {
   const originalViewport = page.viewportSize()
   const url = page.url()
-  // Check for horizontal scrolling at 320x256 viewport
+  // Check for horizontal scrolling at 320 viewport
   try {
-    await page.setViewportSize({ width: 320, height: 256 })
+    await page.setViewportSize({width: 320, height: 256})
     const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth)
     const clientWidth = await page.evaluate(() => document.documentElement.clientWidth)
 
@@ -12,10 +12,11 @@ export default async function reflowScan({ page, addFinding } = {}) {
       await addFinding({
         scannerType: 'reflow-scan',
         url,
-        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 a 320x256 viewport, requiring horizontal scrolling. This violates WCAG 2.1 Level AA Success Criterion 1.4.10 (Reflow).`,
+        problemShort: 'needs review: page presents a horizontal scrollbar at a 320px wide viewport',
+        problemUrl: 'https://www.w3.org/WAI/WCAG22/Understanding/reflow.html',
+        solutionShort:
+          'verify if sections of content can be viewed within the 320px wide viewport without needing to scroll in two-dimensions to read the content of an individual section',
+        solutionLong: `The page has a scroll width of ${scrollWidth}px but a client width of only ${clientWidth}px at a 320px wide viewport, resulting in a horizontal scrollbar. Ensure that multi-line text does not require scrolling in two-dimensions to read, as this would be a violation of the WCAG 1.4.10 Reflow Success Criterion.`,
       })
     }
   } catch (e) {

tests/site-with-errors.test.ts

@@ -112,8 +112,9 @@ describe('site-with-errors', () => {
       {
         scannerType: 'reflow-scan',
         url: 'http://127.0.0.1:4000/404.html',
-        problemShort: 'page requires horizontal scrolling at 320x256 viewport',
-        solutionShort: 'ensure content is responsive and does not require horizontal scrolling at small viewport sizes',
+        problemShort: 'needs review: page presents a horizontal scrollbar at a 320px wide viewport',
+        solutionShort:
+          'verify if sections of content can be viewed within the 320px wide viewport without needing to scroll in two-dimensions to read the content of an individual section',
       },
     ]
     // Check that:
@@ -161,7 +162,7 @@ describe('site-with-errors', () => {
         'Accessibility issue: Headings should not be empty on /404.html',
         'Accessibility issue: Elements must meet minimum color contrast ratio thresholds on /about/',
         'Accessibility issue: Elements must meet minimum color contrast ratio thresholds on /jekyll/update/2025/07/30/welcome-to-jekyll.html',
-        'Accessibility issue: Page requires horizontal scrolling at 320x256 viewport on /404.html',
+        'Accessibility issue: Needs review: page presents a horizontal scrollbar at a 320px wide viewport on /404.html',
       ]
       expect(actualTitles).toHaveLength(expectedTitles.length)
       expect(actualTitles).toEqual(expect.arrayContaining(expectedTitles))