Article preview

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Axel! 👋

  First, I recommend visiting the Solid Start website. That website will give you general information about web accessibility.

  Here are some suggestions for improvements.

  • The share button should be a button element.
  • The click event should be on the interactive element (which is the button element).
  • Wrap each of the social media icons with an anchor tag.
  • I recommend adding rel="noopener" to any anchor tags that have target="_blank". It helps protect users of legacy browsers. I suggest reading "Links to cross-origin destinations are unsafe" article to learn more about this.
  • Avoid using JavaScript to add styling (unless you have no other option). JavaScript allows you to change the CSS code using the style property. But, to make debugging easier and improve code maintainability, it’s best to avoid it. Use CSS classes instead.

  I hope this helps! Happy coding!

  Marked as helpful

  2

  ---

  

  Axel•250

  @AxlMrtPosted about 2 years ago

  @vanzasetia

  Hi Vanza, and thank you for the feedback ! It helps a lot !

  There is still something i forgot to mention, if you have a few minutes. Can you explain how to change the color of the Share Icon ? This was a big struggle and I just leave it as it was.

  Thank you again !

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @ADotBit

  You are welcome! 👍

  To change the color for any SVG, I recommend using inline SVG. After that, add the following CSS to make the SVG inherit the color of the parent element.

  svg path {
    fill: currentColor;
  }
  

  Then, all you need to do is to define the color of the parent element.

  .share {
    color: white; /* this makes the share icon to be white */
  }
  

  Marked as helpful

  2
• 

  Carlos E Alford•285

  @webshurikenPosted about 2 years ago

  Hi Axel, Like what you have done so far. I just have one more point of feedback.

  • The whole component should have been wrapped in a single tag so that you can reuse it if there are more cards to add. So let's say moving everything inside the <section> tag, this way all the related card component elements are housed together.

  Hope it makes sense. :)

  Marked as helpful

  1