From fdd70d4ff3dedd9fe03561868a5309740f038187 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Fri, 13 Oct 2023 13:10:20 +1300
Subject: [PATCH 1/2] Use absolute positioning for meta list layout
Avoids nested spans so that screen readers read list item content as one
---
.../src/site-meta-list/index.php | 11 +---
.../src/site-meta-list/style.scss | 60 +++++++++----------
.../themes/wporg-showcase-2022/theme.json | 5 ++
3 files changed, 36 insertions(+), 40 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 0717296f..0ee7af0f 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,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(
'
- %2$s: %3$s
- %4$s
+ %3$s: %4$s
',
$field['key'],
+ $show_label ? '' : ' class="screen-reader-text"',
$field['label'],
- $value,
- $show_label
- ? sprintf( '%1$s%2$s', $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
index 8788e4d6..3d7570e7 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,37 +10,38 @@
}
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;
- &:last-of-type {
- border-bottom: none;
+ &:not(:last-of-type) {
+ border-bottom: 1px solid;
+ border-color: inherit;
}
- span[aria-hidden="true"] {
- display: flex;
- gap: var(--wp--preset--spacing--10);
-
- strong {
- flex-shrink: 0;
- font-weight: 400;
- }
-
- span {
- margin-inline-start: auto;
- text-align: right;
- color: var(--wp--preset--color--charcoal-3);
- }
+ 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;
+ }
- @media (max-width: 380px) {
- flex-direction: column;
- gap: 0;
+ @media (max-width: 380px) {
+ text-align: start;
+ padding-left: var(--wp--preset--spacing--20);
- span {
- margin-inline-start: unset;
- text-align: initial;
- }
+ strong {
+ position: static;
+ display: block;
+ max-width: unset;
}
}
}
@@ -55,15 +56,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
index 478f8d8d..d99ae9ce 100644
--- 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"
+ }
}
}
},
From 64307d06eeba5b0241ade1909c792b072f119c0a Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Fri, 13 Oct 2023 14:32:02 +1300
Subject: [PATCH 2/2] Add RTL support
---
.../src/site-meta-list/style.scss | 14 ++++++++++++++
1 file changed, 14 insertions(+)
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 3d7570e7..d5ebcb94 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
@@ -34,6 +34,16 @@
white-space: nowrap;
}
+ [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);
+ }
+ }
+
@media (max-width: 380px) {
text-align: start;
padding-left: var(--wp--preset--spacing--20);
@@ -43,6 +53,10 @@
display: block;
max-width: unset;
}
+
+ [dir="rtl"] & {
+ padding-right: var(--wp--preset--spacing--20);
+ }
}
}