Merge pull request #39 from NYPL/SCC-2839/homepage-a11y-updates

SCC-2839: Homepage a11y updates
NYPL · Oct 31, 2023 · 3eaa0d1 · 3eaa0d1
2 parents f5ac26f + 1be4344
commit 3eaa0d1
Show file tree

Hide file tree

Showing 8 changed files with 2,595 additions and 2,971 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -0,0 +1,12 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## Unreleased
+
+### Update
+
+- Fixed accessibility issues on the Homepage (SCC-3829)
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -30,7 +30,10 @@ export default function Home() {
             Black Culture, and The New York Public Library for the Performing
             Arts. Plus, access materials from library collections at Columbia
             University, Harvard University, and Princeton University.{" "}
-            <Link href="/research/collections/about/shared-collection-catalog">
+            <Link
+              href="/research/collections/about/shared-collection-catalog"
+              aria-label="Learn more about the Research Catalog."
+            >
               Learn more.
             </Link>
           </p>
@@ -56,7 +59,7 @@ export default function Home() {
           </Heading>
           <Card
             imageProps={{
-              alt: "Image of manuscript from NYPL Research Archive",
+              alt: "Manuscript from NYPL Research Archive",
               aspectRatio: "twoByOne",
               size: "large",
               src: "https://cdn-petrol.nypl.org/sites/default/media/styles/extralarge/public/archives-portal.jpg?itok=-oYtHmeO",
@@ -113,7 +116,7 @@ export default function Home() {
           </Card>
           <Card
             imageProps={{
-              alt: "Image of man doing research in Rose main Reading Room",
+              alt: "Man doing research in Rose main Reading Room",
               aspectRatio: "twoByOne",
               size: "large",
               src: "https://cdn-petrol.nypl.org/sites/default/media/styles/extralarge/public/plan-you-visit.jpg?itok=scG6cFgy",
@@ -132,7 +135,7 @@ export default function Home() {
           </Card>
           <Card
             imageProps={{
-              alt: "Image of man wheeling cart in NYPL stacks",
+              alt: "Man wheeling cart in NYPL stacks",
               aspectRatio: "twoByOne",
               size: "large",
               src: "https://cdn-petrol.nypl.org/sites/default/media/styles/extralarge/public/research-services.jpg?itok=rSo9t1VF",

diff --git a/src/components/RCLink/RCLink.tsx b/src/components/RCLink/RCLink.tsx
@@ -6,6 +6,7 @@ interface RCLinkProps {
   active?: boolean
   href: string
   children: ReactNode
+  color?: string
 }
 
 /**
@@ -15,8 +16,10 @@ interface RCLinkProps {
  */
 const RCLink = ({ href, children, active = false, ...rest }: RCLinkProps) => {
   return (
-    <Link href={href} passHref {...rest}>
-      <DSLink fontWeight={active && "bold"}>{children}</DSLink>
+    <Link href={href} passHref>
+      <DSLink fontWeight={active && "bold"} {...rest}>
+        {children}
+      </DSLink>
     </Link>
   )
 }

diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx
@@ -77,7 +77,11 @@ const SearchForm = () => {
           />
         </div>
         <div className={styles.advancedSearchContainer}>
-          <RCLink href={"/search/advanced"}>Advanced Search</RCLink>
+          {/* Temporary color update. The Header overrides the new
+            DS 2.X CSS color variable values. */}
+          <RCLink href={"/search/advanced"} color="#0069BF">
+            Advanced Search
+          </RCLink>
         </div>
       </div>
     </div>

diff --git a/src/components/SubNav/SubNav.test.tsx b/src/components/SubNav/SubNav.test.tsx
@@ -16,4 +16,24 @@ describe("SubNav", () => {
     const subNavLinks = screen.getAllByRole("link")
     expect(subNavLinks).toHaveLength(3)
   })
+
+  it("labels the active link with aria-current", async () => {
+    const { rerender } = render(<SubNav activePage="search" />, {
+      wrapper: MemoryRouterProvider,
+    })
+    // We expect the first link, "Search", to be active and
+    // have the aria-current attribute set to "page"
+    let subNavLinks = screen.getAllByRole("link")
+    expect(subNavLinks[0]).toHaveAttribute("aria-current", "page")
+    expect(subNavLinks[1]).not.toHaveAttribute("aria-current")
+    expect(subNavLinks[2]).not.toHaveAttribute("aria-current")
+
+    rerender(<SubNav activePage="account" />)
+    // We expect the third link, "My Account", to be active and
+    // have the aria-current attribute set to "page"
+    subNavLinks = screen.getAllByRole("link")
+    expect(subNavLinks[0]).not.toHaveAttribute("aria-current")
+    expect(subNavLinks[1]).not.toHaveAttribute("aria-current")
+    expect(subNavLinks[2]).toHaveAttribute("aria-current", "page")
+  })
 })
diff --git a/src/components/SubNav/SubNav.tsx b/src/components/SubNav/SubNav.tsx
@@ -17,18 +17,31 @@ const SubNav = ({ activePage }: SubNavProps) => {
         <li>
           <RCLink
             href="/"
+            aria-current={
+              activePage === "search" || activePage === "advanced"
+                ? "page"
+                : undefined
+            }
             active={activePage === "search" || activePage === "advanced"}
           >
             Search
           </RCLink>
         </li>
         <li>
-          <RCLink href="/subject_headings" active={activePage === "shep"}>
+          <RCLink
+            href="/subject_headings"
+            active={activePage === "shep"}
+            aria-current={activePage === "shep" ? "page" : undefined}
+          >
             Subject Heading Explorer
           </RCLink>
         </li>
         <li>
-          <RCLink href="/account" active={activePage === "account"}>
+          <RCLink
+            href="/account"
+            active={activePage === "account"}
+            aria-current={activePage === "account" ? "page" : undefined}
+          >
             My Account
           </RCLink>
         </li>

diff --git a/styles/components/Search.module.scss b/styles/components/Search.module.scss
@@ -2,7 +2,7 @@
 @import "../utils/breakpoints";
 
 .searchContainer {
-  background-color: var(--nypl-colors-ui-gray-x-light-cool);
+  background-color: var(--nypl-colors-ui-bg-default);
   padding: var(--nypl-space-l) 0 var(--nypl-space-xs);
 }