diff --git a/.github/scanner-plugins/reflow-scan/index.ts b/.github/scanner-plugins/reflow-scan/index.ts index fa4fa5d1..7f6a5e31 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 WCAG Success Criterion 1.4.10 (Reflow).`, }) } } catch (e) { diff --git a/tests/site-with-errors.test.ts b/tests/site-with-errors.test.ts index 06ba78da..8c7981bd 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))