Use separate content for screen reader and visual layout

WordPress · Oct 12, 2023 · e287fad · e287fad
1 parent 01ad65a
commit e287fad
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 24 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,13 +99,28 @@ function( $field ) use ( $attributes ) {
 		$value = get_value( $field['type'], $field['key'], $block->context['postId'] );
 
 		if ( ! empty( $value ) ) {
-			$list_items[] = sprintf(
-				'<li class="is-meta-%1$s"><strong%2$s>%3$s</strong> <span>%4$s</span></li>',
-				$field['key'],
-				$show_label ? '' : ' class="screen-reader-text"',
-				$field['label'],
-				wp_kses_post( $value )
-			);
+			$list_items[] = $show_label
+				? sprintf(
+					'<li class="is-meta-%1$s">
+						<span class="screen-reader-text">%2$s: %3$s</span>
+						<span aria-hidden="true">
+							<strong>%2$s</strong>
+							<span>%3$s</span>
+						</span>
+					</li>',
+					$field['key'],
+					$field['label'],
+					wp_kses_post( $value )
+				)
+				: sprintf(
+					'<li class="is-meta-%1$s">
+						<span class="screen-reader-text">%2$s: %3$s</span>
+						<span aria-hidden="true">%3$s</span>
+					</li>',
+					$field['key'],
+					$field['label'],
+					wp_kses_post( $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;
+				}
 			}
 		}
 	}