Skip to content

feat(a11y): playwright, axe, actions, fixtures, tests - #55

Draft
marissahuysentruyt wants to merge 12 commits into
mainfrom
a11y-testing
Draft

feat(a11y): playwright, axe, actions, fixtures, tests#55
marissahuysentruyt wants to merge 12 commits into
mainfrom
a11y-testing

Conversation

@marissahuysentruyt

@marissahuysentruyt marissahuysentruyt commented Jun 10, 2026

Copy link
Copy Markdown
Collaborator

Description

Screenshots (if applicable)

Type of change

  • Bug fix
  • New feature / block
  • Refactor
  • Docs / content
  • Chore (deps, config, tooling)

Related issue(s)

  • fixes [Issue Number]

Validation steps

  • This PR has visual elements, so it was reviewed by a designer.
  • This PR has code changes, and our linters still pass.
  • This PR affects production code, so it was browser tested (see below).
  • This PR affects existing pages, so automated E2E tests were run (see below).
  • This PR has new code, so new tests were added or updated, and they pass.
  • This PR has copy changes, so copy was proofread and approved.
  • The content of this PR requires documentation, so a detailed description of the component's purpose, requirements, quirks, and instructions for use by designers and developers was added, along with accessibility information if pertinent.

To Validate

URL for testing:
https://a11y-testing--spectrum-hub--adobe.aem.page/

  • Make sure all PR Checks have passed
  • Pull down the branch locally or visit the branch preview
  • Run npm test and confirm all tests pass
  • Run npm run lint and confirm no linting errors
  • Verified in browser with aem up

Accessibility testing checklist

  • Keyboard
  1. Go here
  2. Do this action
  3. Expect this result
  • Screen reader
  1. Go here
  2. Do this action
  3. Expect this result

Device review

  • Did it pass in Desktop?
  • Did it pass in (emulated) Mobile?
  • Did it pass in (emulated) iPad?

Checklist:

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@marissahuysentruyt marissahuysentruyt added 🚧 WIP Work in progress, don't judge ♿️ A11y Accessibility improvements for screen readers, VoiceOver, keyboard functionality labels Jun 10, 2026
@aem-code-sync

aem-code-sync Bot commented Jun 10, 2026

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run all PSI checks
  • Re-run failed PSI checks
  • Re-sync branch
Commits

Comment on lines +20 to +21
with:
node-version: 20

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

Suggested change
with:
node-version: 20
with:
node-version: 24

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

node 20 actions are deprecated so all of the workflows might need updating.

@aem-code-sync

aem-code-sync Bot commented Aug 7, 2026

Copy link
Copy Markdown
Page Scores Audits Google
📱 / PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
🖥️ / PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

marissahuysentruyt and others added 2 commits August 13, 2026 15:33
Adds a toMatchAriaSnapshot() test per block, alongside the existing axe
scans, to catch semantic regressions (a heading demoted, a landmark
losing its name, a role getting clobbered) that axe's rule-based scan
won't flag on its own. Gated to a single chromium run per block via
testInfo.project.name, since Mobile Chrome also runs on the Chromium
engine and would otherwise duplicate the check.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds a parallel test/a11y/custom-components/ suite (one fixture + spec
per element, mirroring the block convention) for the 8 shared se-*
components, since relying on incidental coverage from whichever block
happens to use a component misses states like disabled/error/checked
and, for se-checkbox and se-segmentedcontrol, missed the element
entirely. Extends coverage.spec.js to parse customElements.define()
calls out of se.js so a newly added element can't ship untested.

Surfaced several real, pre-existing bugs (left failing and documented,
consistent with how other known a11y issues are tracked in this
suite): se-checkbox's touch target is below the WCAG 2.2 AA minimum,
dark mode is broken for every form element except se-button, se-textarea
has no accessible label at all, and se-dialog's buttons render with
insufficient contrast.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Comment thread package.json
"eslint-plugin-chai-friendly": "^1.1.0",
"eslint-plugin-import": "^2.32.0",
"globals": "^17.0.0",
"serve": "^14.2.6",

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

we can remove this now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

♿️ A11y Accessibility improvements for screen readers, VoiceOver, keyboard functionality 🚧 WIP Work in progress, don't judge

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant