Fix: Make 'See all reviews' link fully visible for better localization

[badembafr]

Fix localization of "See all reviews" link by removing hidden screen-reader text

Hello all,

This pull request addresses the issue described here:
#481

What I changed :
I replaced the original translation string:

__( 'See all<span class="screen-reader-text"> reviews</span>', 'wporg-themes' )

with:

__( 'See all reviews', 'wporg-themes' )

Why this change is necessary :
This improves localization and accessibility.
In French for example, the previous string would result in something like:

"Voir tous les"

Which is incomplete and incorrect, because "reviews" was hidden using the screen-reader-text class.
After this change, the sentence becomes:

"Voir tous les avis"

Which is grammatically correct and understandable for all users.

Note:
I'm not sure whether you would also recommend adding flex-wrap: wrap on the parent container to prevent layout issues on smaller screens. Let me know if you'd like me to add that as well.

Thanks in advance !

[dd32]

This PR changes the link display for all users, where as I believe the string is in it's current state because it was requested to be shorter for design purposes (while the reviews additional was added for accessibility purposes).

I'm in support of changing this though, perhaps to a screen reader vs visual representation through something like:

<span aria-hidden="true">See all</span>
<span class="screen-reader-text">See all reviews</span>

(Both internal strings would be translated without the )
That could be done through two replacements:

sprintf(
'<a href="%s">%s%s</a>',
...,
'<span aria-hidden="true">' . __()....,
'<span class="screen-reader-text">' . __()....,
)

[badembafr]

Ok I will try to fix this problem.

Thanks !

[t-hamano]

Thanks for the PR.

perhaps to a screen reader vs visual representation through something like

This certainly seems like the best approach.

[timse201]

I don't like the idea.

For German it is: Alle Rezensionen anzeigen
The double space is auto corrected.

This way we force every language to translate it again and force most of us to respect the line break. It is not necessary. If a single language has problems - just remove that tag. We don't need to force every language and the design team will not like line breaks.

[t-hamano]

I looked into this issue again and found that, at least for the Japanese locale, I was able to translate it in a way that was both visually appropriate and accessibility-appropriate by adjusting the translation method.

That is, I changed the text inside the span tag itself to match the language.

Before:

すべての<span class="screen-reader-text">レビュー</span>を見る

After:

すべてのレビュー<span class="screen-reader-text">を見る</span>

I'm not sure if this approach will work for all other languages, but if there are no issues in other languages, I think it's okay to close this.