added code for accessibility

Technigo · Jun 20, 2024 · ba4f6fe · ba4f6fe
1 parent 7e89f91
commit ba4f6fe
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 24 deletions.
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
@@ -8,7 +8,7 @@ export const Carousel = () => {
 
   return (
     <CarouselContainer {...handlers} className="carousel">
-      {testimonial.map(({ testimonialImage, priceCardImage, id }) => (
+      {testimonial.map(({ testimonialImage, id }) => (
         <Slide key={id} translateValue={translateValue}>
           <CarouselTestimonials>
             <Image

diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -12,7 +12,7 @@ export const Contact = () => {
             <h1>Not sure what to choose?</h1>
             <p>We are happy to help. Let’s chat!</p>
           </ContactText>
-          <Button>Start a chat</Button>
+          <Button aria-label="Start a chat">Start a chat</Button>
         </ContactContent>
       </ContactWrapper>
     </>

diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
@@ -18,16 +18,21 @@ export const Dropdown = () => {
 
   return (
     <SelectContainer>
-      <DropdownButton onClick={toggleDropdown}>
-        <DropdownMenu src={menuIcon} alt="Navigation bar menu" open={isOpen} />
+      <DropdownButton
+        onClick={toggleDropdown}
+        aria-haspopup="true"
+        aria-expanded={isOpen}>
+        <DropdownMenu src={menuIcon} alt="Navigation bar menu" />
       </DropdownButton>
 
-      <OptionsContainer open={isOpen}>
-        <VectorBtn onClick={toggleDropdown}>
-          <VectorImg src={vector} />
+      <OptionsContainer open={isOpen} role="menu" aria-label="Options">
+        <VectorBtn onClick={toggleDropdown} aria-label="Close menu">
+          <VectorImg src={vector} alt="" />
         </VectorBtn>
         {options.map((option) => (
-          <Option key={option.value}>{option.label}</Option>
+          <Option key={option.value} role="menuitem" tabIndex="0" onClick={toggleDropdown}>
+            {option.label}
+          </Option>
         ))}
       </OptionsContainer>
     </SelectContainer>
@@ -93,8 +98,9 @@ const VectorImg = styled.img`
   height: 12px;
   padding-left: 125px;
   padding-top: 6px;
-  @media (min-width: 1200px){
-    display: none;}
+  @media (min-width: 1200px) {
+    display: none;
+  }
 `;
 
 const Option = styled.div`

diff --git a/src/components/Fonts.jsx b/src/components/Fonts.jsx
@@ -4,7 +4,7 @@ import { createGlobalStyle } from "styled-components";
 export const Fonts = () => {
   return (
     <>
-    <GlobalFonts></GlobalFonts>
+    <GlobalFonts/>
     </>
   )
 }

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -15,15 +15,17 @@ export const Footer = () => {
           Learn, Laugh, and<br></br>Connect on the Slopes!
         </h1>
       </FooterText>
-      <FooterList>About us</FooterList>
-      <FooterList>FAQ</FooterList>
-      <FooterList>Privacy Policy</FooterList>
-      <FooterList>Terms and conditions</FooterList>
+      <nav aria-label="Footer Navigation">
+        <FooterList href="#about-us">About us</FooterList>
+        <FooterList href="#faq">FAQ</FooterList>
+        <FooterList href="#privacy-policy">Privacy Policy</FooterList>
+        <FooterList href="#terms-and-conditions">Terms and conditions</FooterList>
+      </nav>
       <FollowUs>
         <Icons>
-          <FooterList>Follow us</FooterList>
-          <IconImage src={facebook} />
-          <IconImage src={instagram} />
+          <FooterList href="#follow-us">Follow us</FooterList>
+          <IconImage src={facebook} alt="Facebook icon"/>
+          <IconImage src={instagram} alt="Instagram icon"/>
         </Icons>
         <Language>
           <FooterList>EN</FooterList>

diff --git a/src/components/HeaderNavbar.jsx b/src/components/HeaderNavbar.jsx
@@ -6,7 +6,7 @@ export const HeaderNavbar = () => {
   return (
     <>
       <Navbar>
-        <NavbarLogo src={navbarLogo} />
+        <NavbarLogo src={navbarLogo} alt="Company logo" />
         <Dropdown />
       </Navbar>
     </>

diff --git a/src/components/OurLessons.jsx b/src/components/OurLessons.jsx
@@ -7,7 +7,7 @@ export const OurLessons = () => {
   return (
     <>
       <OurLessonsWrapper>
-        <OurLessonsImage></OurLessonsImage>
+        <OurLessonsImage alt="Snowboarding Lessons" />
         <OurLessonContent>
           <OurLessonsText>
             <h1>Our Lessons</h1>

diff --git a/src/components/OurOfferings.jsx b/src/components/OurOfferings.jsx
@@ -24,6 +24,7 @@ export const OurOfferings = () => {
     </>
   );
 };
+
 const OurOfferingsSection = styled.section`
   h1 {
     color: #0b1623;

diff --git a/src/components/cards-components/Explore.jsx b/src/components/cards-components/Explore.jsx
@@ -7,7 +7,7 @@ export const Explore = () => {
   return (
     <>
       <ExploreCard>
-        <ExploreImage></ExploreImage>
+        <ExploreImage alt="Image of a map"/>
         <ExploreText>
           <h2>Explore</h2>
           <p>

diff --git a/src/components/cards-components/HaveFun.jsx b/src/components/cards-components/HaveFun.jsx
@@ -7,7 +7,7 @@ export const HaveFun = () => {
   return (
     <>
       <HaveFunCard>
-        <HaveFunImage></HaveFunImage>
+        <HaveFunImage alt="Image of a microphone"/>
         <HaveFunText>
           <h2>Have fun</h2>
           <p>

diff --git a/src/components/cards-components/Learn.jsx b/src/components/cards-components/Learn.jsx
@@ -7,7 +7,7 @@ export const Learn = () => {
   return (
     <>
       <LearnCard>
-        <LearnImage></LearnImage>
+        <LearnImage alt="Image of a girl with a snowboard"/>
         <LearnText>
           <h2>Learn</h2>
           <p>

diff --git a/src/components/cards-components/Live.jsx b/src/components/cards-components/Live.jsx
@@ -7,7 +7,7 @@ export const Live = () => {
   return (
     <>
       <LiveCard>
-        <LiveImage></LiveImage>
+        <LiveImage alt="Image of a house for accommodation"/>
         <LiveText>
           <h2>Live</h2>
           <p>Enjoy your stay at our cozy cabin in Laax.</p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ export const OurOfferings = () => { @@
         </>
       );
     };
     const OurOfferingsSection = styled.section`
       h1 {
         color: #0b1623;
@@ Expand Down @@