wporg-plugins-2024: Link text to view all reviews is difficult to localize

[t-hamano]

There is a link to view all reviews in the sidebar of the theme/plugin page:

This link is generated here:

wordpress.org/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/inc/block-bindings.php

Lines 43 to 47 in 82d3f79

	return sprintf(
	'<a href="%s">%s</a>',
	esc_url( 'https://wordpress.org/support/plugin/' . $plugin_post->post_name . '/reviews/' ),
	__( 'See all<span class="screen-reader-text"> reviews</span>', 'wporg-themes' )
	);

The generated HTML is as follows:

<a href="">See all<span class="screen-reader-text"> reviews</span></a>

This sentence consists of the following words:

• See: verb
• All: adjective
• Reviews: noun

The word reviews is invisible because of the CSS class for screen readers, so the visible sentence is See all, which consists of verb + adjective. In English, a sentence may be natural without a noun, but in other languages, this may not be the case.

In some languages, the sentence that represents verb + adjective may change if the noun is removed. Therefore, the current implementation makes it hard to provide a correct translated text for both the visible sentence and the sentence for screen readers. For this reason, I recommend not to hide a word from a sentence.

I recommend providing a consistent sentence "See all reviews", but if localization may cause conflicts with the "Add my review" text on the left, it may be good to add flex-wrap: wrap to the parent Group block.

P.S. We may be tempted to use the title attribute to solve this issue like the following example, but note that this is not recommended from an a11y perspective:

<a href="" title="See all reviews">See all</a>

Ref: https://make.wordpress.org/accessibility/handbook/best-practices/quick-start-guide/#links

[badembafr]

Hello,

If I understood correctly, the idea is to display the full sentence, like "See all reviews", without using screen-reader-text.

Also, we need to allow line breaks with flex-wrap: wrap to prevent the text from overflowing or overlapping.

Thanks in advance!

[badembafr]

Hello,

I have opened a pull request to address this issue: #489
It improves the localization of the “See all reviews” link.
Let me know if any adjustments are needed!

Thanks in advance 🙂