Ecommerce Product Page w/ SvelteKit, Tailwind & Typescript.

@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 😋.

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

@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.

@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!