Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
taarikashenafi merged 3 commits into from
Jun 18, 2026
+12 −10
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ec1334f
Update reflow-scan text to improve clarity and reference WCAG 2.2
taarikashenafi Jun 17, 2026
571b42c
Apply suggestions from code review
taarikashenafi Jun 18, 2026
0aa982f
Fix solutionShort hyphen in test to match plugin
taarikashenafi Jun 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions .github/scanner-plugins/reflow-scan/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Comment thread
JoyceZhu marked this conversation as resolved.
try {
await page.setViewportSize({ width: 320, height: 256 })
await page.setViewportSize({width: 320, height: 256})

@JoyceZhu JoyceZhu Jun 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did Prettier automatically do this?

@taarikashenafi taarikashenafi Jun 18, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, Prettier auto-formatted on save

const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth)
const clientWidth = await page.evaluate(() => document.documentElement.clientWidth)

Expand All @@ -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) {
Expand Down
7 changes: 4 additions & 3 deletions tests/site-with-errors.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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))
Expand Down