React and TailwindCSS

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  This looks great. It's nice and responsive, and I like the little touches for the animations.

  There's a few accessibility things that can be fairly easily sorted out.

  The plus and minus buttons are really small. That will be super hard to press on mobile, and it's not much easier with a mouse. The button should take up the whole of the box, not just the icon itself, that'll make it a lot easier to interact with, and will make the focus styling more obvious too. The buttons need some kind of accessible label on them too. A visually hidden span inside the button will do.

  The images that you can click on to switch the lightbox gallery should be buttons. While React makes it super easy to attach an onClick handler to any element that you want, onClick should be reserved for button elements. That will make that gallery accessible to keyboard users.

  The shopping cart should be a modal. Modals are notoriously hard to make accessible. Some of the things that you need to take care of is making sure the users focus remains inside the modal and they can't tab into the surrounding document. When the modal closes focus should be restored to where the user was before it opened. Clicking or interacting outside the modal should close it. There should be some kind of dismiss button to allow keyboard users to close it. The document body should be prevented from scrolling behind the modal. As there are so many things to think about, it's almost never a good idea to build your own (other than as an exercise in seeing how hard it is). Instead, you can use a component like Reach UI's dialog https://reach.tech/dialog/ - this deals with all of the accessibility and functionality issues, and you can then just style it however you like.

  0

  ---

  

  Oto•400

  @TagviPosted about 3 years ago

  @AlexKMarshall Thanks for the suggestions. Looks like I need to learn some accessibility practices, where can I learn those? :)

  0

  

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  @Tagvi Some useful resources on accessibility are: https://inclusive-components.design/ https://moderncss.dev/ https://every-layout.dev/ https://www.sarasoueidan.com/blog/ https://adrianroselli.com/

  0

  

  Oto•400

  @TagviPosted about 3 years ago

  @AlexKMarshall Thank you!

  0