From e287fadc3236bfebfe2194a8602c3b81433d3920 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 | 29 +++++++++++---- .../src/site-meta-list/style.scss | 37 ++++++++++--------- 2 files changed, 42 insertions(+), 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 index e4955978..377967a3 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,13 +99,28 @@ function( $field ) use ( $attributes ) { $value = get_value( $field['type'], $field['key'], $block->context['postId'] ); if ( ! empty( $value ) ) { - $list_items[] = sprintf( - '
  • %3$s %4$s
  • ', - $field['key'], - $show_label ? '' : ' class="screen-reader-text"', - $field['label'], - wp_kses_post( $value ) - ); + $list_items[] = $show_label + ? sprintf( + '
  • + %2$s: %3$s + +
  • ', + $field['key'], + $field['label'], + wp_kses_post( $value ) + ) + : sprintf( + '
  • + %2$s: %3$s + +
  • ', + $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 index 2a405523..3093f4e9 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; + } } } }