Merge branch 'main' into ruizaj-a11y-issue-fixes

.all-contributorsrc

@@ -335,6 +335,16 @@
       "contributions": [
         "maintenance"
       ]
+    },
+    {
+      "login": "ocoutts-usds",
+      "name": "Owen Coutts",
+      "avatar_url": "https://avatars.githubusercontent.com/u/174364898?v=4",
+      "profile": "https://github.com/ocoutts-usds",
+      "contributions": [
+        "bug",
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [9.1.0](https://github.com/trussworks/react-uswds/compare/9.0.0...9.1.0) (2024-08-26)
+
+
+### Features
+
+* Enable custom on click handler passed via accordion item ([#2998](https://github.com/trussworks/react-uswds/issues/2998)) ([420483a](https://github.com/trussworks/react-uswds/commit/420483a0ca185844d39e193534ac07004e854920))
+
+
+### Bug Fixes
+
+* ‘use client’ directive syntax ([#2891](https://github.com/trussworks/react-uswds/issues/2891)) ([4e78d7e](https://github.com/trussworks/react-uswds/commit/4e78d7e45b40c3882c4faf345c9db6e240683453))
+* a11y omnibus package ([#2819](https://github.com/trussworks/react-uswds/issues/2819)) ([758cd74](https://github.com/trussworks/react-uswds/commit/758cd7456ee99cf49cea68bc9feb4a0d87feffab))
+* add a statusText prop to StepIndicator to allow for i18n for the sr-only element Closes [#2857](https://github.com/trussworks/react-uswds/issues/2857) ([#2888](https://github.com/trussworks/react-uswds/issues/2888)) ([855205e](https://github.com/trussworks/react-uswds/commit/855205e6927c7fce26b087520f564f4915e29aea))
+* moved smooth-scroll application to useEffect ([#2868](https://github.com/trussworks/react-uswds/issues/2868)) ([bc87158](https://github.com/trussworks/react-uswds/commit/bc8715860f47bd1f30415e40f748ca85ec288361))
+* remove defaultProps from DatePicker and Tooltip ([#2949](https://github.com/trussworks/react-uswds/issues/2949)) ([88947ca](https://github.com/trussworks/react-uswds/commit/88947ca84f0dbf3004de21c978e8b7ff7b1e5699))
+* Update TextInput ref forwarding ([#3011](https://github.com/trussworks/react-uswds/issues/3011)) ([f8ac06d](https://github.com/trussworks/react-uswds/commit/f8ac06dbb15625acbbdd8afaf58868a660653c92))
+
+
+### Documentation & Examples
+
+* Implementation examples ([#2890](https://github.com/trussworks/react-uswds/issues/2890)) ([4a68110](https://github.com/trussworks/react-uswds/commit/4a68110280e297bbb182a61136da65d2aaeaeca0))
+
 ## [9.0.0](https://github.com/trussworks/react-uswds/compare/8.0.0...9.0.0) (2024-03-21)
 
 

README.md

@@ -1,7 +1,7 @@
 # @trussworks/react-uswds
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-34-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-35-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![npm version](https://img.shields.io/npm/v/@trussworks/react-uswds)](https://www.npmjs.com/package/@trussworks/react-uswds)
@@ -218,6 +218,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://jhancock532.github.io/"><img src="https://avatars.githubusercontent.com/u/18164832?v=4?s=100" width="100px;" alt="James Hancock"/><br /><sub><b>James Hancock</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/issues?q=author%3Ajhancock532" title="Bug reports">🐛</a> <a href="https://github.com/trussworks/react-uswds/commits?author=jhancock532" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/jpandersen87"><img src="https://avatars.githubusercontent.com/u/12385932?v=4?s=100" width="100px;" alt="Joseph Andersen"/><br /><sub><b>Joseph Andersen</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=jpandersen87" title="Code">💻</a> <a href="#maintenance-jpandersen87" title="Maintenance">🚧</a> <a href="#infra-jpandersen87" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/crwallace"><img src="https://avatars.githubusercontent.com/u/3453669?v=4?s=100" width="100px;" alt="Courtney Eimerman-Wallace"/><br /><sub><b>Courtney Eimerman-Wallace</b></sub></a><br /><a href="#maintenance-crwallace" title="Maintenance">🚧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ocoutts-usds"><img src="https://avatars.githubusercontent.com/u/174364898?v=4?s=100" width="100px;" alt="Owen Coutts"/><br /><sub><b>Owen Coutts</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/issues?q=author%3Aocoutts-usds" title="Bug reports">🐛</a> <a href="https://github.com/trussworks/react-uswds/commits?author=ocoutts-usds" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trussworks/react-uswds",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "description": "React USWDS 3.0 component library",
   "keywords": [
     "react",
@@ -100,7 +100,7 @@
     "@typescript-eslint/parser": "^7.1.1",
     "@uswds/uswds": "3.7.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-istanbul": "^1.2.1",
+    "@vitest/coverage-istanbul": "^2.0.4",
     "all-contributors-cli": "^6.24.0",
     "babel-loader": "^9.1.3",
     "classnames": "^2.3.2",
@@ -130,15 +130,15 @@
     "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended": "^14.0.0",
-    "stylelint-config-sass-guidelines": "^11.0.0",
+    "stylelint-config-sass-guidelines": "^12.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-prettier": "^5.0.0",
     "typescript": "^5.1.6",
     "vite": "^5.0.12",
-    "vite-plugin-checker": "^0.6.2",
-    "vite-plugin-dts": "^3.7.1",
+    "vite-plugin-checker": "^0.7.0",
+    "vite-plugin-dts": "^4.0.3",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^1.2.1",
+    "vitest": "^2.0.4",
     "webpack": "^5.90.1",
     "yarn": "^1.22.22"
   },

src/components/Accordion/Accordion.test.tsx

@@ -377,4 +377,26 @@ describe('Accordion component', () => {
       }
     )
   })
+
+  describe('with a custom click handler', () => {
+    const customToggleFunction = vi.fn()
+
+    const customTestItems: AccordionItemProps[] = [
+      {
+        title: 'First Amendment',
+        content: firstAmendment,
+        expanded: false,
+        id: '123',
+        headingLevel: 'h4',
+        handleToggle: () => {
+          customToggleFunction()
+        },
+      },
+    ]
+    it('fires the handler successfully', () => {
+      const { getByText } = render(<Accordion items={customTestItems} />)
+      fireEvent.click(getByText(testItems[0].title as string))
+      expect(customToggleFunction).toHaveBeenCalledOnce()
+    })
+  })
 })

src/components/Accordion/Accordion.tsx

@@ -108,7 +108,8 @@ export const Accordion = ({
           key={`accordionItem_${i}`}
           {...item}
           expanded={openItems.indexOf(item.id) > -1}
-          handleToggle={(): void => {
+          handleToggle={(e): void => {
+            if (item.handleToggle) item.handleToggle(e)
             toggleItem(item.id)
           }}
         />

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={[

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

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

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

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

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

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