Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Read More block: add aria-label and screen reader text #45490

Merged
merged 6 commits into from
Nov 10, 2022
+9 −2
Merged

Read More block: add aria-label and screen reader text #45490

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b89f5c6
Add aria label + screen reader text to the link.
jffng Nov 2, 2022
83e2d93
Use only screen reader text.
jffng Nov 3, 2022
7b55ab1
Make the screen reader text more universal.
jffng Nov 4, 2022
d98f6ad
Make the screen reader text explicit when the post is untitled.
jffng Nov 7, 2022
676e477
Make linter happy.
jffng Nov 9, 2022
7928e6f
Move translators note and fix Yoda.
jffng Nov 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions packages/block-library/src/read-more/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,22 @@ function render_block_core_read_more( $attributes, $content, $block ) {
}

$post_ID = $block->context['postId'];
$post_title = get_the_title( $post_ID );
$screen_reader_text = sprintf(
/* translators: %s is either the post title or post ID to describe the link for screen readers. */
__( ': %s' ),
'' !== $post_title ? $post_title : __( 'untitled post ' ) . $post_ID
Copy link
Contributor

@youknowriad youknowriad Feb 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We received this feedback related to this change https://core.trac.wordpress.org/ticket/57471#comment:27

Basically we should avoid concatenation when it comes to translated strings.

Let's make sure to follow-up on that and label the PR with the "backport to WP beta/RC" label to include on the next package update in core.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tracked here #47812

);
$justify_class_name = empty( $attributes['justifyContent'] ) ? '' : "is-justified-{$attributes['justifyContent']}";
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $justify_class_name ) );
$more_text = ! empty( $attributes['content'] ) ? wp_kses_post( $attributes['content'] ) : __( 'Read more' );
return sprintf(
'<a %1s href="%2s" target="%3s">%4s</a>',
'<a %1s href="%2s" target="%3s">%4s<span class="screen-reader-text">%5s</span></a>',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There needs to be a space between the visible link text and the hidden text, otherwise the words will be pasted together. e.g. <a %1s href="%2s" target="%3s">%4s<span class="screen-reader-text"> %5s</span></a>

See the space inside the screen-reader-text span.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To make "grammatical" sense in cases where the user has customized the "read more" text, I went with the following format:

Read More: Post Title

See https://github.com/WordPress/gutenberg/pull/45490/files#diff-5fed9d866f33e17d5bf917f312bcae02af3c8bd244586ab161ed60889c960af6R25

Does that make sense?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great. Also good for internationalization.

$wrapper_attributes,
get_the_permalink( $post_ID ),
esc_attr( $attributes['linkTarget'] ),
$more_text
$more_text,
$screen_reader_text
);
}

Expand Down