index.js

export default async function reflowScan({ page, addFinding, url } = {}) {
  console.log('reflow plugin');
  const originalViewport = page.viewportSize()
  // Check for horizontal scrolling at 320x256 viewport
  try {
    await page.setViewportSize({width: 320, height: 256})
    const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth)
    const clientWidth = await page.evaluate(() => document.documentElement.clientWidth)

    // If horizontal scroll is required (with 1px tolerance for rounding)
    if (scrollWidth > clientWidth + 1) {
      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 320x256 viewport, requiring horizontal scrolling. This violates WCAG 2.1 Level AA Success Criterion 1.4.10 (Reflow).`,
      })
    }
  } catch (e) {
    console.error('Error checking horizontal scroll:', e)
  } finally {
    // Restore original viewport so subsequent scans (e.g. Axe) aren't affected
    if (originalViewport) {
      await page.setViewportSize(originalViewport)
    }
  }
}

export const name = 'reflow-scan';