Fix duplicate HTML IDs and missing form labels in modal blocks #2083
Conversation
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
Resolves accessibility issues in remote-reply and follow-me blocks by: - Using unique IDs with wp_unique_id() to prevent duplicate HTML IDs - Adding proper form labels with screen-reader-text class - Fixing aria-controls to reference actual modal title elements Fixes invalid HTML validation errors and WebAIM accessibility violations.
github-actions
bot
added
[Block] Follow Me
[Block] Remote Reply
There was a problem hiding this comment.
Pull Request Overview
This PR fixes accessibility and HTML validation issues in modal blocks by implementing unique IDs and proper form labels. It addresses duplicate HTML ID problems that could occur when multiple instances of remote-reply or follow-me blocks exist on the same page.
- Uses unique block IDs to prevent duplicate HTML element IDs across multiple block instances
- Adds proper form labels with screen-reader-text class for better accessibility
- Updates aria-controls references to point to the correct modal title elements
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/remote-reply/render.php | Updates input IDs to use block-specific prefixes and adds form labels |
| src/follow-me/render.php | Updates input IDs to use block-specific prefixes and adds form labels |
| includes/class-blocks.php | Adds modal ID parameter and generates unique title element IDs |
| build/remote-reply/render.php | Compiled version with same changes as src plus early return guard |
| build/follow-me/render.php | Compiled version with same changes as src |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Added explicit import of the is_activitypub_request function in both build and src versions of remote-reply/render.php to ensure proper function resolution.
Added an empty href attribute to the remote profile anchor tag in render.php to ensure valid HTML structure and improve accessibility. The actual URL is still dynamically bound via data-wp-bind--href.
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.
See #2069
Proposed changes:
Other information:
Testing instructions:
Before: HTML validation errors for duplicate IDs (profile-handle, remote-profile) and missing form labels
After: Clean HTML validation and proper accessibility labels
Changelog entry
Changelog Entry Details
Significance
Type
Message
Fix duplicate HTML IDs and missing form labels in modal blocks