interactive add to cart

Community feedback

• 

  T

  Grace•31,790

  @grace-snowPosted about 1 month ago

  I think you're jumping ahead with this site. Particularly in terms of accessible HTML and JS. This is inaccessible to people who use a keyboard or screen reader at the moment, which is a baseline requirement.

  Also the performance is suffering because of the way you're loading the images.

  For example you need to

  • update all image alts especially iconography
  • use interactive elements for all controls
  • ensure those interactive elements always have an accessible name that says what they do (through img alt, sr-only text or aria-label)
  • the cart button wouldnt usually open a modal on click, there would be a form submit. But any button that opens a modal dialog would have aria-haspopup="dialog".
  • use the native html dialog element for the confirm. Follow the docs for that element and it should be accessible by default. Without that, you'll need to do loads of extra work.
  • use the picture element for the product images.
  • give product images an aspect-ratio in css to help loading performance, or a width and height attribute in the markup.
  • probably give them loading="lazy" (although I'm not sure if that works when loading the markup with js... Worth a try! Watching the network tab as you scroll down on a short viewport would show if lazy loading is working).
  • as a general rule, use JS to toggle classes and attributes instead of lots of inline styling. This leads to a much more manageable project. For example, the JS can toggle the hidden attribute instead of display none, OR toggle classes like "is-visible".
  • this may need some sr-only text elements and/or aria-live regions to ensure that screen readers are notified of content changes.

  0
• 

  T

  Grace•31,790

  @grace-snowPosted about 1 month ago

  General important point about repositories - node modules must never be pushed to the remote repo!

  To remove

  1. locally delete node modules
  2. Add it to the gitignore (it should have been in there at the start TBH)
  3. Commit and push that change.
  4. Re install locally (npm install)
  5. If working on a repo with a build step you'd give the host (eg Netlify or Vercel) that build command so it can build your site before any deploy. (If all you're doing like here is building some sass on a practice project you can choose to build the css locally before pushing to the remote repo — it's not strictly necessary for the host to build the css for you although that is recommended).

  0