Pa11y error thrown on accordions with specific conditions

[chandracarney]

Summary

When accordions have elements that meet these conditions, pa11y and axe throw an error. The specific conditions are:

1. horizontally scrollable container (usually code blocks)
2. vertically scrollable container
3. small viewport
4. no focusable element

However, if a focusable element (like a link) exists, no error is thrown.

We suspect this is a false positive. However, we also discussed that this likely isn't happening on larger viewports because a "copy code block" button is sometimes present, which means that a focusable element is present.

Steps to reproduce

• Navigate to https://designsystem.digital.gov/documentation/migration/
• Narrow the browser viewport size to simulate a mobile experience (typically this will mean your browser viewport can't narrow any further)
• Increase your text size programmatically using command + + (or ctrl + +)
• Expand the first accordion with a heading "If you're using USWDS Gulp"
• Run axe browser extension
• Observe an error thrown for the first accordion element

Next:

• Open your browser's code inspector
• Under the first accordion element (with a heading "If you're using USWDS Gulp"), add an HTML link element
• Run axe browser extension again
• Observe no error

Tasks

• Investigate
• Propose solution, which could include
• ignoring specific pa11y tests upon build
• adding a copy code block button on smaller (mobile) viewports