SCC-3742 - Upgrade DS version and update heading props

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)

package.json

@@ -15,7 +15,7 @@
     "coverage": "jest --coverage"
   },
   "dependencies": {
-    "@nypl/design-system-react-components": "^1.6.1",
+    "@nypl/design-system-react-components": "^2.1.0",
     "@nypl/nypl-data-api-client": "1.0.5",
     "@types/node": "20.3.1",
     "@types/react": "18.2.13",

pages/404/index.tsx

@@ -12,7 +12,7 @@ export default function Custom404() {
         <title>404 Not Found</title>
       </Head>
       <Layout activePage="404">
-        <Heading level="one">404 Not Found</Heading>
+        <Heading level="h1">404 Not Found</Heading>
         <p>We&apos;re sorry...</p>
         <p>The page you were looking for doesn&apos;t exist.</p>
         <p>

pages/404/redirect.tsx

@@ -12,7 +12,7 @@ export default function Redirect404() {
         <title>404 Not Found</title>
       </Head>
       <Layout activePage="404">
-        <Heading level="one">We&apos;re sorry...</Heading>
+        <Heading level="h1">We&apos;re sorry...</Heading>
         <p>You&apos;ve followed an out-of-date link to our research catalog.</p>
         <p>
           You may be able to find what you&apos;re looking for in the{" "}

pages/index.tsx

@@ -20,7 +20,7 @@ export default function Home() {
         <title>{SITE_NAME}</title>
       </Head>
       <Layout activePage="search">
-        <Heading level="two">
+        <Heading level="h2">
           Explore the Library&apos;s Vast Research Collections & More
         </Heading>
         <div>
@@ -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>
@@ -51,20 +54,20 @@ export default function Home() {
           </p>
         </div>
         <SimpleGrid columns={1} gap="grid.m">
-          <Heading level="three" noSpace>
+          <Heading level="h3" noSpace>
             Research at NYPL
           </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",
             }}
             layout="row"
           >
-            <CardHeading level="four">
-              <Link href="/research/collections">Collections</Link>
+            <CardHeading level="h4" url="/research/collections">
+              Collections
             </CardHeading>
             <CardContent>
               <p>
@@ -82,8 +85,8 @@ export default function Home() {
             }}
             layout="row"
           >
-            <CardHeading level="four">
-              <Link href="/locations/map?libraries=research">Locations</Link>
+            <CardHeading level="h4" url="/locations/map?libraries=research">
+              Locations
             </CardHeading>
             <CardContent>
               <p>
@@ -101,8 +104,8 @@ export default function Home() {
             }}
             layout="row"
           >
-            <CardHeading level="four">
-              <Link href="/about/divisions">Divisions</Link>
+            <CardHeading level="h4" url="/about/divisions">
+              Divisions
             </CardHeading>
             <CardContent>
               <p>
@@ -113,15 +116,15 @@ 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",
             }}
             layout="row"
           >
-            <CardHeading level="four">
-              <Link href="/research/support">Support</Link>
+            <CardHeading level="h4" url="/research/support">
+              Support
             </CardHeading>
             <CardContent>
               <p>
@@ -132,15 +135,15 @@ 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",
             }}
             layout="row"
           >
-            <CardHeading level="four">
-              <Link href="/research/services">Services</Link>
+            <CardHeading level="h4" url="/research/services">
+              Services
             </CardHeading>
             <CardContent>
               <p>

pages/search/advanced.tsx

@@ -122,7 +122,7 @@ export default function AdvancedSearch() {
             }
           />
         )}
-        <Heading level="two">Advanced Search</Heading>
+        <Heading level="h2">Advanced Search</Heading>
         <Form
           id="advancedSearchForm"
           // We are using a post request on advanced search when JS is disabled so that we can build the query
@@ -191,7 +191,7 @@ export default function AdvancedSearch() {
                 labelText="Formats"
                 onChange={handleCheckboxChange}
                 value={searchFormState["filters"].materialType}
-                sx={{
+                __css={{
                   "> div": {
                     display: "grid",
                     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
@@ -215,11 +215,11 @@ export default function AdvancedSearch() {
               </CheckboxGroup>
             </FormField>
           </FormRow>
-          <HorizontalRule sx={{ margin: 0 }} />
+          <HorizontalRule __css={{ margin: 0 }} />
           <ButtonGroup
             id="advancedSearchButtons"
             buttonWidth="default"
-            sx={{
+            __css={{
               gap: "xs",
               marginLeft: "auto",
             }}

pages/search/index.tsx

@@ -56,7 +56,7 @@ export default function Search({ results }) {
       >
         {totalResults ? (
           <>
-            <Heading level="two" mb="xl" size="heading4">
+            <Heading level="h2" mb="xl" size="heading4">
               {`Displaying ${
                 totalResults > 50 ? "1-50" : totalResults.toLocaleString()
               } of ${totalResults.toLocaleString()} results for keyword "${
@@ -74,7 +74,7 @@ export default function Search({ results }) {
            * TODO: The logic and copy for different scenarios will need to be added when
            * filters are implemented
            */
-          <Heading level="three">No results. Try a different search.</Heading>
+          <Heading level="h3">No results. Try a different search.</Heading>
         )}
       </Layout>
     </>

src/components/DRB/DRBCard.tsx

@@ -19,14 +19,9 @@ interface DRBCardProps {
  */
 const DRBCard = ({ drbResult }: DRBCardProps) => {
   return (
-    <Card
-      backgroundColor="var(--nypl-colors-ui-bg-default)"
-      sx={{
-        padding: "var(--nypl-space-xs)",
-      }}
-    >
+    <Card backgroundColor="var(--nypl-colors-ui-bg-default)" p="xs">
       <CardContent>
-        <DSLink href={drbResult.url} target="_blank">
+        <DSLink href={drbResult.url} target="_blank" isUnderlined={false}>
           <Text size="body2">{drbResult.title}</Text>
         </DSLink>
 
@@ -36,27 +31,36 @@ const DRBCard = ({ drbResult }: DRBCardProps) => {
             {drbResult.authors.map((author: Author | Agent, index: number) => (
               <>
                 {index > 0 && ","}
-                <DSLink href={getAuthorURL(author)} target="_blank">
+                <DSLink
+                  href={getAuthorURL(author)}
+                  target="_blank"
+                  isUnderlined={false}
+                >
                   {author.name}
                 </DSLink>
               </>
             ))}
           </Text>
         )}
 
-        {drbResult?.readOnlineUrl && (
+        {drbResult.readOnlineUrl && (
           <DSLink
             href={drbResult.readOnlineUrl}
             target="_blank"
             type="buttonPrimary"
-            mb={drbResult?.downloadLink ? "s" : ""}
+            mb={drbResult.downloadLink ? "s" : ""}
+            isUnderlined={false}
           >
             Read Online
           </DSLink>
         )}
 
-        {drbResult?.downloadLink && (
-          <DSLink href={drbResult.downloadLink.url} target="_blank">
+        {drbResult.downloadLink && (
+          <DSLink
+            href={drbResult.downloadLink.url}
+            target="_blank"
+            isUnderlined={false}
+          >
             <Text
               size="body2"
               sx={{ display: "flex", alignItems: "center" }}

src/components/DRB/DRBContainer.tsx

@@ -34,7 +34,7 @@ const DRBContainer = ({
 
   return (
     <Card isBordered>
-      <CardHeading level="three">
+      <CardHeading level="h3">
         Results from Digital Research Books Beta
       </CardHeading>
       <CardContent>
@@ -52,7 +52,11 @@ const DRBContainer = ({
           ))}
         </SimpleGrid>
         {totalWorks && (
-          <DSLink href={`${DRB_BASE_URL}/search${drbQuery}`} target="_blank">
+          <DSLink
+            href={`${DRB_BASE_URL}/search${drbQuery}`}
+            target="_blank"
+            isUnderlined={false}
+          >
             <Text size="body2" noSpace isBold>
               See {totalWorks.toLocaleString()} result
               {totalWorks === 1 ? "" : "s"} from Digital Research Books Beta

src/components/Layout/Layout.tsx

@@ -51,7 +51,7 @@ const Layout = ({
                 ]}
               />
               <div className={styles.researchHeadingContainer}>
-                <Heading id="heading-h1" level="one" text="Research Catalog" />
+                <Heading id="heading-h1" level="h1" text="Research Catalog" />
                 <SubNav activePage={activePage} />
                 {showSearch && <SearchForm />}
               </div>

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>
   )
 }

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>

src/components/SearchResult/SearchResult.tsx

@@ -1,12 +1,12 @@
 import {
   Card,
   CardContent,
-  Link as DSLink,
   CardHeading,
   Box,
   Text,
 } from "@nypl/design-system-react-components"
 
+import RCLink from "../RCLink/RCLink"
 import type SearchResultsBib from "../../models/SearchResultsBib"
 import { PATHS } from "../../config/constants"
 
@@ -25,8 +25,8 @@ const SearchResult = ({ bib }: SearchResultProps) => {
         paddingBottom: "m",
       }}
     >
-      <CardHeading level="three">
-        <DSLink href={`${PATHS.BIB}/${bib.id}`}>{bib.title}</DSLink>
+      <CardHeading level="h3" size="heading4">
+        <RCLink href={`${PATHS.BIB}/${bib.id}`}>{bib.title}</RCLink>
       </CardHeading>
       <CardContent>
         <Box sx={{ p: { display: "inline", marginRight: "s" } }}>

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")
+  })
 })