fix: a11y omnibus package (#2819)

trussworks · Jun 20, 2024 · 758cd74 · 758cd74
1 parent 040e854
commit 758cd74
Show file tree

Hide file tree

Showing 25 changed files with 365 additions and 352 deletions.
diff --git a/src/components/Footer/Footer/Footer.stories.tsx b/src/components/Footer/Footer/Footer.stories.tsx
@@ -139,7 +139,7 @@ export const MediumFooter = (): React.ReactElement => (
         />
         <div className="usa-footer__contact-links mobile-lg:grid-col-6">
           <SocialLinks links={socialLinkItems} />
-          <h3 className="usa-footer__contact-heading">Agency Contact Center</h3>
+          <p className="usa-footer__contact-heading">Agency Contact Center</p>
           <Address
             size="medium"
             items={[
@@ -225,7 +225,7 @@ export const BigFooter = (): React.ReactElement => (
         />
         <div className="usa-footer__contact-links mobile-lg:grid-col-6">
           <SocialLinks links={socialLinkItems} />
-          <h3 className="usa-footer__contact-heading">Agency Contact Center</h3>
+          <p className="usa-footer__contact-heading">Agency Contact Center</p>
           <Address
             size="big"
             items={[

diff --git a/src/components/Footer/SocialLinks/SocialLinks.test.tsx b/src/components/Footer/SocialLinks/SocialLinks.test.tsx
@@ -1,6 +1,6 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render } from '@testing-library/react'
 
 import { SocialLinks, SocialLink } from './SocialLinks'
 
@@ -43,6 +43,5 @@ describe('SocialLink component', () => {
     const link = container.querySelector('.usa-social-link')
     expect(link).toBeInTheDocument()
     expect(link).toHaveAttribute('title', 'Instagram')
-    expect(screen.getByRole('img')).toHaveAttribute('name', 'Instagram')
   })
 })
diff --git a/src/components/Footer/SocialLinks/SocialLinks.tsx b/src/components/Footer/SocialLinks/SocialLinks.tsx
@@ -57,7 +57,11 @@ export const SocialLink = ({
   return (
     <a className="usa-social-link" {...props} title={name}>
       {IconComponent && (
-        <IconComponent className="usa-social-link__icon" name={name} />
+        <IconComponent
+          className="usa-social-link__icon"
+          name={name}
+          aria-hidden="true"
+        />
       )}
     </a>
   )

diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
@@ -23,13 +23,23 @@ Source: https://designsystem.digital.gov/components/icon/
   argTypes: {
     size: {
       control: {
-        type: 'select',
-        options: [3, 4, 5, 6, 7, 8, 9],
+        type: 'number',
+        min: 3,
+        max: 9,
+        step: 1,
+      },
+    },
+    'aria-label': {
+      name: 'aria-label',
+      description: 'Add this if and only aria-hidden is false',
+      control: {
+        type: 'text',
       },
     },
   },
   args: {
     size: 4,
+    'aria-hidden': true,
   },
 }
 

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -37,6 +37,16 @@ export const makeUSWDSIcon = (
       ...iconProps,
     }
 
+    if (
+      'img' === role &&
+      !iconProps['aria-hidden'] &&
+      !iconProps['aria-label'] &&
+      !iconProps['aria-labelledby']
+    ) {
+      console.warn(
+        `Icon with img role is missing an accessible label. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Img_role#associated_wai-aria_roles_states_and_properties`
+      )
+    }
     return <Component {...finalProps} />
   }
   IconFunctionalComponent.displayName = Component.displayName

diff --git a/src/components/Icon/Icons.stories.tsx b/src/components/Icon/Icons.stories.tsx
@@ -21,13 +21,16 @@ Source: https://designsystem.digital.gov/components/icon/
   argTypes: {
     size: {
       control: {
-        type: 'select',
-        options: [3, 4, 5, 6, 7, 8, 9],
+        type: 'number',
+        min: 3,
+        max: 9,
+        step: 1,
       },
     },
   },
   args: {
     size: 4,
+    'aria-hidden': true,
   },
 }
 

diff --git a/src/components/IconList/IconList.stories.tsx b/src/components/IconList/IconList.stories.tsx
@@ -24,21 +24,21 @@ export const Default = (): ReactElement => (
   <IconList>
     <IconListItem>
       <IconListIcon className="text-green">
-        <Icon.CheckCircle />
+        <Icon.CheckCircle aria-hidden="true" />
       </IconListIcon>
       <IconListContent>
         Wash your hands for 20 seconds with soap
       </IconListContent>
     </IconListItem>
     <IconListItem>
       <IconListIcon className="text-green">
-        <Icon.CheckCircle />
+        <Icon.CheckCircle aria-hidden="true" />
       </IconListIcon>
       <IconListContent>Stay six feet away from others</IconListContent>
     </IconListItem>
     <IconListItem>
       <IconListIcon className="text-red">
-        <Icon.Cancel />
+        <Icon.Cancel aria-hidden="true" />
       </IconListIcon>
       <IconListContent>Avoid large gatherings</IconListContent>
     </IconListItem>
@@ -51,27 +51,27 @@ export const SimpleContent = (): ReactElement => (
     <IconList className="usa-icon-list--primary">
       <IconListItem>
         <IconListIcon>
-          <Icon.ThumbUpAlt />
+          <Icon.ThumbUpAlt aria-hidden="true" />
         </IconListIcon>
         <IconListContent>No processing lines</IconListContent>
       </IconListItem>
       <IconListItem>
         <IconListIcon>
-          <Icon.ThumbUpAlt />
+          <Icon.ThumbUpAlt aria-hidden="true" />
         </IconListIcon>
         <IconListContent>
           Access to expedited entry benefits in other countries
         </IconListContent>
       </IconListItem>
       <IconListItem>
         <IconListIcon>
-          <Icon.ThumbUpAlt />
+          <Icon.ThumbUpAlt aria-hidden="true" />
         </IconListIcon>
         <IconListContent>Available at major U.S. airports</IconListContent>
       </IconListItem>
       <IconListItem>
         <IconListIcon>
-          <Icon.ThumbUpAlt />
+          <Icon.ThumbUpAlt aria-hidden="true" />
         </IconListIcon>
         <IconListContent>Reduced wait times</IconListContent>
       </IconListItem>
@@ -83,7 +83,7 @@ export const RichContent = (): ReactElement => (
   <IconList>
     <IconListItem>
       <IconListIcon className="text-ink">
-        <Icon.CheckCircle />
+        <Icon.CheckCircle aria-hidden="true" />
       </IconListIcon>
       <IconListContent>
         <IconListTitle type="h3">Donate cash when possible.</IconListTitle>
@@ -98,7 +98,7 @@ export const RichContent = (): ReactElement => (
     </IconListItem>
     <IconListItem>
       <IconListIcon className="text-ink">
-        <Icon.CheckCircle />
+        <Icon.CheckCircle aria-hidden="true" />
       </IconListIcon>
       <IconListContent>
         <IconListTitle type="h3">
@@ -113,7 +113,7 @@ export const RichContent = (): ReactElement => (
     </IconListItem>
     <IconListItem>
       <IconListIcon className="text-ink">
-        <Icon.CheckCircle />
+        <Icon.CheckCircle aria-hidden="true" />
       </IconListIcon>
       <IconListContent>
         <IconListTitle type="h3">
@@ -140,7 +140,7 @@ export const CustomSizeWithRichContent = (): ReactElement => (
     <IconList className="usa-icon-list--size-lg">
       <IconListItem>
         <IconListIcon className="text-green">
-          <Icon.AttachMoney />
+          <Icon.AttachMoney aria-hidden="true" />
         </IconListIcon>
         <IconListContent>
           <IconListTitle type="h3">Let the sun shine.</IconListTitle>
@@ -154,7 +154,7 @@ export const CustomSizeWithRichContent = (): ReactElement => (
       </IconListItem>
       <IconListItem>
         <IconListIcon className="text-green">
-          <Icon.AttachMoney />
+          <Icon.AttachMoney aria-hidden="true" />
         </IconListIcon>
         <IconListContent>
           <IconListTitle type="h3">Adjust your schedule.</IconListTitle>
@@ -168,7 +168,7 @@ export const CustomSizeWithRichContent = (): ReactElement => (
       </IconListItem>
       <IconListItem>
         <IconListIcon className="text-green">
-          <Icon.AttachMoney />
+          <Icon.AttachMoney aria-hidden="true" />
         </IconListIcon>
         <IconListContent>
           <IconListTitle type="h3">Fill it up.</IconListTitle>
@@ -188,7 +188,7 @@ export const CustomSize = (): ReactElement => (
   <IconList className="usa-icon-list--size-lg">
     <IconListItem>
       <IconListIcon className="text-blue">
-        <Icon.Help />
+        <Icon.Help aria-hidden="true" />
       </IconListIcon>
       <IconListContent>
         <span className="text-bold">Timing.</span> Is now the right time to
@@ -197,7 +197,7 @@ export const CustomSize = (): ReactElement => (
     </IconListItem>
     <IconListItem>
       <IconListIcon className="text-blue">
-        <Icon.Help />
+        <Icon.Help aria-hidden="true" />
       </IconListIcon>
       <IconListContent>
         <span className="text-bold">Funding.</span> Do I have enough money to
@@ -206,7 +206,7 @@ export const CustomSize = (): ReactElement => (
     </IconListItem>
     <IconListItem>
       <IconListIcon className="text-blue">
-        <Icon.Help />
+        <Icon.Help aria-hidden="true" />
       </IconListIcon>
       <IconListContent>
         <span className="text-bold">Need.</span> Will this business fill a real

diff --git a/src/components/LanguageSelector/LanguageSelectorButton.tsx b/src/components/LanguageSelector/LanguageSelectorButton.tsx
@@ -6,6 +6,7 @@ type LanguageSelectorButtonProps = {
   labelAttr?: string
   isOpen?: boolean
   onToggle: () => void
+  controls?: string
 }
 
 export const LanguageSelectorButton = ({
@@ -14,6 +15,7 @@ export const LanguageSelectorButton = ({
   isOpen,
   onToggle,
   className,
+  controls,
   ...buttonProps
 }: LanguageSelectorButtonProps &
   JSX.IntrinsicElements['button']): React.ReactElement => {
@@ -28,7 +30,7 @@ export const LanguageSelectorButton = ({
       data-testid="languageSelectorButton"
       className={classes}
       aria-expanded={isOpen}
-      aria-controls="language-options"
+      aria-controls={controls}
       onClick={(): void => onToggle()}
       type="button"
       {...buttonProps}>

diff --git a/src/components/LanguageSelector/LanguageSelectorDropdown.tsx b/src/components/LanguageSelector/LanguageSelectorDropdown.tsx
@@ -54,6 +54,7 @@ const LanguageSelectorDropdown: React.FC<LanguageSelectorProps> = ({
     className
   )
   const displayLabel = langs.find((langDef) => langDef.attr === displayLang)
+  const menuID = 'language-options'
 
   return (
     <div className={classes} data-testid="languageSelector" {...divProps}>
@@ -63,12 +64,13 @@ const LanguageSelectorDropdown: React.FC<LanguageSelectorProps> = ({
             className={classes}
             label={displayLabel?.label || label || langs[0].label}
             isOpen={isOpen}
+            controls={menuID}
             onToggle={() => setIsOpen((prevIsOpen) => !prevIsOpen)}
           />
           <Menu
             items={generateMenuItems(langs)}
             isOpen={isOpen}
-            id="language-options"
+            id={menuID}
             type="language"
           />
         </li>