Merge pull request #105 from NYPL/DR-2894/prelaunch-a11y

DR-2894: Quick pre-launch a11y fixes
NYPL · Apr 9, 2024 · 75373e5 · 75373e5
2 parents c5c6ec9 + 51edfc2
commit 75373e5
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 15 deletions.
diff --git a/src/components/featuredContent/featuredContent.test.tsx b/src/components/featuredContent/featuredContent.test.tsx
@@ -13,10 +13,6 @@ describe("Featured Content component renders with expected props", () => {
         "src",
         "/pd_banner.png"
       );
-      expect(within(component).getByRole("img")).toHaveAttribute(
-        "alt",
-        "Public Domain banner"
-      );
 
       const button = within(component).getByTestId("featured-learn-more");
       expect(button).toHaveAttribute("href", "https://publicdomain.nypl.org");
@@ -34,10 +30,6 @@ describe("Featured Content component renders with expected props", () => {
         "src",
         "/service-artehouse.jpg"
       );
-      expect(within(component).getByRole("img")).toHaveAttribute(
-        "alt",
-        "Service Artehouse banner"
-      );
 
       const button = within(component).getByTestId("featured-visit-store");
       expect(button).toHaveAttribute(

diff --git a/src/components/featuredContent/featuredContent.tsx b/src/components/featuredContent/featuredContent.tsx
@@ -26,15 +26,15 @@ const FeaturedContentComponent = ({ randomNumber }) => {
             data-testid={data.buttonId}
             isUnderlined={false}
             target="_blank"
-            aria-label={data.ariaLabel}
+            aria-label={`${data.buttonText}, ${data.heading}`}
             type="buttonPrimary"
           >
             {data.buttonText}
           </Link>
         </Box>
       }
       imageProps={{
-        alt: data.imgAlt,
+        alt: "",
         width: "oneHalf",
         position: "end",
         src: data.imgSrc,

diff --git a/src/components/hero/campaignHeroSubText.tsx b/src/components/hero/campaignHeroSubText.tsx
@@ -36,7 +36,14 @@ const CampaignHeroSubText = ({ featuredItem }: any) => {
       </Text>
       <HorizontalRule />
       <Box>
-        <Text color="ui.typography.body" mb="0px" noOfLines={2}>
+        <Text
+          color="ui.typography.body"
+          mb="0px"
+          noOfLines={2}
+          __css={{
+            ":focus-within": { overflow: "visible" },
+          }}
+        >
           Featured Image:{" "}
           <DSLink
             color="var(--nypl-colors-ui-link-primary) !important"

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,4 +1,5 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import Script from "next/script";
 
 export default function Document() {
   return (
@@ -8,10 +9,11 @@ export default function Document() {
         <Main />
         <NextScript />
         <div id="nypl-footer"></div>
-        <script
+        <Script
           src="https://ds-header.nypl.org/footer.min.js?containerId=nypl-footer"
           async
-        ></script>
+          strategy="beforeInteractive"
+        ></Script>
       </body>
     </Html>
   );

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,8 @@
 import CampaignHero from "../components/hero/campaignHero";
-import { TemplateAppContainer } from "@nypl/design-system-react-components";
+import {
+  SkipNavigation,
+  TemplateAppContainer,
+} from "@nypl/design-system-react-components";
 import Header from "@/components/header/header";
 import HomePageMainContent from "@/components/homePageMainContent/homePageMainContent";
 import ExploreFurther from "@/components/exploreFurther/exploreFurther";
@@ -8,13 +11,18 @@ import NotificationBanner from "@/components/notificationBanner/notificationBann
 export default function Home(props: any = {}) {
   return (
     <>
+      <SkipNavigation target="#hero" />
       {/**
        * * @TODO: Header will need to be pulled into a reusable Layout component (DC Facelift phase 2)
        * * Let this be @7emansell 's problem if possible **/}
       <NotificationBanner />
       <Header />
       <TemplateAppContainer
-        breakout={<CampaignHero imageID={props.imageID} />}
+        breakout={
+          <div id="hero">
+            <CampaignHero imageID={props.imageID} />
+          </div>
+        }
         contentPrimary={<HomePageMainContent />}
       />
       <ExploreFurther />