filip(fix): apply EAA amends (#2072)

Added aria labels to carousel buttons
Added aria labels to logo links 
Added alt text to homepage images
Updated redundant alt text on Navigation logo image

Adjusted heading order on homepage to ensure sequental ordering

Contrast:
Default ‘hover’/‘selected’/‘active’ colour has too low a contrast ratio
with the white background
across the site 
Footer CTA and copyright have too low a contrast ratio with the white
background on all
non-homepage pages


both currently not in line with 
WCAG AA and AAA standards


**Lighthouse score is now an overall 96 for Accessibility on Homepage
and 92 on all other pages**

Author: noonio

docs/docusaurus.config.js

@@ -161,7 +161,7 @@ const config = {
       navbar: {
         title: "Hydra Head protocol",
         logo: {
-          alt: "Hydra Head protocol",
+          alt: "Hydra Head logo",
           src: "img/hydra.png",
           style: { height: 27, marginTop: 2.5 },
           srcDark: "img/hydra-white.png",
@@ -272,7 +272,7 @@ const config = {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
         additionalLanguages: ["haskell"],
-      }
+      },
     }),
 
   markdown: {

docs/src/components/homepage/Carousel/Carousel.tsx

@@ -21,7 +21,11 @@ const CarouselEntry: FC<Props> = ({ idx, src, description }) => {
   return (
     <div className="flex items-center gap-6 h-full justify-center">
       <div className="basis-[40%]">
-        <img src={src} className="w-full rounded-lg object-cover" />
+        <img
+          src={src}
+          className="w-full rounded-lg object-cover"
+          alt={`How it works panel ${idx}`}
+        />
       </div>
       <div className="flex flex-col gap-4 max-w-md justify-center">
         <h4 className="text-2xl text-primary font-medium">How it works</h4>
@@ -52,11 +56,17 @@ type ControlProps = {
 const Controls: FC<ControlProps> = ({ showing, handlePrev, handleNext }) => {
   return (
     <div className="inline-flex gap-4">
-      <button onClick={handlePrev} disabled={showing < 1}>
+      <button
+        onClick={handlePrev}
+        disabled={showing < 1}
+        aria-label="Previous slide"
+      >
         <Arrow
           className={clsx(
             "rotate-180 rounded-full",
-            showing < 1 ? "text-primary-lightest" : "text-primary hover:bg-primary/15"
+            showing < 1
+              ? "text-primary-lightest"
+              : "text-primary hover:bg-primary/15"
           )}
         />
       </button>
@@ -72,6 +82,7 @@ const Controls: FC<ControlProps> = ({ showing, handlePrev, handleNext }) => {
       <button
         onClick={handleNext}
         disabled={showing > HowItWorksCarouselContent.length - 2}
+        aria-label="Next slide"
       >
         <Arrow
           className={clsx(

docs/src/components/homepage/CaseStudies.tsx

@@ -54,6 +54,7 @@ const CaseStudies: FC = () => {
                   : FeaturedCaseStudy.src
               }
               className="tablet:rounded-2xl rounded-none"
+              alt="Case studies blocks"
             />
           </motion.div>
         </div>

docs/src/components/homepage/Features.tsx

@@ -27,7 +27,7 @@ const Feature: FC<Props> = ({ icon, title, description, index }) => {
     >
       <div className="inline-flex gap-3 border-b pb-4 border-gray [&>*:first-child]:mt-1">
         {icon}
-        <h6 className="text-2xl">{title}</h6>
+        <span className="text-2xl">{title}</span>
       </div>
       <p>{description}</p>
     </motion.div>
@@ -38,8 +38,8 @@ const Features: FC = () => {
   return (
     <section className="component bg-white">
       <div className="pageContainer">
-        <motion.h5
-          className="text-base text-primary pb-14"
+        <motion.h2
+          className="text-base text-primary pb-14 section-label"
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true }}
@@ -50,7 +50,7 @@ const Features: FC = () => {
           }}
         >
           / FEATURES
-        </motion.h5>
+        </motion.h2>
         <motion.div className="grid laptop:grid-cols-3 laptop:grid-rows-2 laptop:grid-flow-row tablet:grid-rows-3 tablet:grid-flow-col gap-x-6 tablet:gap-y-6 laptop:gap-y-14 gap-y-14">
           {FeatureList.map((props, idx) => (
             <Feature key={idx} index={idx} {...props} />

docs/src/components/homepage/Properties.tsx

@@ -47,7 +47,7 @@ const Properties: FC = () => {
       }}
     >
       <div className="component pageContainer flex flex-col">
-        <h5 className="text-base text-white">/ PROPERTIES</h5>
+        <h3 className="text-base text-white section-label">/ PROPERTIES</h3>
         <div className="flex flex-col laptop:flex-row justify-between">
           <div className="pt-14 laptop:pr-14 flex flex-col gap-8">
             {PropertiesContent.map((props, idx) => (

docs/src/components/homepage/WhyHydraHead.tsx

@@ -21,9 +21,9 @@ const WhyHydraHead: FC = () => {
     >
       <div className="grid laptop:flex laptop:flex-row laptop:gap-6">
         <div className="flex flex-col basis-[41%] pt-4 order-2 laptop:-order-1 laptop:w-[472px] laptop:pt-0">
-          <h4 className="text-2xl text-primary font-medium pb-4">
+          <h3 className="text-2xl text-primary font-medium pb-4">
             {WhyHydraHeadContent.title}
-          </h4>
+          </h3>
           <p>{WhyHydraHeadContent.descriptionParagraphOne}</p>
 
           <motion.div
@@ -58,6 +58,7 @@ const WhyHydraHead: FC = () => {
         <div className="hidden basis-[59%] -order-1 laptop:order-2 tablet:block">
           <img
             src="hydra-docs-landing-graphic.png"
+            alt="Hydra Head blockchain flowchart"
             className="border-b border-solid border-primary laptop:border-none"
           />
         </div>

docs/src/css/custom.css

@@ -104,6 +104,10 @@ h4 {
   font-family: "Lexend";
 }
 
+.section-label {
+  font-family: "Inter";
+}
+
 h5,
 h6 {
   font-family: "Inter";

docs/src/theme/Navbar/Content/index.js

@@ -74,6 +74,7 @@ export default function NavbarContent() {
             target="_blank"
             rel="noopener noreferrer"
             className="hover:text-primary-light mx-3 py-1"
+            aria-label="Github link"
           >
             <GithubSmall />
           </a>
@@ -82,6 +83,7 @@ export default function NavbarContent() {
             target="_blank"
             rel="noopener noreferrer"
             className="hover:text-primary-light mx-3 py-1"
+            aria-label="Discord link"
           >
             <Discord />
           </a>

docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js

@@ -37,6 +37,7 @@ export default function NavbarMobilePrimaryMenu() {
         target="_blank"
         rel="noopener noreferrer"
         className="hover:text-primary-light mx-3 py-1 inline-flex gap-3"
+        aria-label="Github link"
       >
         <GithubSmall /> Github
       </a>
@@ -45,6 +46,7 @@ export default function NavbarMobilePrimaryMenu() {
         target="_blank"
         rel="noopener noreferrer"
         className="hover:text-primary-light mx-3 py-1 inline-flex gap-3"
+        aria-label="Discord link"
       >
         <Discord className="mt-1" /> Discord
       </a>