Skip to content

Improve rating's default a11y #1019

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.

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

Merged
merged 5 commits into from
Jun 3, 2025
Merged

Improve rating's default a11y #1019

merged 5 commits into from
Jun 3, 2025

Conversation

claviska
Copy link
Member

@claviska claviska commented Jun 3, 2025

Turns out, we do have an outlined star in FA free. 😆

This PR improves the default contrast of rating, making it more accessible by showing a darker outline for inactive stars and the same solid yellow for active ones.

An isSelected argument was added to getSymbol() to allow us (and users) to hook into it. The docs have been updated as well.

@lindsaym-fa I had to use --wa-color-neutral-border-loud for the outline, as the fills weren't dark enough. Let me know if there's a better token for this.

Before:

CleanShot 2025-06-03 at 08 32 32@2x

After:

CleanShot 2025-06-03 at 08 31 39@2x

Fixes #429

@claviska claviska requested a review from lindsaym-fa June 3, 2025 12:34
@claviska claviska self-assigned this Jun 3, 2025
@claviska claviska added accessibility Issues that pertain to improving accessibility components Component-related issues typically affecting multiple components labels Jun 3, 2025
Copy link

vercel bot commented Jun 3, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
webawesome ✅ Ready (Inspect) Visit Preview Jun 3, 2025 7:09pm

lindsaym-fa
lindsaym-fa previously approved these changes Jun 3, 2025
Copy link
Contributor

@lindsaym-fa lindsaym-fa left a comment

Choose a reason for hiding this comment

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

Yay! Looks great!

@claviska claviska merged commit 6b2a081 into next Jun 3, 2025
1 of 2 checks passed
@claviska claviska deleted the rating-a11y branch June 3, 2025 19:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Issues that pertain to improving accessibility components Component-related issues typically affecting multiple components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve accessibility of rating
2 participants