Order summary component

Community feedback

• Account deleted

  Hi Adan, your component look super nice 🤩 I'm not a pro, but I have two suggestions for you :

  • Instead of < article class="main-container"> you can just use <main>. It will also correct your accessibility issue.

  • Keep the alt text on your images, but let them empty as they are just decorative. Alt text is here to be helpful with accessibility and give a nice image's description. For example : <img src="./images/pattern-background-desktop.svg" alt="bg" />, here "bg" don't give any useful information, you can let the alt empty then.

  Hope it can help you. Have a nice day ☺️

  Marked as helpful

  2

  ---

  

  Adan Saavedra•250

  @AdanSaavedraPosted over 2 years ago

  @CarolineLienard Thanks for these suggestion Caroline, they are so helpful for me👍🏾😊

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there, Adan! 👋

  I recommend making the pattern-background as a background image of the body element instead of an actual img element.

  In addition to @CarolineLienard feedback about the alternative text for an image, it should not be hyphenated (like code) and it should not contain any words that are related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element. 🙂

  <h1 class="plan-item">Annual Plan</h1> should be a h2 instead.

  change-item and cancel-item should be interactive elements instead of paragraph elements. It has interactivity so it should be an interactive element.

  Always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly.

  By default, the font size is 16px so you don't need to specify it.

  To make the card perfectly in the middle of the page, you can make the body element as a flexbox container and then remove any absolute positioning. Currently, on mobile view, the page has a horizontal scrollbar.

  Hope this helps.

  Marked as helpful

  1

  ---

  

  Adan Saavedra•250

  @AdanSaavedraPosted over 2 years ago

  @vanzasetia thanks for your feedback Vanza, it have a lot of information and improvements that I need to do. When you said "it should be an interactive element" i understand it like it should be a button, right? Im really thankful with your comment, because you have remember me basic things that I have forget like put the type of the button, or the default font size is already 16px, thanks for all of that, I will be pay more attention to those details.👍🏾😁

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @AdanSaavedra You're welcome! For the interactive element, it depends on what you think is going to happen after a user clicks it. Is it going to toggle a modal or navigate to another page?

  0