Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

Interactive rating component with React, Vite, CUBE CSS and Tailwind

accessibility, react, vite, tailwind-css
Josh Javier•930
@joshjavier
A solution to the Interactive rating component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I used semantic elements whenever possible to avoid having to write additional JavaScript. For the thank you modal, I used the dialog element which comes with an overlay that can be styled with ::backdrop.

For the implementation of the rating component, I used radio buttons which have built-in semantics and interactivity. Sara Soueidan's article on Inclusively Hiding & Styling Checkboxes and Radio Buttons was a huge help as I did manual testing with VoiceOver on iOS to ensure the buttons are accessible by touch users.

It's been a while since I used React, so any feedback on my code would be appreciated. Also, is there a way to make this progressively enhanced with React?

Lastly, I think CUBE CSS works great with React, and I might continue using this setup for my next solutions.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Josh Javier'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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub