From ec1334f65cb903713cce9d60ee544a84d1c4a599 Mon Sep 17 00:00:00 2001 From: taarikashenafi Date: Wed, 17 Jun 2026 16:06:34 -0500 Subject: [PATCH 1/3] Update reflow-scan text to improve clarity and reference WCAG 2.2 --- .github/scanner-plugins/reflow-scan/index.ts | 15 ++++++++------- tests/site-with-errors.test.ts | 7 ++++--- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/.github/scanner-plugins/reflow-scan/index.ts b/.github/scanner-plugins/reflow-scan/index.ts index fa4fa5d1..4d158a9f 100644 --- a/.github/scanner-plugins/reflow-scan/index.ts +++ b/.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) { diff --git a/tests/site-with-errors.test.ts b/tests/site-with-errors.test.ts index 06ba78da..ab72feae 100644 --- a/tests/site-with-errors.test.ts +++ b/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)) From 571b42cfae801edc5b9cf6bab75c8090a6e36f23 Mon Sep 17 00:00:00 2001 From: Taarik <147209483+taarikashenafi@users.noreply.github.com> Date: Thu, 18 Jun 2026 16:37:01 -0500 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: Joyce Zhu --- .github/scanner-plugins/reflow-scan/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/scanner-plugins/reflow-scan/index.ts b/.github/scanner-plugins/reflow-scan/index.ts index 4d158a9f..7f6a5e31 100644 --- a/.github/scanner-plugins/reflow-scan/index.ts +++ b/.github/scanner-plugins/reflow-scan/index.ts @@ -15,8 +15,8 @@ export default async function reflowScan({page, addFinding} = {}) { 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.`, + '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 WCAG Success Criterion 1.4.10 (Reflow).`, }) } } catch (e) { From 0aa982f036219533b1595c22047ec34d5f32ecba Mon Sep 17 00:00:00 2001 From: taarikashenafi Date: Thu, 18 Jun 2026 16:54:25 -0500 Subject: [PATCH 3/3] Fix solutionShort hyphen in test to match plugin --- tests/site-with-errors.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/site-with-errors.test.ts b/tests/site-with-errors.test.ts index ab72feae..8c7981bd 100644 --- a/tests/site-with-errors.test.ts +++ b/tests/site-with-errors.test.ts @@ -114,7 +114,7 @@ describe('site-with-errors', () => { url: 'http://127.0.0.1:4000/404.html', 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', + '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: