Merge pull request #245 from WordPress/fix/235-meta-list-accessibility-2

Improve screen reader experience for site meta (v2)
WordPress · Oct 12, 2023 · bdce74a · bdce74a
2 parents 01ad65a + 4493ad7
commit bdce74a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/index.php b/source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/index.php
@@ -99,12 +99,19 @@ function( $field ) use ( $attributes ) {
 		$value = get_value( $field['type'], $field['key'], $block->context['postId'] );
 
 		if ( ! empty( $value ) ) {
+			$value = wp_kses_post( $value );
+
 			$list_items[] = sprintf(
-				'<li class="is-meta-%1$s"><strong%2$s>%3$s</strong> <span>%4$s</span></li>',
+				'<li class="is-meta-%1$s">
+					<span class="screen-reader-text">%2$s: %3$s</span>
+					<span aria-hidden="true">%4$s</span>
+				</li>',
 				$field['key'],
-				$show_label ? '' : ' class="screen-reader-text"',
 				$field['label'],
-				wp_kses_post( $value )
+				$value,
+				$show_label
+					? sprintf( '<strong>%1$s</strong><span>%2$s</span>', $field['label'], $value )
+					: $value,
 			);
 		}
 	}

diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/style.scss
@@ -10,8 +10,6 @@
 	}
 
 	li {
-		display: flex;
-		gap: var(--wp--preset--spacing--10);
 		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
 		border-bottom: 1px solid;
 		border-color: inherit;
@@ -20,24 +18,29 @@
 			border-bottom: none;
 		}
 
-		strong {
-			flex-shrink: 0;
-			font-weight: 400;
-		}
-
-		span {
-			margin-inline-start: auto;
-			text-align: right;
-			color: var(--wp--preset--color--charcoal-3);
-		}
+		span[aria-hidden="true"] {
+			display: flex;
+			gap: var(--wp--preset--spacing--10);
 
-		@media (max-width: 380px) {
-			flex-direction: column;
-			gap: 0;
+			strong {
+				flex-shrink: 0;
+				font-weight: 400;
+			}
 
 			span {
-				margin-inline-start: unset;
-				text-align: initial;
+				margin-inline-start: auto;
+				text-align: right;
+				color: var(--wp--preset--color--charcoal-3);
+			}
+
+			@media (max-width: 380px) {
+				flex-direction: column;
+				gap: 0;
+
+				span {
+					margin-inline-start: unset;
+					text-align: initial;
+				}
 			}
 		}
 	}
@@ -61,11 +64,6 @@
 	&.has-hidden-label {
 		li {
 			padding: clamp(10px, calc(1.7vw), 20px) clamp(20px, calc(1.7vw + 10px), 30px);
-
-			span {
-				margin-inline-start: unset;
-				text-align: left;
-			}
 		}
 	}
 }