Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

Arturo Simonβ€’ 1,785

@artimys

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

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

@artimys

Posted

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
Discord logo

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