Improve lighthouse accessibility score (#695)

This improves the lighthouse accessibility score.
US-GHG-Center · Feb 4, 2025 · 5eb476b · 5eb476b
2 parents 9375b63 + a92edae
commit 5eb476b
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/overrides/home/carousel/carousel-item.tsx b/overrides/home/carousel/carousel-item.tsx
@@ -47,22 +47,23 @@ export function ItemPanel({ item, linkComponent: LinkComponent }) {
 export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgress, progressDone, progressPercentage, selected, linkComponent: LinkComponent }) {
   return <Card 
     gridLayout={{ tablet: { col: 4 } }} 
-    containerProps={{className:`hover:bg-base-lightest padding-x-1 radius-0 border-0 animation--transition ${(selected || shouldProgress)? 'opacity-100':'opacity-50'}`}}>
+    role='tab'
+    aria-selected={selected.toString()}
+    aria-label={`Slide ${itemIdx+1}`}
+    aria-controls={`carousel-item-${itemIdx + 1}`} 
+    containerProps={{className:`padding-x-1 radius-0 border-0 animation--transition ${(selected || shouldProgress)? 'opacity-100':'opacity-83'} `}}>
     <ProgressBar shouldProgress={shouldProgress} progressDone={progressDone} progressPercentage={progressPercentage}selected={selected} />
     <CardBody className="padding-left-0 position-relative">
-      <h3 className="tablet:margin-top-1 carousel--title text-bold veda-color--base">
+      <h2 className="tablet:margin-top-1 carousel--title text-bold veda-color--base">
         {item.title}
-      </h3>
+      </h2>
       <p className="margin-top-2 flex-align-self-stretch">{item.description}</p>
       <Button
         unstyled={true}
         className="position-absolute top-0 left-0 width-full height-full blocklink"
         onClick={() => { onTitleClick(item); } }
         type="button"
-        role="tab"
-        aria-label={`Slide ${itemIdx+1}`}
-        aria-selected={selected.toString()}
-        aria-controls={`carousel-item-${itemIdx+1}`} 
+        aria-label={`Open details for ${item.title}`}
         children={undefined} />
     </CardBody>
     <CardFooter className="padding-left-0 padding-top-1">
@@ -71,6 +72,8 @@ export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgre
         <span className="padding-left-1">Read more</span>
         </LinkComponent>
       </CardFooter>
-  </Card>
+      </Card>
+
+
 }
 
diff --git a/overrides/home/component.tsx b/overrides/home/component.tsx
@@ -1,5 +1,5 @@
 import React from "$veda-ui/react";
-import { NavLink } from "$veda-ui/react-router-dom";
+import { Link } from "$veda-ui/react-router-dom";
 import styled from "$veda-ui/styled-components";
 import { glsp, themeVal, media } from "$veda-ui/@devseed-ui/theme-provider";
 import { Button } from "$veda-ui/@devseed-ui/button";
@@ -17,6 +17,7 @@ import {
   Grid,
 } from '$veda-ui/@trussworks/react-uswds';
 
+import './index.scss';
 
 import Partners from "./partners";
 import Banner from './banner';
@@ -112,14 +113,13 @@ export default function HomeComponent() {
             </Grid>
           </Grid>
           <Buttons className="margin-top-4">
-            <Button
-              forwardedAs={NavLink}
+            <Link
+
               to="/about"
-              size="xlarge"
-              variation="primary-outline"
+              className="link"
             >
-                Learn More <CollecticonArrowRight />
-            </Button>
+                Learn More <div className="arrow"> <CollecticonArrowRight /></div>
+            </Link>
           </Buttons>
         </Grid>
       </GridContainer>

diff --git a/overrides/home/index.scss b/overrides/home/index.scss
@@ -0,0 +1,36 @@
+/* Base style for the link */
+.link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgb(18, 41, 97);
+  border: 1px solid rgb(18, 41, 97);
+  padding: 0px 20px;
+  border-radius: 5px;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: 'Inter', sans-serif;
+  height: 3rem;
+  background-color: transparent;
+  transition: background-color 0.24s ease-in-out;
+  opacity: 1;
+  text-decoration: none;
+
+  /* Hover effect */
+  &:hover {
+    background-color: rgba(8, 42, 100, 0.08);
+  }
+
+  /* Active effect */
+  &:active, 
+  &.active {
+    background-color: rgba(8, 42, 100, 0.08);
+  }
+}
+
+/* Optional styles for the arrow */
+.arrow {
+  display: flex;
+  margin: 0px 4px;
+}