Responsive E-commerce Page using ReactJS and SASS

Community feedback

• 

  Vicktor•900

  @Victor-NyagudiPosted almost 2 years ago

  Hi, Michael.

  This is a good attempt.

  I noticed your <button> tags don't have any text in them. That's what's causing the error in the accessibility report.

  If you need to use an image inside a button that shouldn't have any text inside it, consider adding an aria-label to the button and setting its text to what the button does.

  This is very important for screen readers. In addition, if your images are purely for decoration and don't add meaning to the page, you should add an aria-hidden="true" attribute along with an empty alt attribute to them.

  I'd also recommend specifying the type of button. Buttons can be used to submit forms or receive regular click events.

  Here's an example of what the code could look like with all this implemented.

  <button type="button" class="decrement" aria-label="decrease quantity">
     <img src="/images/icon-minus.svg" alt="" aria-hidden="true">
  </button>
  

  Hope this helps.

  Marked as helpful

  1

  ---

  

  Michael Mushrush•250

  @FloratobyDevPosted almost 2 years ago

  @Victor-Nyagudi Would this code be fine or how would you do it?

  <button type="button" class="decrement" aria-label="add to cart button">
    Add to cart
    <img src="/images/icon-cart.svg" alt="" aria-hidden="true">
  </button>
  

  0
• 

  Vicktor•900

  @Victor-NyagudiPosted almost 2 years ago

  I've also just noticed you tried adding a <p> tag inside a <span>. This is invalid HTML and is what's causing the error in the HTML validation report.

  You used it here inside the ItemCheckout.js component.

  return (<div className="cart-item">
     <div className="img-and-description">
        <img className='cart-item-image' src={props.path} alt="cart-itm" />
        <span className="cart-item-description">
           <p>{props.productName}</p> // <- Here it is
           <p>${props.productPrice} x {props.qty} <span>${props.qty * props.productPrice}</span></p>
        </span>
     </div>
     <img onClick={handleRemoveItem} className='trash' src="/images/icon-delete.svg" alt="" />
      </div>)
  

  Only other inline elements can go inside inline elements. Here's a helpful article on block-level and inline elements that expands on the topic.

  TLDR: Use a <div> to surround a <p> instead of a <span>.

  All the best with future solutions.

  0