From 9a06e7d308b46925894f4b5a67f575f68cf73985 Mon Sep 17 00:00:00 2001 From: Andrew Nelson Date: Thu, 28 Dec 2023 10:00:51 -0800 Subject: [PATCH] feat: updates for USWDS v3.7 (#2680) Co-authored-by: haworku --- package.json | 2 +- src/components/Icon/Icon.stories.tsx | 4 ++ src/components/Icon/Icons.stories.tsx | 1 + src/components/Icon/Icons.ts | 3 + .../Identifier/Identifier.stories.tsx | 18 ++++-- .../Identifier/Identifier/Identifier.test.tsx | 12 ++-- .../IdentifierIdentity.test.tsx | 6 +- .../IdentifierMasthead.test.tsx | 6 +- src/components/Modal/Modal.test.tsx | 17 ++++++ src/components/Modal/Modal.tsx | 7 +++ src/components/forms/DatePicker/Calendar.tsx | 10 ++-- .../forms/DatePicker/DatePicker.test.tsx | 4 +- .../forms/DatePicker/DatePicker.tsx | 3 +- src/components/forms/DatePicker/i18n.ts | 12 ++-- .../forms/RangeInput/RangeInput.stories.tsx | 9 +++ .../forms/RangeInput/RangeInput.test.tsx | 58 ++++++++----------- .../forms/RangeInput/RangeInput.tsx | 58 ++++++++++--------- .../templates/createaccount.stories.tsx | 3 +- .../templates/mutliplesignin.stories.tsx | 3 +- src/stories/templates/notfound.stories.tsx | 2 +- src/stories/templates/signin.stories.tsx | 3 +- 21 files changed, 145 insertions(+), 96 deletions(-) diff --git a/package.json b/package.json index 53742e6db3..3f85285634 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ }, "homepage": "https://github.com/trussworks/react-uswds#readme", "peerDependencies": { - "@uswds/uswds": "^3.6.0", + "@uswds/uswds": "^3.7.1", "react": "^16.x || ^17.x || ^18.x", "react-dom": "^16.x || ^17.x || ^18.x" }, diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx index ff05a90947..d491099c65 100644 --- a/src/components/Icon/Icon.stories.tsx +++ b/src/components/Icon/Icon.stories.tsx @@ -974,6 +974,10 @@ export const work = (args: StorybookArgs): React.ReactElement => ( ) +export const x = (args: StorybookArgs): React.ReactElement => ( + +) + export const youtube = (args: StorybookArgs): React.ReactElement => ( ) diff --git a/src/components/Icon/Icons.stories.tsx b/src/components/Icon/Icons.stories.tsx index 4e1157043e..222c7373ca 100644 --- a/src/components/Icon/Icons.stories.tsx +++ b/src/components/Icon/Icons.stories.tsx @@ -269,6 +269,7 @@ export const allIcons = (args: StorybookArgs): React.ReactElement => ( + diff --git a/src/components/Icon/Icons.ts b/src/components/Icon/Icons.ts index 199ddb52ca..78d1d291b9 100644 --- a/src/components/Icon/Icons.ts +++ b/src/components/Icon/Icons.ts @@ -236,6 +236,7 @@ import WarningSvg from '@uswds/uswds/src/img/usa-icons/warning.svg?svgr' import WashSvg from '@uswds/uswds/src/img/usa-icons/wash.svg?svgr' import WifiSvg from '@uswds/uswds/src/img/usa-icons/wifi.svg?svgr' import WorkSvg from '@uswds/uswds/src/img/usa-icons/work.svg?svgr' +import XSvg from '@uswds/uswds/src/img/usa-icons/x.svg?svgr' import YoutubeSvg from '@uswds/uswds/src/img/usa-icons/youtube.svg?svgr' import ZoomInSvg from '@uswds/uswds/src/img/usa-icons/zoom_in.svg?svgr' import ZoomOutMapSvg from '@uswds/uswds/src/img/usa-icons/zoom_out_map.svg?svgr' @@ -910,6 +911,8 @@ export class Icon { public static Work: React.ComponentType = makeUSWDSIcon(WorkSvg) + public static X: React.ComponentType = makeUSWDSIcon(XSvg) + public static Youtube: React.ComponentType = makeUSWDSIcon(YoutubeSvg) diff --git a/src/components/Identifier/Identifier/Identifier.stories.tsx b/src/components/Identifier/Identifier/Identifier.stories.tsx index 29a889c110..6b1c0bd68b 100644 --- a/src/components/Identifier/Identifier/Identifier.stories.tsx +++ b/src/components/Identifier/Identifier/Identifier.stories.tsx @@ -132,7 +132,8 @@ export const identifierDefault = (): React.ReactElement => ( {testIdentifierLogo} - {`An official website of the `} + + {` official website of the `} Test Agency Name @@ -173,7 +174,8 @@ export const multipleParentsAndLogos = (): React.ReactElement => ( {testIdentifierLogo} - {`An official website of the `} + + {` official website of the `} Test Agency Name {` and the `} Other Test Agency Name @@ -218,7 +220,8 @@ export const moreThanTwoParentsAndLogos = (): React.ReactElement => ( {testIdentifierLogo} - {`An official website of the `} + + {` official website of the `} Test Agency Name {`, `} Second Test Agency Name @@ -239,7 +242,8 @@ export const noLogosEnglish = (): React.ReactElement => ( - {`An official website of the `} + + {` official website of the `} Test Agency Name @@ -276,7 +280,8 @@ export const taxDisclaimerEnglish = (): React.ReactElement => ( {testIdentifierLogo} - {`An official website of the `} + + {` official website of the `} Test Agency Name {`. Produced and published at taxpayer expense.`} @@ -320,7 +325,8 @@ export const taxDisclaimerAndMultipleParentsAndLogos = {testIdentifierLogo} - {`An official website of the `} + + {` official website of the `} Test Agency Name {` and the `} Other Test Agency Name diff --git a/src/components/Identifier/Identifier/Identifier.test.tsx b/src/components/Identifier/Identifier/Identifier.test.tsx index e7e090b74d..98fef96357 100644 --- a/src/components/Identifier/Identifier/Identifier.test.tsx +++ b/src/components/Identifier/Identifier/Identifier.test.tsx @@ -119,7 +119,8 @@ describe('Identifier component', () => { - {`An official website of the `} + + {` official website of the `} Test Agency Name @@ -175,7 +176,8 @@ describe('Identifier component', () => { data-testid="identifierMasthead-agency-description" domain="domain.edu.mil.gov" aria-label="Agency description"> - {`An official website of the `} + + {` official website of the `} Test Agency Name @@ -205,7 +207,8 @@ describe('Identifier component', () => { {testIdentifierLogo} - {`An official website of the `} + + {` official website of the `} Test Agency Name {`, `} Second Test Agency Name @@ -237,7 +240,8 @@ describe('Identifier component', () => { - {`An official website of the `} + + {` official website of the `} Test Agency Name {`. Produced and published at taxpayer expense.`} diff --git a/src/components/Identifier/IdentifierIdentity/IdentifierIdentity.test.tsx b/src/components/Identifier/IdentifierIdentity/IdentifierIdentity.test.tsx index 3ad24e635d..897364452c 100644 --- a/src/components/Identifier/IdentifierIdentity/IdentifierIdentity.test.tsx +++ b/src/components/Identifier/IdentifierIdentity/IdentifierIdentity.test.tsx @@ -9,7 +9,8 @@ describe('IdentifierIdentity component', () => { it('renders without errors', () => { const { queryByTestId } = render( - {`An official website of the `} + + {` official website of the `} Test Agency Name ) @@ -25,7 +26,8 @@ describe('IdentifierIdentity component', () => { className="custom-class" aria-label="Test aria label" domain="a.domain"> - {`An official website of the `} + + {` official website of the `} Test Agency Name ) diff --git a/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx b/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx index d7b9f41b31..84fe397e83 100644 --- a/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx +++ b/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx @@ -39,7 +39,8 @@ describe('IdentifierMasthead component', () => { - {`An official website of the `} + + {` official website of the `} Test Agency Name @@ -74,7 +75,8 @@ describe('IdentifierMasthead component', () => { {testIdentifierLogo} - {`An official website of the `} + + {` official website of the `} Test Agency Name {`, `} Second Test Agency Name diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx index 914ecccb72..5913715642 100644 --- a/src/components/Modal/Modal.test.tsx +++ b/src/components/Modal/Modal.test.tsx @@ -202,6 +202,23 @@ describe('Modal component', () => { expect(modalWindow).not.toHaveAttribute('aria-describedby') }) + it('throws an error if labelledby or describedby is undefined', async () => { + const consoleSpy = jest.spyOn(console, 'error') + const testModalId = 'testModal' + + renderWithModalRoot(Test modal) + + const modalWrapper = screen.getByRole('dialog') + expect(modalWrapper).not.toHaveAttribute('aria-labelledby') + expect(modalWrapper).not.toHaveAttribute('aria-describedby') + expect(consoleSpy).toHaveBeenCalledWith( + `${testModalId} is missing aria-labelledby attribute` + ) + expect(consoleSpy).toHaveBeenCalledWith( + `${testModalId} is missing aria-describedby attribute` + ) + }) + it('renders the visible state when open', async () => { const modalRef = createRef() const handleOpen = () => modalRef.current?.toggleModal(undefined, true) diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index de840f4dbb..9aa354f6d2 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -141,6 +141,13 @@ export const ModalForwardRef: React.ForwardRefRenderFunction< const ariaLabelledBy = divProps['aria-labelledby'] const ariaDescribedBy = divProps['aria-describedby'] + if (!ariaLabelledBy) { + console.error(`${id} is missing aria-labelledby attribute`) + } + if (!ariaDescribedBy) { + console.error(`${id} is missing aria-describedby attribute`) + } + delete divProps['aria-labelledby'] delete divProps['aria-describedby'] diff --git a/src/components/forms/DatePicker/Calendar.tsx b/src/components/forms/DatePicker/Calendar.tsx index c73da92c29..ab6488af92 100644 --- a/src/components/forms/DatePicker/Calendar.tsx +++ b/src/components/forms/DatePicker/Calendar.tsx @@ -103,8 +103,8 @@ export const Calendar = ({ const dayOfWeekLabels = i18n.daysOfWeek const backOneYear = i18n.backOneYear const backOneMonth = i18n.backOneMonth - const clickToSelectMonth = `${monthLabel}. ${i18n.clickToSelectMonth}` - const clickToSelectYear = `${focusedYear}. ${i18n.clickToSelectYear}` + const selectMonth = `${monthLabel}. ${i18n.selectMonth}` + const selectYear = `${focusedYear}. ${i18n.selectYear}` const forwardOneMonth = i18n.forwardOneMonth const forwardOneYear = i18n.forwardOneYear @@ -382,7 +382,7 @@ export const Calendar = ({ onClick={handleToggleMonthSelection} ref={selectMonthEl} className="usa-date-picker__calendar__month-selection" - aria-label={clickToSelectMonth}> + aria-label={selectMonth}> {monthLabel} @@ -416,7 +416,7 @@ export const Calendar = ({ disabled={nextButtonsDisabled}> - +
{dayOfWeekShortLabels.map((d, i) => ( diff --git a/src/components/forms/DatePicker/DatePicker.test.tsx b/src/components/forms/DatePicker/DatePicker.test.tsx index 7e7685b1e0..b8ee73e400 100644 --- a/src/components/forms/DatePicker/DatePicker.test.tsx +++ b/src/components/forms/DatePicker/DatePicker.test.tsx @@ -93,12 +93,12 @@ describe('DatePicker component', () => { ) }) - it('renders a hidden calendar dialog element', () => { + it('renders a hidden calendar application element', () => { const { getByTestId } = renderDatePicker() expect(getByTestId('date-picker-calendar')).toBeInstanceOf(HTMLDivElement) expect(getByTestId('date-picker-calendar')).toHaveAttribute( 'role', - 'dialog' + 'application' ) expect(getByTestId('date-picker-calendar')).not.toBeVisible() }) diff --git a/src/components/forms/DatePicker/DatePicker.tsx b/src/components/forms/DatePicker/DatePicker.tsx index 9e54b53b43..8aff890b9a 100644 --- a/src/components/forms/DatePicker/DatePicker.tsx +++ b/src/components/forms/DatePicker/DatePicker.tsx @@ -314,8 +314,7 @@ export const DatePicker = ({