Add aria-hidden to stars

[joedolson]

Partially fixes https://meta.trac.wordpress.org/ticket/8276 by adding aria-hidden to the ratings star output.

However, the container already has an aria-label. This is run through wp_kses_post at a few points, but I wouldn't have expected that to remove aria-label, so I'm not sure why it's gone.

In block contexts, this is rendered via wporg/ratings-stars, but I have no idea where that is.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props joedolson, wildworks.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates the star rating dashicon markup to improve accessibility by marking decorative icons as hidden from assistive technologies.

Changes:

• Adds aria-hidden="true" to the dashicons star <span> template used for rating display.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[t-hamano]

I think this PR likely aims to fix the review content on the plugin page.

In this section, the rating is outside the heading, so even if the title link is focused, screen readers apparently don't read out the rating.

<div class="header-top">
  <div class="wporg-ratings" aria-label="3 out of 5 stars" data-title-template="%s out of 5 stars" data-rating="3" style="color:#ffb900;">
    <span class="dashicons dashicons-star-filled"></span>
    <span class="dashicons dashicons-star-filled"></span>
    <span class="dashicons dashicons-star-filled"></span>
    <span class="dashicons dashicons-star-empty"></span>
    <span class="dashicons dashicons-star-empty"></span>
  </div>
  <h3 class="review-title">
    <a class="url" href="https://wordpress.org/support/topic/good-direction-but-still-lacks-flexibility/">Good Direction, But Still Lacks Flexibility</a>
  </h3>
</div>

Perhaps the solution is to inject screen reader text into the heading?

<div class="header-top">
  <div class="wporg-ratings" aria-label="3 out of 5 stars" data-title-template="%s out of 5 stars" data-rating="3" style="color:#ffb900;">
    <span class="dashicons dashicons-star-filled"></span>
    <span class="dashicons dashicons-star-filled"></span>
    <span class="dashicons dashicons-star-filled"></span>
    <span class="dashicons dashicons-star-empty"></span>
    <span class="dashicons dashicons-star-empty"></span>
  </div>
  <h3 class="review-title">
    <span class="screen-reader-text">3 out of 5 stars</span>
    <a class="url" href="https://wordpress.org/support/topic/good-direction-but-still-lacks-flexibility/">Good Direction, But Still Lacks Flexibility</a>
  </h3>
</div>

Additionally, I found that to fix the original ticket, we will likely need to make the fix in a different repository. Here it is.

https://github.com/WordPress/wporg-theme-directory/blob/af069c6691ef7e7d93903015f13833b47ad2980e/source/wp-content/plugins/wporg-ratings/wporg-ratings.php#L221-L243

[joedolson]

So many different places these things are kept... :D

[t-hamano]

This PR should resolve the original issue. WordPress/wporg-theme-directory#163