Huddle landing page with a single introductory section

Community feedback

• 

  Josh Javier•830

  @joshjavierPosted over 1 year ago

  Hello NixyMc! 👋

  Good job on your solution. Your markup is organized and easy to read from a developer's POV. I see you used BEM for classes and CSS custom properties, which definitely helps with code maintainability. 💯

  In terms of keyboard accessibility, I think the social links at the footer can be improved. I'm able to see the correct active state when I hover over the icons, but not when I press the Tab key to cycle through them. This is because you added the hover animation to the icon inside the link, which is not an interactive element. When using the Tab key, the <a> element is being focused, but not the icon inside of it. You can fix this by adding the .social__link selector to your hover styles.

  For example (a bit wordy, but it works):

  .social__link:hover .social__link__icon,
  .social__link:hover .social__link__icon::after,
  .social__link:focus-visible .social__link__icon,
  .social__link:focus-visible .social__link__icon::after {
  color: var(--icon-hov);
  border-color: var(--icon-hov);
  }
  

  Even better, I recommend checking Sara Soueidan's article on Accessible Icon Buttons for a better implementation you can apply to your projects.

  Hope it helps, happy coding!

  Marked as helpful

  1

  ---

  

  NixyMc•190

  @Nix7amcmPosted over 1 year ago

  Aww good catch @joshjavier! I normally check this but totally missed it this time, I was focusing on the layout so much, it was pretty tricky matching the design perfectly!

  Thanks so much :)

  1