Skip to content

feat(a11y): add ARIA attributes, live regions, and automated accessibility testing#23049

Draft
pls78 wants to merge 4 commits intotrunkfrom
ai-hackaton/accessibility-assessment
Draft

feat(a11y): add ARIA attributes, live regions, and automated accessibility testing#23049
pls78 wants to merge 4 commits intotrunkfrom
ai-hackaton/accessibility-assessment

Conversation

@pls78
Copy link
Copy Markdown
Member

@pls78 pls78 commented Mar 5, 2026

Context

Improves accessibility for screen reader users across analysis components, sidebar collapsibles, bulk editor actions, and notifications.

Summary

This PR can be summarized in the following changelog entries:

  • Adds aria-expanded state to sidebar collapsible buttons, aria-label to the notifications region, and replaces anchor-based buttons with semantic <button> elements in the bulk editor.
  • Adds live region announcements (aria-live, @wordpress/a11y speak()) so screen readers announce analysis score updates dynamically.
  • Adds automated accessibility testing with jest-axe for SidebarCollapsible, AnalysisChecklist, and ContentAnalysis components.

Relevant technical choices:

  • @wordpress/a11y speak() is used in Results.js instead of a custom live region, to align with the WordPress accessibility API.
  • jest-axe was added as a root devDependency since it is used across multiple packages.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

  1. Open any post in the block editor with Yoast SEO active.
  2. Open the Yoast SEO sidebar panel.
  3. Inspect the sidebar collapsible buttons — they should have aria-expanded="true"/"false".
  4. Run a screen reader (e.g. VoiceOver): changing post content should trigger spoken announcements of analysis results (e.g. "2 problems, 1 improvements, 3 good results").
  5. Navigate to SEO > Bulk Editor — "Save" and "Save all" should render as <button> elements, not <a> links.
  6. Check the notifications aside has aria-label="Notifications".
  7. Run yarn test — all new and existing tests should pass.

Relevant test scenarios

  • Changes should be tested with the browser console open (check for React warnings)
  • Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
  • Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
  • Changes should be tested on different browsers (screen reader behavior varies)
  • Changes should be tested on multisite

Test instructions for QA when the code is in the RC

  • QA should use the same steps as above.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

  • Analysis report components (ContentAnalysis, Results)
  • Sidebar collapsible component
  • Bulk editor list table
  • UI library notifications component

Other environments

  • This PR also affects Shopify.
  • This PR also affects Yoast SEO for Google Docs.

Documentation

  • I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

  • I have tested this code to the best of my abilities.
  • During testing, I had activated all plugins that Yoast SEO provides integrations for.
  • I have added unit tests to verify the code works as intended.
  • If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
  • I have written this PR in accordance with my team's definition of done.
  • I have checked that the base branch is correctly set.
  • I have run grunt build:images and commited the results, if my PR introduces new images or SVGs.

Innovation

  • No innovation project is applicable for this PR.
  • This PR falls under an innovation project. I have attached the innovation label.
  • I have added my hours to the WBSO document.

pls78 and others added 3 commits March 5, 2026 12:33
- Add aria-expanded to SidebarCollapsible button to announce open/closed state
- Replace <a role="button"> with semantic <button> in bulk editor list table
- Add aria-label to Notifications <aside> for screen reader identification
- Add aria-expanded test assertions to SidebarCollapsibleTest

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add aria-live="polite" wrapper to AnalysisChecklist for score updates
- Use @wordpress/a11y speak() in Results to announce analysis summary on change
- Add aria-live="polite" to ContentAnalysis container for collapsible sections

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add jest-axe as root devDependency
- Create shared axe test utility (packages/js/tests/a11y-test-utils.js)
- Add axe tests to SidebarCollapsible, AnalysisChecklist, and ContentAnalysis
- No ESLint or CI config changes needed (runs as part of existing yarn test)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@pls78 pls78 added the changelog: enhancement Needs to be included in the 'Enhancements' category in the changelog label Mar 5, 2026
@pls78 pls78 changed the title Ai hackaton/accessibility assessment feat(a11y): add ARIA attributes, live regions, and automated accessibility testing Mar 5, 2026
The yarn.lock had a corrupted abbrev entry (merged with array-flatten
and resolving to the wrong tarball), causing `Cannot find module
'abbrev'` errors in CI. Also added jest-axe and @testing-library/react
to sub-package devDependencies to fix import/no-extraneous-dependencies
lint errors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

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

Labels

changelog: enhancement Needs to be included in the 'Enhancements' category in the changelog merge conflict

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant