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

Author: obenland

.github/changelog/2083-from-description

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix duplicate HTML IDs and missing form labels in modal blocks

build/follow-me/render.php

@@ -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() ) {
@@ -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',
 	)
@@ -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"
@@ -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"
 		/>
@@ -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() ) ),

build/remote-reply/render.php

@@ -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 );
@@ -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"
@@ -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"
 		/>
@@ -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"
@@ -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
@@ -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,
 		)

includes/class-blocks.php

@@ -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'      => '',
 		);
@@ -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"

src/follow-me/render.php

@@ -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',
 	)
@@ -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"
@@ -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"
 		/>
@@ -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() ) ),

src/remote-reply/render.php

@@ -6,6 +6,7 @@
  */
 
 use Activitypub\Blocks;
+use function Activitypub\is_activitypub_request;
 
 if ( is_activitypub_request() || is_feed() ) {
 	return;
@@ -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"
@@ -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"
 		/>
@@ -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"
@@ -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
@@ -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,
 		)