Huddle landing page with alternating feature blocks- Styled Components

@5hraddha hey shraddha, how did u deploy it again? i dont know how to deploy my css again?

Hey @anoshaahmed, Yeah, I deployed the code again. I use gh-pages package from npm to deploy my React apps. You could follow the steps given in this article to do so. Let me know if you have any issues, I would be glad to help.

@5hraddha tysm!

@5hraddha soon i will deploy my react app using Gh-pages

@anoshaahmed Hey, Anosha, I actually fixed the accessibility issues yesterday and have pushed the code to Github (you could check that). I have been trying to regenerate the report but the report is not getting refreshed.

Any idea how to do that? It would be of great help. Thank you!!

@5hraddha Hi! Shraddha, click on report first then new page appears just after your current tab then there you will see an option to regenerate report, just click on that, booom! It will generate new report.

Hey @skyv26, Thanks for your suggestion. It is weird that I have re-generated report for five times now as you have suggested and I do not see any changes getting reflected. I am sure there is something that is missing. 🤦‍♀️

If you could please have a look on the Styled Components, it will be of great help. I have used it for the first time and want to understand how to improve upon..

Thank you!

@5hraddha Dear, as I can see you have not added

aria-label attribute in your

<a href="https://twitter.com">
<a href="https://facebook.com">
<a href="https://linkedin.com">

update above with

<a href="https://twitter.com" aria-label="Twitter link for communication">
<a href="https://facebook.com" aria-label="Facebook link for communication">
<a href="https://linkedin.com" aria-label="Linkedin link for communication">

1. Somewhere in your code you are using <li> alone without using either <ul> or <ol> tag

Check your code carefully.

Hey @skyv26,

Well, I am confused. This is what my component looks as of now:

import React from 'react';
import {
  FaTwitter,
  FaFacebook,
  FaLinkedin
} from 'react-icons/fa';
import * as Styled from './styles';

function SocialIcons() {
  return (
    <Styled.SocialIcons>
      <ul>
        <li>
          <a href="https://twitter.com" aria-label="Twitter">
            <FaTwitter />
          </a>
        </li>
        <li>
          <a href="https://facebook.com" aria-label="Facebook">
            <FaFacebook />
          </a>
        </li>
        <li>
          <a href="https://linkedin.com" aria-label="LinkedIn">
            <FaLinkedin />
          </a>
        </li>
      </ul>
    </Styled.SocialIcons>
  );
}

export default SocialIcons;

Does that not solve the accessibility issue? I am clueless now..

@5hraddha As I can see your updated code is not deployed on Github pages, try to deploy again. Your githubpages is running old deployed file. You can verify it by inspecting your code. Like in above snippet you add <ul> but in deployed inspection, you will not able to see <ul> tag and rest all is visible.