Skip to content
Submitted about 4 years ago

Responsive /w custom-toggle keyboard events (spacebar,enter) and aria

Arturo Simon•1,785
@artimys
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pricing component with toggle
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello everyone,

I'm curious how some add aria accessible support for a custom toggle component?

Any other feedback welcomed

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    Hey, Arturo Simon! 👋

    Nice job on this challenge! 👍

    I suggest,

    • Setting a max-width on the pricing cards so that they aren't too wide when the layout first changes from desktop to mobile.
    • Perhaps adding a hover state to the "LEARN MORE" buttons.

    Everything else looks good! 🙌

    I have much to learn about accessibility... so perhaps someone else (like @grace-snow—she just submitted a fully accessible solution to this challenge) could answer your question! 😉

    Happy coding! 😁

    1
    Arturo Simon•1,785
    @artimysPosted about 4 years ago

    Thanks for the feedback. Looks like some great info on accessibility. Thanks for the reference.

    0

Please log in to post a comment

Log in with GitHub

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