Merge pull request #249 from WordPress/fix/235-meta-list-accessibility-3

Improve site meta list accessibility (V3)
WordPress · Oct 13, 2023 · 6e41c2d · 6e41c2d
2 parents ccb0d94 + 64307d0
commit 6e41c2d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 36 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,19 +99,14 @@ 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">
-					<span class="screen-reader-text">%2$s: %3$s</span>
-					<span aria-hidden="true">%4$s</span>
+					<strong%2$s>%3$s<span class="screen-reader-text">:</span></strong> %4$s
 				</li>',
 				$field['key'],
+				$show_label ? '' : ' class="screen-reader-text"',
 				$field['label'],
-				$value,
-				$show_label
-					? sprintf( '<strong>%1$s</strong><span>%2$s</span>', $field['label'], $value )
-					: $value,
+				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,37 +10,52 @@
 	}
 
 	li {
-		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
-		border-bottom: 1px solid;
-		border-color: inherit;
+		position: relative;
+		padding-top: var(--wp--preset--spacing--10);
+		padding-right: var(--wp--preset--spacing--20);
+		padding-bottom: var(--wp--preset--spacing--10);
+		padding-left: calc(var(--wp--custom--wporg-site-meta-list--label--width) + var(--wp--preset--spacing--10));
+		text-align: end;
+
+		&:not(:last-of-type) {
+			border-bottom: 1px solid;
+			border-color: inherit;
+		}
 
-		&:last-of-type {
-			border-bottom: none;
+		strong {
+			position: absolute;
+			left: var(--wp--preset--spacing--20);
+			top: var(--wp--preset--spacing--10);
+			max-width: calc(var(--wp--custom--wporg-site-meta-list--label--width));
+			font-weight: 400;
+			text-align: start;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
 
-		span[aria-hidden="true"] {
-			display: flex;
-			gap: var(--wp--preset--spacing--10);
+		[dir="rtl"] & {
+			padding-left: var(--wp--preset--spacing--20);
+			padding-right: calc(var(--wp--custom--wporg-site-meta-list--label--width) + var(--wp--preset--spacing--10));
 
 			strong {
-				flex-shrink: 0;
-				font-weight: 400;
+				left: unset;
+				right: var(--wp--preset--spacing--20);
 			}
+		}
 
-			span {
-				margin-inline-start: auto;
-				text-align: right;
-				color: var(--wp--preset--color--charcoal-3);
-			}
+		@media (max-width: 380px) {
+			text-align: start;
+			padding-left: var(--wp--preset--spacing--20);
 
-			@media (max-width: 380px) {
-				flex-direction: column;
-				gap: 0;
+			strong {
+				position: static;
+				display: block;
+				max-width: unset;
+			}
 
-				span {
-					margin-inline-start: unset;
-					text-align: initial;
-				}
+			[dir="rtl"] & {
+				padding-right: var(--wp--preset--spacing--20);
 			}
 		}
 	}
@@ -55,15 +70,10 @@
 		}
 	}
 
-	&.has-text-color {
-		li span {
-			color: inherit;
-		}
-	}
-
 	&.has-hidden-label {
 		li {
 			padding: clamp(10px, calc(1.7vw), 20px) clamp(20px, calc(1.7vw + 10px), 30px);
+			text-align: start;
 		}
 	}
 }
diff --git a/source/wp-content/themes/wporg-showcase-2022/theme.json b/source/wp-content/themes/wporg-showcase-2022/theme.json
@@ -9,6 +9,11 @@
 					"width": "10px",
 					"radius": "20px"
 				}
+			},
+			"wporg-site-meta-list": {
+				"label": {
+					"width": "100px"
+				}
 			}
 		}
 	},