E-commerce product page - created with React

Community feedback

• 

  

  Alex•2,010

  @AlexKMarshall

  Posted almost 4 years ago

  Visually this looks good but there are a few issues with the interactivity that you could update.

  There are a few different images that you've attached onClick handlers to (the + and -, and the delete in the cart to name a few). These should all be button elements with onClick attached to the button.

  As a user I should be able to close the shopping cart dialog by clicking outside of it, and as a keyboard user I should not be able to move focus outside of the dialog without closing it. The content behind the dialog should also be hidden from screen-readers while the dialog is open. I would suggest using the Dialog component from ReachUI as it solves all these accessibility issues, and you can style it however you choose.

  I would also avoid using document.querySelector to add and remove classes. You should be able to do that in the JSX with conditional classNames based on your state variables. That will make the logic easier to extend and debug later.

  13

  Marked as helpful