From 4493ad75ebd9d46bf504805ced4394a4e0230c5b Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Thu, 12 Oct 2023 15:00:43 +1300
Subject: [PATCH] Use separate content for screen reader and visual layout
---
.../src/site-meta-list/index.php | 13 ++++--
.../src/site-meta-list/style.scss | 42 +++++++++----------
2 files changed, 30 insertions(+), 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
index e4955978..0717296f 100644
--- 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(
- '
%3$s %4$s',
+ '
+ %2$s: %3$s
+ %4$s
+ ',
$field['key'],
- $show_label ? '' : ' class="screen-reader-text"',
$field['label'],
- wp_kses_post( $value )
+ $value,
+ $show_label
+ ? sprintf( '%1$s%2$s', $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
index 2a405523..8788e4d6 100644
--- 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;
- }
}
}
}