Product Preview Card Component using Flex, CSS Variables & ARIA

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  ARIA 🔊:

  • div elements are not interactive, so they do not require a label, and they do not work on div elements; if you use a screen reader, you will notice that no aria-label with the div, section, or main tags is announced.

  • The aria-label attributes are not required for paragraphs because the text content of the p and h1 elements is already accessible to screen readers. When the aria-label attribute is applied to a paragraph element, screen reader users will hear the text specified in the attribute's value rather than the text of the paragraph.

  • aria-label="Add to cart": Don't repeat what the cart button says in the HTML; if you change the text of the button, it's very likely that the aria-label attribute will be forgotten to update.

  • One component is not a complete page, there should not be a <header> and <footer> in the solution.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1
• 

  Stephan•60

  @Kyr27Posted almost 2 years ago

  Fixed the left and right side height mismatch that was likely caused by the way flexbox handles paddings and margins behind the scenes, by centering using body instead:

  ! Don't use this to center the card:

    .product-container {
      display: flex;
      justify-content: center;
      align-items: center;
  
      min-height: 100vh;
      margin-inline: auto;
    }
  

  ! Use this instead:

  body {
     min-height: 100vh;
     align-items: center;
     justify-content: center;
  }
  

  0