feat: updates for USWDS v3.7 (#2680)

Co-authored-by: haworku <haworku@users.noreply.github.com>

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

src/components/Icon/Icon.stories.tsx

@@ -974,6 +974,10 @@ export const work = (args: StorybookArgs): React.ReactElement => (
   <Icon.Work {...args} />
 )
 
+export const x = (args: StorybookArgs): React.ReactElement => (
+  <Icon.X {...args} />
+)
+
 export const youtube = (args: StorybookArgs): React.ReactElement => (
   <Icon.Youtube {...args} />
 )

src/components/Icon/Icons.stories.tsx

@@ -269,6 +269,7 @@ export const allIcons = (args: StorybookArgs): React.ReactElement => (
     <Icon.Wash {...args} />
     <Icon.Wifi {...args} />
     <Icon.Work {...args} />
+    <Icon.X {...args} />
     <Icon.Youtube {...args} />
     <Icon.ZoomIn {...args} />
     <Icon.ZoomOutMap {...args} />

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<IconProps> = makeUSWDSIcon(WorkSvg)
 
+  public static X: React.ComponentType<IconProps> = makeUSWDSIcon(XSvg)
+
   public static Youtube: React.ComponentType<IconProps> =
     makeUSWDSIcon(YoutubeSvg)
 

src/components/Identifier/Identifier/Identifier.stories.tsx

@@ -132,7 +132,8 @@ export const identifierDefault = (): React.ReactElement => (
         <IdentifierLogo href="#">{testIdentifierLogo}</IdentifierLogo>
       </IdentifierLogos>
       <IdentifierIdentity domain="domain.edu.mil.gov">
-        {`An official website of the `}
+        <span aria-hidden="true">An</span>
+        {` official website of the `}
         <Link href="#">Test Agency Name</Link>
       </IdentifierIdentity>
     </IdentifierMasthead>
@@ -173,7 +174,8 @@ export const multipleParentsAndLogos = (): React.ReactElement => (
         <IdentifierLogo href="#">{testIdentifierLogo}</IdentifierLogo>
       </IdentifierLogos>
       <IdentifierIdentity domain="domain.edu.mil.gov">
-        {`An official website of the `}
+        <span aria-hidden="true">An</span>
+        {` official website of the `}
         <Link href="#">Test Agency Name</Link>
         {` and the `}
         <Link href="#">Other Test Agency Name</Link>
@@ -218,7 +220,8 @@ export const moreThanTwoParentsAndLogos = (): React.ReactElement => (
         <IdentifierLogo href="#">{testIdentifierLogo}</IdentifierLogo>
       </IdentifierLogos>
       <IdentifierIdentity domain="domain.edu.mil.gov">
-        {`An official website of the `}
+        <span aria-hidden="true">An</span>
+        {` official website of the `}
         <Link href="#">Test Agency Name</Link>
         {`, `}
         <Link href="#">Second Test Agency Name</Link>
@@ -239,7 +242,8 @@ export const noLogosEnglish = (): React.ReactElement => (
   <Identifier>
     <IdentifierMasthead aria-label="Agency identifier">
       <IdentifierIdentity domain="domain.edu.mil.gov">
-        {`An official website of the `}
+        <span aria-hidden="true">An</span>
+        {` official website of the `}
         <Link href="#">Test Agency Name</Link>
       </IdentifierIdentity>
     </IdentifierMasthead>
@@ -276,7 +280,8 @@ export const taxDisclaimerEnglish = (): React.ReactElement => (
         <IdentifierLogo href="#">{testIdentifierLogo}</IdentifierLogo>
       </IdentifierLogos>
       <IdentifierIdentity domain="domain.edu.mil.gov">
-        {`An official website of the `}
+        <span aria-hidden="true">An</span>
+        {` official website of the `}
         <Link href="#">Test Agency Name</Link>
         {`. Produced and published at taxpayer expense.`}
       </IdentifierIdentity>
@@ -320,7 +325,8 @@ export const taxDisclaimerAndMultipleParentsAndLogos =
           <IdentifierLogo href="#">{testIdentifierLogo}</IdentifierLogo>
         </IdentifierLogos>
         <IdentifierIdentity domain="domain.edu.mil.gov">
-          {`An official website of the `}
+          <span aria-hidden="true">An</span>
+          {` official website of the `}
           <Link href="#">Test Agency Name</Link>
           {` and the `}
           <Link href="#">Other Test Agency Name</Link>

src/components/Identifier/Identifier/Identifier.test.tsx

@@ -119,7 +119,8 @@ describe('Identifier component', () => {
             </IdentifierLogo>
           </IdentifierLogos>
           <IdentifierIdentity domain="domain.edu.mil.gov">
-            {`An official website of the `}
+            <span aria-hidden="true">An</span>
+            {` official website of the `}
             <Link href="testlink">Test Agency Name</Link>
           </IdentifierIdentity>
         </IdentifierMasthead>
@@ -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 `}
+            <span aria-hidden="true">An</span>
+            {` official website of the `}
             <Link href="testlink">Test Agency Name</Link>
           </IdentifierIdentity>
         </IdentifierMasthead>
@@ -205,7 +207,8 @@ describe('Identifier component', () => {
             <IdentifierLogo href="#">{testIdentifierLogo}</IdentifierLogo>
           </IdentifierLogos>
           <IdentifierIdentity domain="domain.edu.mil.gov">
-            {`An official website of the `}
+            <span aria-hidden="true">An</span>
+            {` official website of the `}
             <Link href="#">Test Agency Name</Link>
             {`, `}
             <Link href="#">Second Test Agency Name</Link>
@@ -237,7 +240,8 @@ describe('Identifier component', () => {
           <IdentifierIdentity
             data-testid="identifierMasthead-agency-description"
             domain="domain.edu.mil.gov">
-            {`An official website of the `}
+            <span aria-hidden="true">An</span>
+            {` official website of the `}
             <Link href="#">Test Agency Name</Link>
             {`. Produced and published at taxpayer expense.`}
           </IdentifierIdentity>

src/components/Identifier/IdentifierIdentity/IdentifierIdentity.test.tsx

@@ -9,7 +9,8 @@ describe('IdentifierIdentity component', () => {
   it('renders without errors', () => {
     const { queryByTestId } = render(
       <IdentifierIdentity domain="domain.edu.mil.gov">
-        {`An official website of the `}
+        <span aria-hidden="true">An</span>
+        {` official website of the `}
         <Link href="#">Test Agency Name</Link>
       </IdentifierIdentity>
     )
@@ -25,7 +26,8 @@ describe('IdentifierIdentity component', () => {
         className="custom-class"
         aria-label="Test aria label"
         domain="a.domain">
-        {`An official website of the `}
+        <span aria-hidden="true">An</span>
+        {` official website of the `}
         <Link href="#">Test Agency Name</Link>
       </IdentifierIdentity>
     )

src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx

@@ -39,7 +39,8 @@ describe('IdentifierMasthead component', () => {
           </IdentifierLogo>
         </IdentifierLogos>
         <IdentifierIdentity domain="domain.edu.mil.gov">
-          {`An official website of the `}
+          <span aria-hidden="true">An</span>
+          {` official website of the `}
           <Link href="#">Test Agency Name</Link>
         </IdentifierIdentity>
       </IdentifierMasthead>
@@ -74,7 +75,8 @@ describe('IdentifierMasthead component', () => {
           <IdentifierLogo href="#">{testIdentifierLogo}</IdentifierLogo>
         </IdentifierLogos>
         <IdentifierIdentity domain="domain.edu.mil.gov">
-          {`An official website of the `}
+          <span aria-hidden="true">An</span>
+          {` official website of the `}
           <Link href="#">Test Agency Name</Link>
           {`, `}
           <Link href="#">Second Test Agency Name</Link>

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(<Modal id={testModalId}>Test modal</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<ModalRef>()
     const handleOpen = () => modalRef.current?.toggleModal(undefined, true)

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']
 

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}
           </button>
           <button
@@ -391,7 +391,7 @@ export const Calendar = ({
             onClick={handleToggleYearSelection}
             ref={selectYearEl}
             className="usa-date-picker__calendar__year-selection"
-            aria-label={clickToSelectYear}>
+            aria-label={selectYear}>
             {focusedYear}
           </button>
         </div>
@@ -416,7 +416,7 @@ export const Calendar = ({
             disabled={nextButtonsDisabled}></button>
         </div>
       </div>
-      <table className="usa-date-picker__calendar__table" role="presentation">
+      <table className="usa-date-picker__calendar__table">
         <thead>
           <tr>
             {dayOfWeekShortLabels.map((d, i) => (

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

src/components/forms/DatePicker/DatePicker.tsx

@@ -314,8 +314,7 @@ export const DatePicker = ({
         <div
           data-testid="date-picker-calendar"
           className="usa-date-picker__calendar"
-          role="dialog"
-          aria-modal="true"
+          role="application"
           hidden={!showCalendar}
           data-value={calendarDisplayValue && formatDate(calendarDisplayValue)}
           style={{ top: `${calendarPosY}px` }}

src/components/forms/DatePicker/i18n.ts

@@ -14,8 +14,8 @@ export interface DatePickerLocalization {
   toggleCalendar: string
   backOneYear: string
   backOneMonth: string
-  clickToSelectMonth: string
-  clickToSelectYear: string
+  selectMonth: string
+  selectYear: string
   forwardOneYear: string
   forwardOneMonth: string
 }
@@ -38,8 +38,8 @@ export const EN_US = {
   backOneMonth: 'Navigate back one month',
   forwardOneYear: 'Navigate forward one year',
   forwardOneMonth: 'Navigate forward one month',
-  clickToSelectMonth: 'Click to select month',
-  clickToSelectYear: 'Click to select year',
+  selectMonth: 'Select month',
+  selectYear: 'Select year',
 }
 
 export const sampleLocalization = {
@@ -81,6 +81,6 @@ export const sampleLocalization = {
   backOneMonth: 'Navegar hacia atrás un mes',
   forwardOneYear: 'Navegar hacia adelante un año',
   forwardOneMonth: 'Navegar hacia adelante un mes',
-  clickToSelectMonth: 'Haga clic para seleccionar el mes',
-  clickToSelectYear: 'Haga clic para seleccionar el año',
+  selectMonth: 'Selecciona el mes',
+  selectYear: 'Selecciona el año',
 }

src/components/forms/RangeInput/RangeInput.stories.tsx

@@ -72,3 +72,12 @@ export const dataListRange = (): React.ReactElement => (
     </datalist>
   </>
 )
+
+export const WithUnitAndPreposition = (): React.ReactElement => (
+  <RangeInput
+    id="custom-range-slider"
+    name="rangeValue"
+    textPreposition="de"
+    textUnit="por ciento"
+  />
+)