[WIP] Fix modal close button accessibility issues#2827
Merged
Soare-Robert-Daniel merged 4 commits intoJun 23, 2026
Conversation
Co-authored-by: Soare-Robert-Daniel <17597852+Soare-Robert-Daniel@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR improves accessibility for Modal/Popup close buttons by adding accessible labels in editor and frontend/server-rendered markup.
Changes:
- Adds labels/tooltips to editor close buttons for free Popup and Pro Modal blocks.
- Adds
aria-label,title, and screen-reader text to frontend close button markup. - Adds an E2E test asserting the frontend close button has an
aria-label.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
src/pro/blocks/modal/edit.js |
Adds an accessible label and tooltip to the Pro Modal editor close button. |
src/blocks/test/e2e/blocks/modal.spec.js |
Adds coverage for close button aria-label and close behavior. |
src/blocks/blocks/popup/save.js |
Updates saved Popup close button markup with accessible labeling. |
src/blocks/blocks/popup/edit.js |
Adds an accessible label and tooltip to the Popup editor close button. |
plugins/otter-pro/inc/render/class-modal-block.php |
Adds accessible labeling to the server-rendered Pro Modal close button. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+41
to
+48
| <button | ||
| type="button" | ||
| className="components-button has-icon" | ||
| aria-label={ __( 'Close', 'otter-blocks' ) } | ||
| title={ __( 'Close', 'otter-blocks' ) } | ||
| > | ||
| <span className="screen-reader-text">{ __( 'Close', 'otter-blocks' ) }</span> | ||
| <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg> |
Contributor
Bundle Size Diff
|
Contributor
|
Plugin build for e78a8cb is ready 🛎️!
|
Contributor
E2E TestsPlaywright Test Status: See serial and parallel matrix jobs Performance ResultsserverResponse: {"q25":479.1,"q50":511.05,"q75":520.2,"cnt":10}, firstPaint: {"q25":598.6,"q50":626.25,"q75":684.6,"cnt":10}, domContentLoaded: {"q25":3503.1,"q50":3554.3,"q75":3566.5,"cnt":10}, loaded: {"q25":3505.2,"q50":3556.25,"q75":3568.5,"cnt":10}, firstContentfulPaint: {"q25":4065.7,"q50":4129.6,"q75":4140.6,"cnt":10}, firstBlock: {"q25":14190.6,"q50":14302.9,"q75":14498.8,"cnt":10}, type: {"q25":23.77,"q50":24.37,"q75":25.2,"cnt":10}, typeWithoutInspector: {"q25":19.73,"q50":20.6,"q75":21.89,"cnt":10}, typeWithTopToolbar: {"q25":29.44,"q50":30.46,"q75":33.01,"cnt":10}, typeContainer: {"q25":13.42,"q50":14.41,"q75":15.82,"cnt":10}, focus: {"q25":112.08,"q50":116.4,"q75":119.89,"cnt":10}, inserterOpen: {"q25":37.38,"q50":37.65,"q75":39.55,"cnt":10}, inserterSearch: {"q25":12.34,"q50":12.8,"q75":13.29,"cnt":10}, inserterHover: {"q25":5.15,"q50":5.4,"q75":5.69,"cnt":20}, loadPatterns: {"q25":1580.09,"q50":1595.62,"q75":1701.35,"cnt":10}, listViewOpen: {"q25":219.51,"q50":235.25,"q75":245.72,"cnt":10} |
Strengthen the modal e2e to assert the close button's accessible name (aria-label/title/screen-reader-text, aria-hidden icon) and keyboard operability, and add matching coverage for the popup block. Add a deprecation for the prior `title="Close Button"` popup markup so popups saved before the a11y change keep validating after save.js switched to aria-label + screen-reader-text. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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.
Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.