[B] Accessibility fixes based on initial axe audit

lsst-epo · Aug 17, 2023 · 36da382 · 36da382
1 parent 079177b
commit 36da382
Show file tree

Hide file tree

Showing 15 changed files with 122 additions and 76 deletions.
diff --git a/components/atomic/Flag/index.js b/components/atomic/Flag/index.js
@@ -8,6 +8,7 @@ function Flag({ className, children, color }) {
         <Styled.FlagBody $backgroundColor={color}>{children}</Styled.FlagBody>
         <Styled.FlagTail
           xmlns="http://www.w3.org/2000/svg"
+          alt=""
           role="presentation"
           viewBox="0 0 100 24.551"
         >

diff --git a/components/atomic/Tile/index.js b/components/atomic/Tile/index.js
@@ -60,10 +60,13 @@ const Tile = ({
               <ResponsiveImage
                 role="presentation"
                 ratio={ratio}
-                image={finalImage}
+                image={{ ...finalImage, altText: "" }}
               />
             ) : (
-              <Image role="presentation" image={finalImage} />
+              <Image
+                role="presentation"
+                image={{ ...finalImage, altText: "" }}
+              />
             )}
             {isVideo && (
               <Styled.PlayButton>

diff --git a/components/content-blocks/Callout/CalloutEntry/index.js b/components/content-blocks/Callout/CalloutEntry/index.js
@@ -1,5 +1,3 @@
-/* eslint-disable react/prop-types */
-
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import {
@@ -8,9 +6,9 @@ import {
   getSiteString,
   makeReleaseFeature,
 } from "@/lib/utils";
-import * as Styled from "./styles";
 import { Image } from "@rubin-epo/epo-react-lib";
 import { useRelease } from "@/lib/api/noirlabReleases";
+import * as Styled from "./styles";
 
 const getDateString = (newsDate, eventStart, eventEnd, lang) => {
   if (newsDate) {
@@ -66,7 +64,11 @@ export default function CalloutEntry({ callout }) {
       <Styled.Inner href={url} aria-labelledby={titleId}>
         {calloutImage && (
           <Styled.ImageWrapper>
-            <Image role="presentation" ratio="4:3" image={calloutImage} />
+            <Image
+              role="presentation"
+              ratio="4:3"
+              image={{ ...calloutImage, altText: "" }}
+            />
             <Styled.ImageSticker>{type}</Styled.ImageSticker>
           </Styled.ImageWrapper>
         )}
@@ -97,6 +99,7 @@ export default function CalloutEntry({ callout }) {
 
 CalloutEntry.propTypes = {
   callout: PropTypes.shape({
+    id: PropTypes.string,
     entry: PropTypes.array.isRequired,
     backgroundColor: PropTypes.string,
   }).isRequired,

diff --git a/components/content-blocks/Callout/CalloutMain.js b/components/content-blocks/Callout/CalloutMain.js
@@ -50,7 +50,7 @@ export default function CalloutMain({ callout }) {
       {calloutImage && (
         <StyledImage
           role="presentation"
-          image={calloutImage}
+          image={{ ...calloutImage, altText: "" }}
           $padImage={padImage}
         />
       )}

diff --git a/components/content-blocks/Callout/CalloutTwoTone.js b/components/content-blocks/Callout/CalloutTwoTone.js
@@ -48,7 +48,10 @@ export default function CalloutTwoTone({ callout }) {
           ))}
         </Header>
         {calloutBackgroundImage && (
-          <StyledBackgroundImage image={calloutBackgroundImage} />
+          <StyledBackgroundImage
+            role="presentation"
+            image={{ ...calloutBackgroundImage, altText: "" }}
+          />
         )}
       </Wrapper>
       <Wrapper order="image" ratio="33" overlay={true} stack="bottom">

diff --git a/components/content-blocks/Callout/styles.js b/components/content-blocks/Callout/styles.js
@@ -1,10 +1,10 @@
-import { Image, MixedLink } from "@rubin-epo/epo-react-lib";
 import styled from "styled-components";
+import { Image, MixedLink } from "@rubin-epo/epo-react-lib";
 import {
   fluidScale,
   containerFullBleed,
   containerRegular,
-  needsDarkColor,
+  isContrast,
   pxToEm,
   respond,
   tokens,
@@ -17,7 +17,9 @@ const linkPadding = pxToEm("18px", "16px");
 
 export const Section = styled.section`
   color: ${(p) =>
-    needsDarkColor(tokens[p.$bgColor]) ? tokens.neutral80 : tokens.white};
+    isContrast(tokens[p.$bgColor], tokens.white, "small")
+      ? tokens.white
+      : tokens.neutral80};
   background-color: ${(p) => tokens[p.$bgColor]};
   ${(p) => p.$width === "block" && containerFullBleed("CONTAINER_REGULAR")};
   ${(p) =>

diff --git a/components/content-blocks/GridBlock/NewsGrid.js b/components/content-blocks/GridBlock/NewsGrid.js
@@ -34,9 +34,9 @@ const NewsGrid = ({ items = [], limit, listTypeId, sectionHandle, pageId }) => {
 
   return (
     <>
-      {isLoading && <Loader speed="fast" isVisible />}
+      {isLoading && <Loader speed="fast" isVisible data-cy="loader" />}
       {!isLoading && allItems?.length > 0 && (
-        <Grid columns={2} showFeature={true}>
+        <Grid columns={2} showFeature={true} data-cy="newsgrid">
           {allItems.map(
             (
               {

diff --git a/components/dynamic/NewsList/index.js b/components/dynamic/NewsList/index.js
@@ -38,6 +38,7 @@ const NewsList = ({
       footerButton={button}
       isRelatedList={isRelatedList}
       loaderDescription={t("news.loading")}
+      data-cy="newslist"
     >
       {({ entries, page }) => (
         <>

diff --git a/components/global/Body/index.js b/components/global/Body/index.js
@@ -40,7 +40,9 @@ export default function Body({ children, description, featuredImage, title }) {
                 navItems={headerNavItems}
                 userProfilePage={userProfilePage}
               />
-              <main id="page-content">{children}</main>
+              <main role="main" id="page-content">
+                {children}
+              </main>
               <Footer
                 socialInfo={socialInfo}
                 content={footerContent}

diff --git a/components/global/Footer/index.js b/components/global/Footer/index.js
@@ -16,7 +16,7 @@ export default function Footer({
   const supportersImage = supportersLogos && supportersLogos[0];
 
   return (
-    <footer className="c-global-footer">
+    <footer className="c-global-footer" role="contentinfo">
       <Social socialInfo={socialInfo} />
       <Nav links={links} />
       <div className="c-global-footer__main">

diff --git a/components/global/Header/index.js b/components/global/Header/index.js
@@ -58,6 +58,7 @@ export default function Header({ navItems, userProfilePage }) {
       className={`c-global-header ${
         visible || mobileNavActive ? "" : "invisible"
       }`}
+      role="banner"
     >
       <a href="#page-content" className="c-global-header__skip-link">
         {t("skip-to-content")}

diff --git a/components/page/Pagination/index.js b/components/page/Pagination/index.js
@@ -1,11 +1,10 @@
 import React from "react";
-import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
-import { Container, MixedLink } from "@rubin-epo/epo-react-lib";
+import { MixedLink } from "@rubin-epo/epo-react-lib";
 import T from "@/page/Translate";
 import { usePathData } from "@/lib/utils";
-import { layoutGrid, respond } from "@/styles/globalStyles";
+import * as Styled from "./styles";
 
 const Pagination = ({ limit, offset, page, total }) => {
   const { t } = useTranslation();
@@ -35,19 +34,18 @@ const Pagination = ({ limit, offset, page, total }) => {
   const next = currentPage < numberOfPages ? currentPage + 1 : 0;
 
   return (
-    <StyledContainer width="regular">
-      <NavDesktop aria-label={t("pagination.label")}>
+    <Styled.PaginationContainer width="regular">
+      <Styled.NavDesktop aria-label={t("pagination.label")}>
         <div>
           <T i18nKey="pagination.showing-range">
             Showing {{ from }} to {{ to }} of {{ length: total }}
           </T>
         </div>
         <div>
-          <StyledPaginationList>
+          <Styled.PaginationList>
             {pageArray.map((page, index) => {
               return currentPage !== page && page !== "..." ? (
                 <React.Fragment key={index}>
-                  {index ? ` / ` : ``}
                   <li>
                     <MixedLink url={asPath} params={{ page: page }}>
                       {page}
@@ -56,12 +54,11 @@ const Pagination = ({ limit, offset, page, total }) => {
                 </React.Fragment>
               ) : (
                 <React.Fragment key={index}>
-                  {index ? ` / ` : ``}
                   <li>{page}</li>
                 </React.Fragment>
               );
             })}
-          </StyledPaginationList>
+          </Styled.PaginationList>
         </div>
         <div>
           {prev > 0 ? (
@@ -80,8 +77,8 @@ const Pagination = ({ limit, offset, page, total }) => {
             <T translate="pagination.next" />
           )}
         </div>
-      </NavDesktop>
-      <NavMobile aria-label={t("pagination.label")}>
+      </Styled.NavDesktop>
+      <Styled.NavMobile aria-label={t("pagination.label")}>
         <div>
           {prev > 0 ? (
             <MixedLink url={asPath} params={{ page: prev }}>
@@ -100,52 +97,11 @@ const Pagination = ({ limit, offset, page, total }) => {
             <>&gt;&gt;</>
           )}
         </div>
-      </NavMobile>
-    </StyledContainer>
+      </Styled.NavMobile>
+    </Styled.PaginationContainer>
   );
 };
 
-const StyledPaginationList = styled.ul`
-  display: flex;
-  gap: 5px;
-`;
-
-const StyledContainer = styled(Container)`
-  a {
-    color: var(--turquoise85);
-
-    &:hover,
-    &:focus-visible {
-      color: var(--turquoise85);
-    }
-  }
-`;
-
-const NavDesktop = styled.nav`
-  ${layoutGrid(3)}
-  ${respond(`display: none;`)}
-  > div:nth-child(2) {
-    justify-self: center;
-  }
-  > div:nth-child(3) {
-    justify-self: end;
-    text-transform: uppercase;
-  }
-`;
-
-const NavMobile = styled.nav`
-  display: none;
-  ${respond(`    
-    display: grid;
-    width: 100%;
-    grid-template-columns: 1fr 1fr;
-
-    >div:last-child {
-      justify-self: end;
-    }
-`)}
-`;
-
 Pagination.propTypes = {
   limit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

diff --git a/components/page/Pagination/styles.js b/components/page/Pagination/styles.js
@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { layoutGrid, respond } from "@/styles/globalStyles";
+import { Container } from "@rubin-epo/epo-react-lib";
+
+export const PaginationContainer = styled(Container)`
+  a {
+    color: var(--turquoise85);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--turquoise85);
+    }
+  }
+`;
+
+export const NavDesktop = styled.nav`
+  ${layoutGrid(3)}
+  ${respond(`display: none;`)}
+  > div:nth-child(2) {
+    justify-self: center;
+  }
+
+  > div:nth-child(3) {
+    justify-self: end;
+    text-transform: uppercase;
+  }
+`;
+
+export const NavMobile = styled.nav`
+  display: none;
+  ${respond(`    
+    display: grid;
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+
+    >div:last-child {
+      justify-self: end;
+    }
+`)}
+`;
+
+export const PaginationList = styled.ul`
+  display: flex;
+  gap: 5px;
+`;
diff --git a/pages/_document.js b/pages/_document.js
@@ -39,7 +39,7 @@ class CustomDocument extends Document {
       <Html lang={this.props.lang}>
         <Head />
         <body>
-          <Main />
+          <Main role="main" />
           <NextScript />
         </body>
       </Html>

diff --git a/theme/styles/globalStyles.js b/theme/styles/globalStyles.js
@@ -182,12 +182,41 @@ export const encodeColor = (string) => {
   return `%23${str}`;
 };
 
-export const needsDarkColor = (hexColor) => {
-  var color = hexColor.charAt(0) === "#" ? hexColor.substring(1, 7) : hexColor;
-  var r = parseInt(color.substring(0, 2), 16); // hexToR
-  var g = parseInt(color.substring(2, 4), 16); // hexToG
-  var b = parseInt(color.substring(4, 6), 16); // hexToB
-  return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? true : false;
+function hexToRGB(hex) {
+  const color = hex.charAt(0) === "#" ? hex.substring(1, 7) : hex;
+
+  return {
+    r: parseInt(color.substring(0, 2), 16),
+    g: parseInt(color.substring(2, 4), 16),
+    b: parseInt(color.substring(4, 6), 16),
+  };
+}
+
+function hexLuminance(hex) {
+  const rgb = hexToRGB(hex);
+
+  const a = [rgb.r, rgb.g, rgb.b].map(function (v) {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+
+function colorRatio(hex1, hex2) {
+  const lum1 = hexLuminance(hex1);
+  const lum2 = hexLuminance(hex2);
+  return lum1 > lum2
+    ? (lum2 + 0.05) / (lum1 + 0.05)
+    : (lum1 + 0.05) / (lum2 + 0.05);
+}
+
+export const isContrast = (
+  backgroundColor,
+  foregroundColor,
+  size = "small"
+) => {
+  const ratio = colorRatio(backgroundColor, foregroundColor);
+  return size === "large" ? ratio < 0.33 : ratio < 0.21;
 };
 
 export const palette = (color) => {