Ensure counter content is exposed to screen reader users

[khiga8]

What are you trying to accomplish?

This PR ensures the counter content is exposed to screen reader users.

Before accessible name -comment ()
After accessible name - comment (15)

This removes the aria-hidden attribute from the counter component and sets sr-only or aria-hidden: true directly on respective counters in the view file. We want to render one span visually for sighted users (without parenthesis), and one span for screen reader users (with parenthesis to help the announcement).

This unintentional bug was introduced in #2807 😓 .

Screenshots

Integration

List the issues that this change affects.

https://github.com/github/accessibility-audits/issues/10088

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Anything you want to highlight for special attention from reviewers?

Accessibility

• No new axe scan violation - This change does not introduce any new axe scan violations.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 020530b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[khiga8]

Setting flex on this newly added span to ensure content remains centered.

[khiga8]

🎉

[khiga8]

I still need to test this on screen reader.

[khiga8]

Just merged in the latest from main so the snapshots will get re-generated as part of Test / Visual and Semantic Markup Regressions !

[khiga8]

Tell me why 900+ snapshots changed 🙃