feat(a11y): add ARIA attributes, live regions, and automated accessibility testing#23049
Draft
feat(a11y): add ARIA attributes, live regions, and automated accessibility testing#23049
Conversation
- 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>
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>
|
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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
aria-expandedstate to sidebar collapsible buttons,aria-labelto the notifications region, and replaces anchor-based buttons with semantic<button>elements in the bulk editor.aria-live,@wordpress/a11yspeak()) so screen readers announce analysis score updates dynamically.jest-axeforSidebarCollapsible,AnalysisChecklist, andContentAnalysiscomponents.Relevant technical choices:
@wordpress/a11yspeak()is used inResults.jsinstead of a custom live region, to align with the WordPress accessibility API.jest-axewas added as a rootdevDependencysince 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:
aria-expanded="true"/"false".<button>elements, not<a>links.aria-label="Notifications".yarn test— all new and existing tests should pass.Relevant test scenarios
Test instructions for QA when the code is in the RC
Impact check
This PR affects the following parts of the plugin, which may require extra testing:
ContentAnalysis,Results)Other environments
Documentation
Quality assurance
grunt build:imagesand commited the results, if my PR introduces new images or SVGs.Innovation
innovationlabel.