improve accessibility

Author: harsh-vador

components/ConnectorsInfo/ConnectorsInfo.tsx

@@ -1,16 +1,16 @@
 import classNames from "classnames";
-import { uniqBy } from "lodash";
+import {uniqBy} from "lodash";
 import dynamic from "next/dynamic";
 import Link from "next/link";
-import { useState } from "react";
-import { useDocVersionContext } from "../../context/DocVersionContext";
+import {useState} from "react";
+import {useDocVersionContext} from "../../context/DocVersionContext";
 import {
   getConnectorURL,
   getSortedServiceList,
 } from "../../utils/ConnectorsUtils";
 import Loader from "../common/Loader/Loader";
-import { CONNECTORS } from "./ConnectorsInfo.constants";
-import { ConnectorCategory } from "./ConnectorsInfo.interface";
+import {CONNECTORS} from "./ConnectorsInfo.constants";
+import {ConnectorCategory} from "./ConnectorsInfo.interface";
 import styles from "./ConnectorsInfo.module.css";
 
 const ConnectorImage = dynamic(() => import("./ConnectorImage"), {
@@ -26,7 +26,7 @@ CONNECTORS.unshift({
 });
 
 export default function ConnectorsInfo() {
-  const { docVersion } = useDocVersionContext();
+  const {docVersion} = useDocVersionContext();
   const [selectedTab, setSelectedTab] = useState<ConnectorCategory>(
     CONNECTORS[0]
   );
@@ -60,7 +60,7 @@ export default function ConnectorsInfo() {
               <ConnectorImage
                 className={styles.ConnectorImg}
                 src={connector.icon}
-                alt={connector.name}
+                alt={`${connector.name}-icon`}
               />
               <p>{connector.name}</p>
             </Link>

components/Footer/Footer.tsx

@@ -27,7 +27,12 @@ export default function Footer() {
         </nav>
         <section className={styles.SocialNetworks}>
           {footerIconItemsData.map((item) => (
-            <Link href={item.href} key={item.href} target="_blank">
+            <Link
+              href={item.href}
+              key={item.href}
+              target="_blank"
+              aria-label={item.href}
+            >
               {item.icon}
             </Link>
           ))}

components/TopNav/TopNav.tsx

@@ -1,27 +1,27 @@
 import algoliasearch from "algoliasearch/lite";
 import classNames from "classnames";
-import { isEmpty, isString } from "lodash";
+import {isEmpty, isString} from "lodash";
 import Link from "next/link";
-import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
-import { MdMenu, MdMenuOpen } from "react-icons/md";
-import { InstantSearch } from "react-instantsearch";
+import {useRouter} from "next/router";
+import {useCallback, useEffect, useState} from "react";
+import {MdMenu, MdMenuOpen} from "react-icons/md";
+import {InstantSearch} from "react-instantsearch";
 import {
   DEFAULT_VERSION,
   REGEX_VERSION_MATCH,
   REGEX_VERSION_MATCH_WITH_SLASH_AT_START,
 } from "../../constants/version.constants";
-import { useDocVersionContext } from "../../context/DocVersionContext";
-import { useNavBarCollapsedContext } from "../../context/NavBarCollapseContext";
-import { SearchContextProvider } from "../../context/SearchContext";
-import { ReactComponent as ApiIcon } from "../../images/icons/api.svg";
-import { ReactComponent as CloudIcon } from "../../images/icons/cloud.svg";
-import { ReactComponent as GithubIcon } from "../../images/icons/github.svg";
-import { ReactComponent as OMDIcon } from "../../images/icons/omd.svg";
-import { ReactComponent as SlackIcon } from "../../images/icons/slack.svg";
-import { getUrlWithVersion } from "../../utils/CommonUtils";
+import {useDocVersionContext} from "../../context/DocVersionContext";
+import {useNavBarCollapsedContext} from "../../context/NavBarCollapseContext";
+import {SearchContextProvider} from "../../context/SearchContext";
+import {ReactComponent as ApiIcon} from "../../images/icons/api.svg";
+import {ReactComponent as CloudIcon} from "../../images/icons/cloud.svg";
+import {ReactComponent as GithubIcon} from "../../images/icons/github.svg";
+import {ReactComponent as OMDIcon} from "../../images/icons/omd.svg";
+import {ReactComponent as SlackIcon} from "../../images/icons/slack.svg";
+import {getUrlWithVersion} from "../../utils/CommonUtils";
 import Search from "../Search/Search";
-import SelectDropdown, { SelectOption } from "../SelectDropdown/SelectDropdown";
+import SelectDropdown, {SelectOption} from "../SelectDropdown/SelectDropdown";
 import styles from "./TopNav.module.css";
 
 const searchClient = algoliasearch(
@@ -33,12 +33,12 @@ interface TopNavProps {
   versionsList: Array<SelectOption<string>>;
 }
 
-export default function TopNav({ versionsList }: Readonly<TopNavProps>) {
+export default function TopNav({versionsList}: Readonly<TopNavProps>) {
   const router = useRouter();
   const [displayNavBarCollapseButton, setDisplayNavBarCollapseButton] =
     useState(false);
-  const { docVersion, onChangeDocVersion } = useDocVersionContext();
-  const { navBarCollapsed, onChangeNavBarCollapsed } =
+  const {docVersion, onChangeDocVersion} = useDocVersionContext();
+  const {navBarCollapsed, onChangeNavBarCollapsed} =
     useNavBarCollapsedContext();
 
   const handleVersionChange = (value: string) => {
@@ -87,7 +87,10 @@ export default function TopNav({ versionsList }: Readonly<TopNavProps>) {
     >
       <div className={styles.CollapsedDivContainer}>
         <div className={styles.LogoContainer}>
-          <Link href={docVersion ? getUrlWithVersion("/", docVersion) : "/"}>
+          <Link
+            href={docVersion ? getUrlWithVersion("/", docVersion) : "/"}
+            aria-label="omd-icon"
+          >
             <OMDIcon />
           </Link>
           {!isEmpty(versionsList) && (
@@ -136,8 +139,9 @@ export default function TopNav({ versionsList }: Readonly<TopNavProps>) {
           className="btn fw-500 btn-primary rounded-pill"
           href="https://cloud.getcollate.io"
           target="_blank"
+          aria-label="cloud-icon"
         >
-          <button className={styles.CloudBtn}>
+          <button className={styles.CloudBtn} aria-label="cloud-icon">
             <CloudIcon />
           </button>
         </a>