Fix accessibility issues (#192)

* feat: make footer icons accessible * feat: add labels to opening and closing icons for mobile nav * feat: add labels to back and front btns * fix: make heading levels increase only by one * fix: make heading levels increase only by one * feat: add btn labels * feat: add btn labels * fix: make heading levels increase only by one * fix: remove code block around comment * fix: add alt prop to photosData * fix: make heading levels increase only by one * fix: make heading levels increase only by one * feat: add label to video player * chore: create captions for syt promotional video * feat: add captions to promotional video * fix: make heading levels increase only by one * fix: make heading levels increase only by one * chore: replace h3 tag with p * chore: formatting * fix: make heading levels increase only by one * chore: replace h5 tag with p * chore: formatting --------- Co-authored-by: sonylomo <[email protected]>
SpaceyaTech · Jun 18, 2024 · 3dd0484 · 3dd0484
1 parent e28455a
commit 3dd0484
Show file tree

Hide file tree

Showing 32 changed files with 161 additions and 84 deletions.
diff --git a/src/APP/components/Button.jsx b/src/APP/components/Button.jsx
@@ -4,7 +4,12 @@ import { FiArrowRightCircle } from "react-icons/fi";
 
 function Button({ link, title }) {
   return (
-    <Link to={link} className="border rounded-full bg-white p-1 w-fit">
+    <Link
+      to={link}
+      role="button"
+      aria-label={title}
+      className="border rounded-full bg-white p-1 w-fit"
+    >
       <div className="flex-center bg-green-light rounded-full px-3 py-1.5 gap-2">
         <span className="capitalize text-green-header text-sm font-semibold">
           {title}

diff --git a/src/APP/components/Caroussel.jsx b/src/APP/components/Caroussel.jsx
@@ -71,10 +71,18 @@ function Caroussel({ CarousselData }) {
         ))}
       </div>
       <div className="flex justify-center gap-4">
-        <button type="button" onClick={() => scroll(-400)}>
+        <button
+          type="button"
+          aria-label="back button"
+          onClick={() => scroll(-400)}
+        >
           <PiArrowCircleLeft className="text-green-header size-16" />
         </button>
-        <button type="button" onClick={() => scroll(400)}>
+        <button
+          type="button"
+          aria-label="forward button"
+          onClick={() => scroll(400)}
+        >
           <PiArrowCircleRight className="text-green-header size-16" />
         </button>
       </div>

diff --git a/src/APP/components/FAQ.jsx b/src/APP/components/FAQ.jsx
@@ -22,6 +22,7 @@ function FAQ() {
         >
           <h2 className="mb-4 font-semibold" id={`flush-heading${index + 1}`}>
             <button
+              aria-label={question.question}
               className={`group relative flex w-full items-center rounded-none border-0 py-4 px-5 text-left text-base transition ${
                 activeQuestion === index
                   ? ""

diff --git a/src/APP/components/Footer.jsx b/src/APP/components/Footer.jsx
@@ -16,33 +16,39 @@ import logo from "../../assets/images/sytLogo.png";
 const socialLinks = [
   {
     href: "https://www.facebook.com/spaceyatech",
-    icon: <FaFacebook size="1.6em" />,
+    icon: <FaFacebook aria-label="Facebook page link" size="1.6em" />,
     alt: "facebook",
+    label: "Facebook page link",
   },
   {
     href: "https://www.instagram.com/spaceyatech/",
-    icon: <FaInstagram size="1.5em" />,
+    icon: <FaInstagram aria-label="Instagram page link" size="1.5em" />,
     alt: "instagram",
+    label: "Instagram page link",
   },
   {
     href: "https://x.com/SpaceYaTech",
-    icon: <FaXTwitter size="1.5em" />,
+    icon: <FaXTwitter aria-label="Twitter handle" size="1.5em" />,
     alt: "twitter",
+    label: "Twitter handle",
   },
   {
     href: "https://linkedin.com/company/spaceyatech",
-    icon: <FaLinkedin size="1.5em" />,
+    icon: <FaLinkedin aria-label="LinkedIn page link" size="1.5em" />,
     alt: "linkedIn",
+    label: "LinkedIn page link",
   },
   {
     href: "https://www.youtube.com/@spaceyatech",
-    icon: <FaYoutube size="1.5em" />,
+    icon: <FaYoutube aria-label="YouTube channel link" size="1.5em" />,
     alt: "youtube",
+    label: "YouTube channel link",
   },
   {
     href: "https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n",
-    icon: <FaSpotify size="1.5em" />,
+    icon: <FaSpotify aria-label="Spotify profile link" size="1.5em" />,
     alt: "spotify",
+    label: "Spotify profile link",
   },
 ];
 
@@ -99,6 +105,7 @@ function Footer() {
                   href={link.href}
                   target="_blank"
                   rel="noopener noreferrer"
+                  aria-label={link.label}
                   className="w-7 h-7 text-white"
                 >
                   {link.icon}

diff --git a/src/APP/components/Header.jsx b/src/APP/components/Header.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Link, useLocation } from "react-router-dom";
-import { AiOutlineClose } from "react-icons/ai"; 
+import { AiOutlineClose } from "react-icons/ai";
 import { HiOutlineMenuAlt4 } from "react-icons/hi";
 
 import logo from "../../assets/images/sytLogo.png";
@@ -66,6 +66,7 @@ function Header() {
         {showNavlinks ? (
           <button
             type="button"
+            aria-label="Close menu"
             className="md:hidden"
             onClick={() => setShowNavlinks(false)}
           >
@@ -75,10 +76,14 @@ function Header() {
         ) : (
           <button
             type="button"
+            aria-label="Open menu"
             className="md:hidden"
             onClick={() => setShowNavlinks(true)}
           >
-            <HiOutlineMenuAlt4 className="h-6 w-6 text-white" aria-hidden="true" />{" "}
+            <HiOutlineMenuAlt4
+              className="h-6 w-6 text-white"
+              aria-hidden="true"
+            />{" "}
             {/* Menu Icon */}
           </button>
         )}

diff --git a/src/APP/components/LandingWrapper.jsx b/src/APP/components/LandingWrapper.jsx
@@ -6,9 +6,9 @@ function LandingWrapper({ children, title }) {
     <section className="flex flex-col gap-4 md:gap-8 my-10 md:my-20">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h4 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           {title}
-        </h4>
+        </h2>
         <div className="w-full h-0.5 bg-gray-300" />
       </div>
       {children}

diff --git a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
@@ -2,7 +2,7 @@ import emailjs from "@emailjs/browser";
 import { Dialog, Transition } from "@headlessui/react";
 import React, { Fragment, useState, useRef } from "react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
-import { AiOutlineClose } from "react-icons/ai";  // Import react-icons
+import { AiOutlineClose } from "react-icons/ai"; // Import react-icons
 
 import { PartnerWithUs } from "../../../../assets/images/aboutPage";
 import { Caroussel } from "../../../components";
@@ -76,16 +76,16 @@ function LeadershipSection() {
     <section className="pt-16 sm:pt-0 pb-10 mx-auto w-full max-w-screen-2xl sm:mt-24 px-4 md:px-0">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 my-6">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h4 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           Our leadership
-        </h4>
+        </h2>
         <div className="w-full h-0.5 bg-gray-300" />
       </div>
 
-      <h2 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
+      <h3 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
         A community is only as good
         <br /> as the leadership
-      </h2>
+      </h3>
 
       <Caroussel CarousselData={LeadershipData} />
       <div className="border bg-white p-2 w-full rounded-2xl md:rounded-[20px] lg:col-span-2 mt-12">
@@ -99,13 +99,13 @@ function LeadershipSection() {
             />
           </div>
           <div className="space-y-4 md:w-1/2 px-6 flex flex-col justify-center md:my-0 my-6">
-            <h3 className="w-fit text-green-dark text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+            <h2 className="w-fit text-green-dark text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
               Partner with us
-            </h3>
-            <h4 className="md:text-3xl text-2xl font-semibold text-green-dark leading-8 md:leading-10">
+            </h2>
+            <h3 className="md:text-3xl text-2xl font-semibold text-green-dark leading-8 md:leading-10">
               We collaborate with similar organizations to develop Africa’s
               skilled workforce
-            </h4>
+            </h3>
             <p className="leading-6 text-base md:mr-5">
               Our main focus is on building tech capacity. We collaborate with
               individuals, organizations, and public institutions to mentor and
@@ -117,6 +117,7 @@ function LeadershipSection() {
 
             <button
               type="button"
+              aria-label="Partner with us"
               onClick={openModal}
               className="text-white bg-gradient-to-b to-primary from-green-dark border-0 py-3 px-4 md:px-8 focus:outline-none rounded-lg text-sm md:text-base w-fit text-center"
             >
@@ -154,7 +155,11 @@ function LeadershipSection() {
                       leaveTo="opacity-0 scale-95"
                     >
                       <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-md bg-white p-4 md:p-6 text-left align-middle shadow-xl transition-all flex flex-col items-end gap-4">
-                        <button type="button" onClick={closeModal}>
+                        <button
+                          type="button"
+                          aria-label="Close modal"
+                          onClick={closeModal}
+                        >
                           <AiOutlineClose className="w-4 h-4" />
                         </button>
                         <form
@@ -217,6 +222,7 @@ function LeadershipSection() {
 
                           <button
                             type="submit"
+                            aria-label="Submit message"
                             className="w-fit inline-flex justify-center rounded-lg border border-transparent bg-primary px-8 py-2 text-base font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2"
                           >
                             {loading ? "Submitting..." : "Submit"}

diff --git a/src/APP/pages/aboutUs/sections/MissionVisionSection.jsx b/src/APP/pages/aboutUs/sections/MissionVisionSection.jsx
@@ -6,9 +6,9 @@ function MissionVisionSection() {
     <div className="max-w-screen-xl mx-auto mt-24 px-4 md:px-0">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 my-8">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h4 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           A bit more about us
-        </h4>
+        </h2>
         <div className="w-full h-0.5 bg-gray-300" />
       </div>
       <div className="border bg-white p-2 w-full rounded-2xl md:rounded-[20px] lg:col-span-2">
@@ -44,9 +44,9 @@ function MissionVisionSection() {
         <div className="border bg-white p-2 w-full rounded-2xl md:rounded-[20px] lg:col-span-2">
           <div className="bg-green-light rounded-lg md:rounded-xl size-full flex items-center justify-between flex-row p-3 sm:p-6 md:py-20 md:gap-5">
             <div className="flex-center md:flex-start flex-col p-3 sm:p-8 gap-3">
-              <h4 className="text-green-header capitalize text-base md:text-xl font-semibold text-center md:text-start">
+              <h3 className="text-green-header capitalize text-base md:text-xl font-semibold text-center md:text-start">
                 Our Mission
-              </h4>
+              </h3>
 
               <p className="text-sm md:text-base font-normal text-center md:text-start">
                 To help 10,000 young Africans to transition to tech in the next
@@ -59,9 +59,9 @@ function MissionVisionSection() {
         <div className="border bg-white p-2 w-full rounded-2xl md:rounded-[20px] lg:col-span-2">
           <div className="bg-green-light rounded-lg md:rounded-xl size-full flex items-center justify-between flex-row p-3 sm:p-6 md:py-20 md:gap-5">
             <div className="flex-center md:flex-start flex-col p-3 sm:p-8 gap-3">
-              <h4 className="text-green-header capitalize text-base md:text-xl font-semibold text-center md:text-start">
+              <h3 className="text-green-header capitalize text-base md:text-xl font-semibold text-center md:text-start">
                 Our Vision
-              </h4>
+              </h3>
 
               <p className="text-sm md:text-base font-normal text-center md:text-start">
                 To be the best tech community, focused on innovation and

diff --git a/src/APP/pages/blog2/sections/BlogHeader.jsx b/src/APP/pages/blog2/sections/BlogHeader.jsx
@@ -33,7 +33,7 @@ function BlogHeader({
         </p>
 
         <div className="flex items-center gap-2 mt-5 md:my-3">
-          <LazyLoadImage 
+          <LazyLoadImage
             src={logo}
             alt={author}
             className="w-10 h-10 object-cover rounded-full flex items-center justify-center"
@@ -48,7 +48,7 @@ function BlogHeader({
       </div>
 
       <div className="flex flex-col gap-4 py-5">
-        <LazyLoadImage 
+        <LazyLoadImage
           src={image}
           alt={title}
           className="object-contain overflow-hidden w-full lg:rounded-xl px-4 md:px-0"

diff --git a/src/APP/pages/blog2/sections/NextRead.jsx b/src/APP/pages/blog2/sections/NextRead.jsx
@@ -27,9 +27,9 @@ function NextRead() {
 
   return (
     <div className="mx-auto max-w-[924px] flex flex-col gap-6 items-center px-0 md:px-3 w-full mt-10">
-      <h4 className="text-xl md:text-2xl font-semibold leading-normal">
+      <h2 className="text-xl md:text-2xl font-semibold leading-normal">
         You might like these
-      </h4>
+      </h2>
 
       <div className="flex items-center md:justify-between gap-1 md:gap-5 w-full">
         {/* left */}

diff --git a/src/APP/pages/blog2/sections/RelatedBlogCard.jsx b/src/APP/pages/blog2/sections/RelatedBlogCard.jsx
@@ -13,7 +13,7 @@ function RelatedBlogCard({ blog }) {
       className="flex flex-row items-center gap-2 w-64"
       to={`/blogs2/${blog.title_slug}`}
     >
-      <LazyLoadImage 
+      <LazyLoadImage
         src={`https://apis.spaceyatech.com${blog.image}`}
         alt={blog.title}
         className="object-cover h-20 w-20"

diff --git a/src/APP/pages/blog2/sections/RelatedBlogs.jsx b/src/APP/pages/blog2/sections/RelatedBlogs.jsx
@@ -33,11 +33,11 @@ function RelatedBlogs({ blogId, categoryId }) {
 
       {isSuccess && filteredRelatedBlogs.length > 0 && (
         <div className="flex flex-col gap-4">
-          <h3 className="text-[#29CC6A] text-lg font-bold leading-normal">
+          <h2 className="text-[#29CC6A] text-lg font-bold leading-normal">
             {filteredRelatedBlogs.length > 1
               ? "Related Articles"
               : "Related Article"}
-          </h3>
+          </h2>
           <div className="flex flex-col gap-4">
             {Array.isArray(filteredRelatedBlogs) &&
             filteredRelatedBlogs.length > 0 ? (

diff --git a/src/APP/pages/blog2/sections/ShareBlog.jsx b/src/APP/pages/blog2/sections/ShareBlog.jsx
@@ -16,7 +16,7 @@ import {
 function ShareBlog({ url, title }) {
   return (
     <div className="flex flex-row items-center gap-4">
-      <h3 className="text-primary uppercase font-normal">share it</h3>
+      <p className="text-primary uppercase font-normal">share it</p>
 
       <WhatsappShareButton
         url={url}

diff --git a/src/APP/pages/blogs/sections/Banner.jsx b/src/APP/pages/blogs/sections/Banner.jsx
@@ -10,7 +10,7 @@ function Banner() {
   return (
     <div className="relative bg-blog-image bg-cover bg-center bg-no-repeat h-60 w-full">
       <div className="absolute inset-0 flex flex-col gap-4 md:gap-8 items-center justify-center w-[80%] mx-auto md:w-[716px]">
-        <h2 className="text-3xl font-normal text-white">Blogs</h2>
+        <h1 className="text-3xl font-normal text-white">Blogs</h1>
 
         <form className="flex items-center border-2 border-white px-4 py-2 md:py-3 rounded-full w-full gap-1">
           <input
@@ -25,7 +25,7 @@ function Banner() {
             className="w-1/10 p-2"
             onClick={(e) => e.preventDefault()}
           >
-            <LazyLoadImage  src={search} alt="search" className="w-6 h-6" />
+            <LazyLoadImage src={search} alt="search" className="w-6 h-6" />
           </button>
         </form>
       </div>

diff --git a/src/APP/pages/blogs/sections/FeaturedBlogs.jsx b/src/APP/pages/blogs/sections/FeaturedBlogs.jsx
@@ -45,7 +45,7 @@ function FeaturedBlogCard({ blog, currentIndex, handleToggle }) {
         backgroundImage: `linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url("${blog.image}")`,
       }}
     >
-      <h4 className="text-primary text-base md:text-2xl font-bold">Featured</h4>
+      <h2 className="text-primary text-base md:text-2xl font-bold">Featured</h2>
       <div className="flex space-x-8 text-white w-full flex-row">
         <div className="flex-1 flex flex-col gap-3">
           <Link

diff --git a/src/APP/pages/community/sections/gallerySection/GallerySection.jsx b/src/APP/pages/community/sections/gallerySection/GallerySection.jsx
@@ -8,15 +8,15 @@ function GallerySection() {
     <div className="pb-10 sm:pb-24 text-center">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 my-8">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h3 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           Our Gallery
-        </h3>
+        </h2>
         <div className="w-full h-0.5 bg-gray-300" />
       </div>
-      <h2 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
+      <h3 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
         A memory bank of our special
         <br /> moments
-      </h2>
+      </h3>
       <div className="overflow-x-auto flex gap-8 mt-10">
         {photosData.slice(0, 6).map((photo) => (
           <LazyLoadImage

diff --git a/src/APP/pages/events/sections/eventsSection/EventsSection.jsx b/src/APP/pages/events/sections/eventsSection/EventsSection.jsx
@@ -48,16 +48,16 @@ function EventsSection({ showTabs, showAllEventsLink }) {
     <section className="py-2 md:py-6 size-full ">
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4 my-8">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
-        <h3 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
+        <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">
           Our Events
-        </h3>
+        </h2>
         <div className="w-full h-0.5 bg-gray-300" />
       </div>
 
-      <h4 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
+      <h3 className="md:text-3xl text-2xl font-semibold title-font text-green-dark text-center">
         Notable events within the <br />
         SpaceYaTech ecosphere
-      </h4>
+      </h3>
       {isError && <Error500 />}
       {isPending && (
         <div className="flex flex-col items-center justify-center gap-4 py-10">

diff --git a/src/APP/pages/gallery/data.js b/src/APP/pages/gallery/data.js
@@ -237,6 +237,7 @@ const photosData = photos.map((photo) => ({
   }),
   date: "15/04/2023",
   event: "DevOps Nairobi",
+  alt: photo.alt,
 }));
 
 export default photosData;