Update reflow-scan text to improve clarity and reference WCAG 2.2#231
Update reflow-scan text to improve clarity and reference WCAG 2.2#231taarikashenafi wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the reflow-scan plugin’s user-facing copy (and related test expectations) to better describe the reflow finding and to reference WCAG 2.2.
Changes:
- Revised
problemShort,solutionShort, andsolutionLongtext for reflow findings to be clearer and more action-oriented. - Updated the WCAG “Understanding Reflow” link from WCAG 2.1 to WCAG 2.2.
- Updated test expectations to match the new strings.
Show a summary per file
| File | Description |
|---|---|
.github/scanner-plugins/reflow-scan/index.ts |
Updates reflow-scan finding copy and WCAG reference URL. |
tests/site-with-errors.test.ts |
Updates expected strings/titles to match the revised reflow-scan copy. |
Copilot's findings
Tip
Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Files reviewed: 2/2 changed files
- Comments generated: 2
| 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.`, |
There was a problem hiding this comment.
Slightly different suggestion than the bot:
| 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.`, | |
| 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).`, |
| // Check for horizontal scrolling at 320 viewport | ||
| try { | ||
| await page.setViewportSize({ width: 320, height: 256 }) | ||
| await page.setViewportSize({width: 320, height: 256}) |
There was a problem hiding this comment.
did Prettier automatically do this?
|
Let's also bump the patch version up here since we've changed the plugin copy a decent amount. (Whenever we add support for marking filings as Best Practices/Needs Human Review, we can upgrade the minor version) |
| 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', |
There was a problem hiding this comment.
| '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', |
|
suggested a couple wording/typo adjustments from the original request. |
Closes #230
Updates the reflow-scan plugin text to improve clarity:
problemShortto better describe the issueproblemUrlto reference WCAG 2.2 instead of 2.1solutionShortto use more descriptive guidancesolutionLongwith clearer violation explanation