Skip to content

Commit

Permalink
Use separate content for screen reader and visual layout
Browse files Browse the repository at this point in the history
  • Loading branch information
adamwoodnz committed Oct 12, 2023
1 parent 01ad65a commit 470b56b
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -96,15 +96,21 @@ function( $field ) use ( $attributes ) {
}

foreach ( $meta_fields as $field ) {
$value = get_value( $field['type'], $field['key'], $block->context['postId'] );
list('type' => $type, 'key' => $key, 'label' => $label) = $field;
$value = get_value( $type, $key, $block->context['postId'] );

if ( ! empty( $value ) ) {
$value = wp_kses_post( $value );

$list_items[] = sprintf(
'<li class="is-meta-%1$s"><strong%2$s>%3$s</strong> <span>%4$s</span></li>',
$field['key'],
$show_label ? '' : ' class="screen-reader-text"',
$field['label'],
wp_kses_post( $value )
'<li class="is-meta-%1$s">
<span class="screen-reader-text">%2$s: %3$s</span>
<span aria-hidden="true">%4$s</span>
</li>',
$key,
$label,
$value,
$show_label ? sprintf('<strong>%1$s</strong><span>%2$s</span>', $label, $value) : $value,
);
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
}
}
}
Expand All @@ -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;
}
}
}
}

0 comments on commit 470b56b

Please sign in to comment.