Skip to content
Submitted over 2 years ago

Interactive rating component with flexbox

Anna Wang•90
@annawng
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'm not sure if I got the active states correct according to the provided image. It made more sense to me for the hover state for the number to be light grey and the selected state to be orange, but that's not what the given design seemed to show.

I also was unsure whether the images needed alt text because to me, they seem decorative.

Finally, I am curious as to what the behavior for when the user clicks the button without selecting a rating should be.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    Hey there! 👋 Here are some suggestions to help improve your code:

    Regarding your questions,

    1. Your thoughts were correct; light grey for active and orange for hover.
    2. You’re correct.
    3. They’re several options. It’s up to you:
    • Make the “5” rating the default rating.
    • Create an error message, telling users they need make a section.
    • Disable the button until a selection is made.

    Suggestions:

    • Remove the article element you wrapped your component in, it’s not being used correctly since this component is not independently distributable.
    • Along with the blank alt tag, you also want to include the aria-hidden=“true” to your “ images/illustrations” to fully remove them from assistive technology.
    • To ensure that the "rating buttons" are fully accessible, they need to be built using a form and inside of it, there should be fiveinput radios and each input should have a label attached to it to make the buttons accessible. Finally wrap all the inputs and labels inside a fieldset to prevent users from making more than one selection.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding!🎄🎁

    Marked as helpful

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