Merge pull request #266 from WordPress/fix/235-metadata-accessibility

Make site metadata accessible
WordPress · Jan 8, 2024 · a8a1b3d · a8a1b3d
2 parents f7bb6aa + a57d681
commit a8a1b3d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 44 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
@@ -100,9 +100,10 @@ function( $field ) use ( $attributes ) {
 
 		if ( ! empty( $value ) ) {
 			$list_items[] = sprintf(
-				'<li class="is-meta-%1$s">
-					<strong%2$s>%3$s</strong> %4$s
-				</li>',
+				'<tr class="is-meta-%1$s">
+					<th%2$s>%3$s</th>
+					<td>%4$s</td>
+				</tr>',
 				$field['key'],
 				$show_label ? '' : ' class="screen-reader-text"',
 				$field['label'],
@@ -114,7 +115,7 @@ function( $field ) use ( $attributes ) {
 	$class = $show_label ? '' : 'has-hidden-label';
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) );
 	return sprintf(
-		'<div %s><ul>%s</ul></div>',
+		'<div %s><table>%s</table></div>',
 		$wrapper_attributes,
 		join( '', $list_items )
 	);

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
@@ -1,61 +1,66 @@
 .wp-block-wporg-site-meta-list {
 	margin-block-start: 0;
 
-	ul {
+	table,
+	tbody {
+		// Needed to pass border color down to `tr`.
+		border-color: inherit;
+	}
+
+	table {
 		margin: 0;
 		padding: 0;
-		list-style-type: none;
-		// Needed to pass border color down to `li`.
-		border-color: inherit;
+		width: 100%;
+		border-spacing: 0;
+		border-collapse: collapse;
 	}
 
-	li {
-		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;
+	tr {
+		vertical-align: baseline;
 
 		&:not(:last-of-type) {
 			border-bottom: 1px solid;
 			border-color: inherit;
 		}
 
-		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));
+		th:not(.screen-reader-text),
+		td {
+			padding-top: var(--wp--preset--spacing--10);
+			padding-bottom: var(--wp--preset--spacing--10);
+		}
+
+		th:not(.screen-reader-text) {
 			font-weight: 400;
 			text-align: start;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
+			min-width: 100px;
+			padding-inline-start: var(--wp--preset--spacing--20);
+			// Keep a letter space between the label and the value.
+			// Required on smaller screens where they're more likely to collide.
+			padding-inline-end: 0.5em;
 		}
 
-		[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 {
-				left: unset;
-				right: var(--wp--preset--spacing--20);
-			}
+		td {
+			text-align: end;
+			padding-inline-end: var(--wp--preset--spacing--20);
 		}
 
 		@media (max-width: 380px) {
-			text-align: start;
-			padding-left: var(--wp--preset--spacing--20);
+			display: block;
 
-			strong {
-				position: static;
+			th,
+			td {
 				display: block;
-				max-width: unset;
 			}
 
-			[dir="rtl"] & {
-				padding-right: var(--wp--preset--spacing--20);
+			th:not(.screen-reader-text) {
+				padding-bottom: 0;
+				padding-inline-end: var(--wp--preset--spacing--20);
+			}
+
+			td {
+				text-align: start;
+				padding-top: 0;
+				padding-inline-start: var(--wp--preset--spacing--20);
 			}
 		}
 	}
@@ -71,7 +76,7 @@
 	}
 
 	&.has-hidden-label {
-		li {
+		td {
 			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,11 +9,6 @@
 					"width": "10px",
 					"radius": "20px"
 				}
-			},
-			"wporg-site-meta-list": {
-				"label": {
-					"width": "100px"
-				}
 			}
 		}
 	},