Responsive E-commerce Page using ReactJS and SASS
Design comparison
Solution retrospective
Is it EASIER to do Mobile-first or Desktop-first? Thoughts? What tips can you provide when building a website that helped you save a lot of time in the past? What plugins do you have that vastly help with your front-end development? What's your approach when structuring/styling a complex project?
Thanks for the feedback, in advance! Appreciate it.
Community feedback
- @Victor-NyagudiPosted about 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 emptyalt
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 helpful1@FloratobyDevPosted about 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 - @Victor-NyagudiPosted about 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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord