Skip to content

Fix duplicate HTML IDs and missing form labels in modal blocks #2083

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: trunk
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .github/changelog/2083-from-description
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fixed

Fix duplicate HTML IDs and missing form labels in modal blocks
14 changes: 11 additions & 3 deletions build/follow-me/render.php
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
use Activitypub\Blocks;
use Activitypub\Collection\Actors;
use Activitypub\Collection\Followers;

use function Activitypub\is_activitypub_request;

if ( is_activitypub_request() || is_feed() ) {
Expand Down Expand Up @@ -96,7 +97,7 @@
'data-wp-bind--aria-expanded' => 'context.modal.isOpen',
'aria-label' => __( 'Follow me on the Fediverse', 'activitypub' ),
'aria-haspopup' => 'dialog',
'aria-controls' => 'modal-heading',
'aria-controls' => $block_id . '-modal-title',
'role' => 'button',
'tabindex' => '0',
)
Expand All @@ -118,9 +119,12 @@
<?php esc_html_e( 'Copy and paste my profile into the search field of your favorite fediverse app or server.', 'activitypub' ); ?>
</div>
<div class="activitypub-dialog__button-group">
<label for="<?php echo esc_attr( $block_id . '-profile-handle' ); ?>" class="screen-reader-text">
<?php esc_html_e( 'My Fediverse handle', 'activitypub' ); ?>
</label>
<input
aria-readonly="true"
id="profile-handle"
id="<?php echo esc_attr( $block_id . '-profile-handle' ); ?>"
readonly
tabindex="-1"
type="text"
Expand All @@ -142,12 +146,15 @@ class="wp-element-button wp-block-button__link"
<?php esc_html_e( 'Or, if you know your own profile, we can start things that way!', 'activitypub' ); ?>
</div>
<div class="activitypub-dialog__button-group">
<label for="<?php echo esc_attr( $block_id . '-remote-profile' ); ?>" class="screen-reader-text">
<?php esc_html_e( 'Your Fediverse profile', 'activitypub' ); ?>
</label>
<input
data-wp-bind--aria-invalid="context.isError"
data-wp-bind--value="context.remoteProfile"
data-wp-on--input="actions.updateRemoteProfile"
data-wp-on--keydown="actions.handleKeyDown"
id="remote-profile"
id="<?php echo esc_attr( $block_id . '-remote-profile' ); ?>"
placeholder="<?php esc_attr_e( '@[email protected]', 'activitypub' ); ?>"
type="text"
/>
Expand Down Expand Up @@ -235,6 +242,7 @@ class="activitypub-profile__avatar u-photo"
// Render the modal using the Blocks class.
Blocks::render_modal(
array(
'id' => $block_id . '-modal',
'content' => $modal_content,
/* translators: %s: Profile name. */
'title' => sprintf( esc_html__( 'Follow %s', 'activitypub' ), esc_html( $actor->get_name() ) ),
Expand Down
19 changes: 16 additions & 3 deletions build/remote-reply/render.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@
*/

use Activitypub\Blocks;
use function Activitypub\is_activitypub_request;

if ( is_activitypub_request() || is_feed() ) {
return;
}

/* @var array $attributes Block attributes. */
$attributes = wp_parse_args( $attributes );
Expand Down Expand Up @@ -68,9 +73,12 @@
<?php esc_html_e( 'Copy and paste the Comment URL into the search field of your favorite fediverse app or server.', 'activitypub' ); ?>
</div>
<div class="activitypub-dialog__button-group">
<label for="<?php echo esc_attr( $block_id . '-profile-handle' ); ?>" class="screen-reader-text">
<?php esc_html_e( 'Comment URL', 'activitypub' ); ?>
</label>
<input
aria-readonly="true"
id="profile-handle"
id="<?php echo esc_attr( $block_id . '-profile-handle' ); ?>"
readonly
tabindex="-1"
type="text"
Expand All @@ -92,12 +100,15 @@ class="wp-element-button wp-block-button__link"
<?php esc_html_e( 'Or, if you know your own profile, we can start things that way!', 'activitypub' ); ?>
</div>
<div class="activitypub-dialog__button-group">
<label for="<?php echo esc_attr( $block_id . '-remote-profile' ); ?>" class="screen-reader-text">
<?php esc_html_e( 'Your Fediverse profile', 'activitypub' ); ?>
</label>
<input
data-wp-bind--aria-invalid="context.isError"
data-wp-bind--value="context.remoteProfile"
data-wp-on--input="actions.updateRemoteProfile"
data-wp-on--keydown="actions.onInputKeydown"
id="remote-profile"
id="<?php echo esc_attr( $block_id . '-remote-profile' ); ?>"
placeholder="<?php esc_attr_e( '@[email protected]', 'activitypub' ); ?>"
type="text"
/>
Expand Down Expand Up @@ -139,6 +150,7 @@ class="activitypub-dialog__error"
>
<div class="activitypub-remote-profile" hidden data-wp-bind--hidden="!context.hasRemoteUser">
<a
href=""
class="comment-reply-link activitypub-remote-profile__link"
data-wp-bind--href="state.remoteProfileUrl"
target="_blank"
Expand Down Expand Up @@ -172,7 +184,7 @@ class="comment-reply-link activitypub-remote-reply__link"
data-wp-bind--aria-expanded="context.modal.isOpen"
aria-label="<?php esc_attr_e( 'Reply on the Fediverse', 'activitypub' ); ?>"
aria-haspopup="dialog"
aria-controls="modal-heading"
aria-controls="<?php echo esc_attr( $block_id . '-modal-title' ); ?>"
role="button"
tabindex="0"
hidden
Expand All @@ -183,6 +195,7 @@ class="comment-reply-link activitypub-remote-reply__link"
<?php
Blocks::render_modal(
array(
'id' => $block_id . '-modal',
'title' => __( 'Remote Reply', 'activitypub' ),
'content' => $modal_content,
)
Expand Down
8 changes: 7 additions & 1 deletion includes/class-blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,7 @@ public static function render_reply_block( $attrs ) {
public static function render_modal( $args = array() ) {
$defaults = array(
'content' => '',
'id' => '',
'is_compact' => false,
'title' => '',
);
Expand All @@ -300,7 +301,12 @@ class="activitypub-modal__overlay<?php echo \esc_attr( $args['is_compact'] ? ' c
<div class="activitypub-modal__frame">
<?php if ( ! $args['is_compact'] || ! empty( $args['title'] ) ) : ?>
<div class="activitypub-modal__header">
<h2 class="activitypub-modal__title"><?php echo \esc_html( $args['title'] ); ?></h2>
<h2
class="activitypub-modal__title"
<?php if ( ! empty( $args['id'] ) ) : ?>
id="<?php echo \esc_attr( $args['id'] . '-title' ); ?>"
<?php endif; ?>
><?php echo \esc_html( $args['title'] ); ?></h2>
<button
type="button"
class="activitypub-modal__close wp-element-button wp-block-button__link"
Expand Down
13 changes: 10 additions & 3 deletions src/follow-me/render.php
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
'data-wp-bind--aria-expanded' => 'context.modal.isOpen',
'aria-label' => __( 'Follow me on the Fediverse', 'activitypub' ),
'aria-haspopup' => 'dialog',
'aria-controls' => 'modal-heading',
'aria-controls' => $block_id . '-modal-title',
'role' => 'button',
'tabindex' => '0',
)
Expand All @@ -119,9 +119,12 @@
<?php esc_html_e( 'Copy and paste my profile into the search field of your favorite fediverse app or server.', 'activitypub' ); ?>
</div>
<div class="activitypub-dialog__button-group">
<label for="<?php echo esc_attr( $block_id . '-profile-handle' ); ?>" class="screen-reader-text">
<?php esc_html_e( 'My Fediverse handle', 'activitypub' ); ?>
</label>
<input
aria-readonly="true"
id="profile-handle"
id="<?php echo esc_attr( $block_id . '-profile-handle' ); ?>"
readonly
tabindex="-1"
type="text"
Expand All @@ -143,12 +146,15 @@ class="wp-element-button wp-block-button__link"
<?php esc_html_e( 'Or, if you know your own profile, we can start things that way!', 'activitypub' ); ?>
</div>
<div class="activitypub-dialog__button-group">
<label for="<?php echo esc_attr( $block_id . '-remote-profile' ); ?>" class="screen-reader-text">
<?php esc_html_e( 'Your Fediverse profile', 'activitypub' ); ?>
</label>
<input
data-wp-bind--aria-invalid="context.isError"
data-wp-bind--value="context.remoteProfile"
data-wp-on--input="actions.updateRemoteProfile"
data-wp-on--keydown="actions.handleKeyDown"
id="remote-profile"
id="<?php echo esc_attr( $block_id . '-remote-profile' ); ?>"
placeholder="<?php esc_attr_e( '@[email protected]', 'activitypub' ); ?>"
type="text"
/>
Expand Down Expand Up @@ -236,6 +242,7 @@ class="activitypub-profile__avatar u-photo"
// Render the modal using the Blocks class.
Blocks::render_modal(
array(
'id' => $block_id . '-modal',
'content' => $modal_content,
/* translators: %s: Profile name. */
'title' => sprintf( esc_html__( 'Follow %s', 'activitypub' ), esc_html( $actor->get_name() ) ),
Expand Down
15 changes: 12 additions & 3 deletions src/remote-reply/render.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/

use Activitypub\Blocks;
use function Activitypub\is_activitypub_request;

if ( is_activitypub_request() || is_feed() ) {
return;
Expand Down Expand Up @@ -72,9 +73,12 @@
<?php esc_html_e( 'Copy and paste the Comment URL into the search field of your favorite fediverse app or server.', 'activitypub' ); ?>
</div>
<div class="activitypub-dialog__button-group">
<label for="<?php echo esc_attr( $block_id . '-profile-handle' ); ?>" class="screen-reader-text">
<?php esc_html_e( 'Comment URL', 'activitypub' ); ?>
</label>
<input
aria-readonly="true"
id="profile-handle"
id="<?php echo esc_attr( $block_id . '-profile-handle' ); ?>"
readonly
tabindex="-1"
type="text"
Expand All @@ -96,12 +100,15 @@ class="wp-element-button wp-block-button__link"
<?php esc_html_e( 'Or, if you know your own profile, we can start things that way!', 'activitypub' ); ?>
</div>
<div class="activitypub-dialog__button-group">
<label for="<?php echo esc_attr( $block_id . '-remote-profile' ); ?>" class="screen-reader-text">
<?php esc_html_e( 'Your Fediverse profile', 'activitypub' ); ?>
</label>
<input
data-wp-bind--aria-invalid="context.isError"
data-wp-bind--value="context.remoteProfile"
data-wp-on--input="actions.updateRemoteProfile"
data-wp-on--keydown="actions.onInputKeydown"
id="remote-profile"
id="<?php echo esc_attr( $block_id . '-remote-profile' ); ?>"
placeholder="<?php esc_attr_e( '@[email protected]', 'activitypub' ); ?>"
type="text"
/>
Expand Down Expand Up @@ -143,6 +150,7 @@ class="activitypub-dialog__error"
>
<div class="activitypub-remote-profile" hidden data-wp-bind--hidden="!context.hasRemoteUser">
<a
href=""
class="comment-reply-link activitypub-remote-profile__link"
data-wp-bind--href="state.remoteProfileUrl"
target="_blank"
Expand Down Expand Up @@ -176,7 +184,7 @@ class="comment-reply-link activitypub-remote-reply__link"
data-wp-bind--aria-expanded="context.modal.isOpen"
aria-label="<?php esc_attr_e( 'Reply on the Fediverse', 'activitypub' ); ?>"
aria-haspopup="dialog"
aria-controls="modal-heading"
aria-controls="<?php echo esc_attr( $block_id . '-modal-title' ); ?>"
role="button"
tabindex="0"
hidden
Expand All @@ -187,6 +195,7 @@ class="comment-reply-link activitypub-remote-reply__link"
<?php
Blocks::render_modal(
array(
'id' => $block_id . '-modal',
'title' => __( 'Remote Reply', 'activitypub' ),
'content' => $modal_content,
)
Expand Down
Loading