Ecommerce Product Page w/ SvelteKit, Tailwind & Typescript.

Community feedback

• 

  Clarence Onumajulu•400

  @clarencejuluPosted over 2 years ago

  Hi Antoine, Your project is really impressive and looks so good to say the least. It's clear you put in a lot of time and effort. I really like what you did with the accessibility and it makes me want to add that to my future projects.

  Can I know how you added those sliding lines to your menu items by the way :)

  Keep up the good work man!

  Marked as helpful

  1

  ---

  

  Antoine C•1,210

  @mattari97Posted over 2 years ago

  @clarencejulu Hi Clarence. I am really glad you liked my solution. I'm just starting with the accessibility and I still have a lot to learn.

  Regarding the hover effect on the navigation links, I made a codepen for you with the sliding lines effect. Feel free to take it and use it in your projects.

  Thank you again for the kind words and happy coding 😋.

  2

  

  Clarence Onumajulu•400

  @clarencejuluPosted over 2 years ago

  @AntoineC-dev Thank you so much man! You're a great dude.

  1
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Antoine, this looks really well done, and I'm glad you built with this accessibility in mind, as that is also something I've been doing. I can see you put a lot of work and thought into this!

  I did test it out, and like you, I also wish there's a screen reader I can use to test out code; I tried with my OS but I don't think I know how to operate it well yet. Anyway, here are some things I noted when testing this out with the tab key:

  1. It works well in going between the thumbnails, which is good!
  2. When I hit back tab on the first thumbnail, I got taken to the main full size image; the problem was, I couldn't tab out of it, so I was stuck there 😅
  3. When tabbing to the number input for adding quantities, it would help if the focus style could be right on the buttons. Right now I can only see a blue line, which was a bit confusing to me at first
  4. Adding quantities to the cart worked well with the tab key, which is important

  I had to build a slider recently for a challenge, and here are some links that I found in my research that might be of use to you:

  How to build a more accessible carousel or slider, by Jason Webb

  If you must use a carousel, make it accessible, by Alison Walden

  Well done, and keep building! 🙂

  Marked as helpful

  1

  ---

  

  Antoine C•1,210

  @mattari97Posted over 2 years ago

  @elaineleung Hey Elaine! Awesome review. I'm glad you took the time to test my solution.

  I fixed the invisible outline problem in the quantity picker. Its was overflowing the container which has the property overflow hidden. Fixed by removing the overflow hidden and adding the border radius on the buttons themself.

  I also fixed the "being stuck" on the main image of the slider. I was listening to keydown events so users could open he lighbox with the Enter key but i had to move the preventDefault() inside the check for Enter key because obviously tabbing is a default behavior i don't want to prevent.

  <div
      data-slider-wrapper
      tabindex="0"
      on:click={() => lighboxActive && toggleLightboxOpen()}
      bind:this={lightboxToggleEl}
      on:keydown={(e) => {
        if (e.key === "Enter" && lighboxActive) {
          e.preventDefault();
          toggleLightboxOpen();
        }
      }}
      class="relative w-full max-h-[28rem] lg:max-h-full lg:rounded-xl overflow-hidden cursor-pointer"
    >
  

  Thank you very much for the review and resources!

  Happy coding.

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @AntoineC-dev Good to hear you fixed it, and thanks for sharing the code here too, as I'm sure I'll be needing the inspiration when the time comes to build this!

  1