Merge pull request #53 from NYPL/SCC-3899/focus-ring-a11y-fix

SCC-3899: Focus ring accessibility fix
NYPL · Dec 11, 2023 · e7acb96 · e7acb96
2 parents 5f63115 + dd33d89
commit e7acb96
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -49,6 +49,13 @@ const Layout = ({
                     text: "Research Catalog",
                   },
                 ]}
+                __css={{
+                  a: {
+                    _focus: {
+                      outlineColor: "ui.white",
+                    },
+                  },
+                }}
               />
               <div className={styles.researchHeadingContainer}>
                 <Heading id="heading-h1" level="h1" text="Research Catalog" />

diff --git a/src/components/RCLink/RCLink.tsx b/src/components/RCLink/RCLink.tsx
@@ -8,6 +8,7 @@ interface RCLinkProps {
   children: ReactNode
   className?: string
   color?: string
+  hasWhiteFocusRing?: boolean
 }
 
 /**
@@ -20,11 +21,23 @@ const RCLink = ({
   href,
   children,
   active = false,
+  hasWhiteFocusRing = false,
   ...rest
 }: RCLinkProps) => {
   return (
     <Link href={href} passHref>
-      <DSLink className={className} fontWeight={active && "bold"} {...rest}>
+      <DSLink
+        className={className}
+        fontWeight={active && "bold"}
+        {...rest}
+        __css={
+          hasWhiteFocusRing && {
+            _focus: {
+              outlineColor: "ui.white",
+            },
+          }
+        }
+      >
         {children}
       </DSLink>
     </Link>

diff --git a/src/components/SubNav/SubNav.tsx b/src/components/SubNav/SubNav.tsx
@@ -23,6 +23,7 @@ const SubNav = ({ activePage }: SubNavProps) => {
                 : undefined
             }
             active={activePage === "search" || activePage === "advanced"}
+            hasWhiteFocusRing
           >
             Search
           </RCLink>
@@ -32,6 +33,7 @@ const SubNav = ({ activePage }: SubNavProps) => {
             href="/subject_headings"
             active={activePage === "shep"}
             aria-current={activePage === "shep" ? "page" : undefined}
+            hasWhiteFocusRing
           >
             Subject Heading Explorer
           </RCLink>
@@ -41,6 +43,7 @@ const SubNav = ({ activePage }: SubNavProps) => {
             href="/account"
             active={activePage === "account"}
             aria-current={activePage === "account" ? "page" : undefined}
+            hasWhiteFocusRing
           >
             My Account
           </RCLink>