Submitted about 3 years ago

Interactive Rating Component | Remix, TypeScript and Sass/Scss

remix, sass/scss, typescript, accessibility

Yuko Horita•645

@Sloth247

A solution to the Interactive rating component challenge

Preview Code

Solution retrospective

This is my first time using TypeScript in a project. There weren't much types but I enjoyed using <Form> component package from Remix.

I added the following feature:

show an error message when no rating has been selected.

I have a few questions;

I used focus-within on .main__input-container and change label background color when it is focused. However, this made a selected rating button remain orange when hover over other rating.
I am not sure my use of aria-live on error message is correct.

Any comments & feedbacks are welcome.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Yuko Horita's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord