Skip to content

Commit 63a59a7

Browse files
aliggaligg
authored
Merge branch 'main' into aligg/defaultProps-2918
2 parents a51cdb1 + 20a1908 commit 63a59a7

26 files changed

+544
-387
lines changed

‎src/components/Footer/Footer/Footer.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export const MediumFooter = (): React.ReactElement => (
139139
/>
140140
<div className="usa-footer__contact-links mobile-lg:grid-col-6">
141141
<SocialLinks links={socialLinkItems} />
142-
<h3 className="usa-footer__contact-heading">Agency Contact Center</h3>
142+
<p className="usa-footer__contact-heading">Agency Contact Center</p>
143143
<Address
144144
size="medium"
145145
items={[
@@ -225,7 +225,7 @@ export const BigFooter = (): React.ReactElement => (
225225
/>
226226
<div className="usa-footer__contact-links mobile-lg:grid-col-6">
227227
<SocialLinks links={socialLinkItems} />
228-
<h3 className="usa-footer__contact-heading">Agency Contact Center</h3>
228+
<p className="usa-footer__contact-heading">Agency Contact Center</p>
229229
<Address
230230
size="big"
231231
items={[

‎src/components/Footer/SocialLinks/SocialLinks.test.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable jsx-a11y/anchor-is-valid */
22
import React from 'react'
3-
import { render, screen } from '@testing-library/react'
3+
import { render } from '@testing-library/react'
44

55
import { SocialLinks, SocialLink } from './SocialLinks'
66

@@ -43,6 +43,5 @@ describe('SocialLink component', () => {
4343
const link = container.querySelector('.usa-social-link')
4444
expect(link).toBeInTheDocument()
4545
expect(link).toHaveAttribute('title', 'Instagram')
46-
expect(screen.getByRole('img')).toHaveAttribute('name', 'Instagram')
4746
})
4847
})

‎src/components/Footer/SocialLinks/SocialLinks.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,11 @@ export const SocialLink = ({
5757
return (
5858
<a className="usa-social-link" {...props} title={name}>
5959
{IconComponent && (
60-
<IconComponent className="usa-social-link__icon" name={name} />
60+
<IconComponent
61+
className="usa-social-link__icon"
62+
name={name}
63+
aria-hidden="true"
64+
/>
6165
)}
6266
</a>
6367
)

‎src/components/Icon/Icon.stories.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,23 @@ Source: https://designsystem.digital.gov/components/icon/
2323
argTypes: {
2424
size: {
2525
control: {
26-
type: 'select',
27-
options: [3, 4, 5, 6, 7, 8, 9],
26+
type: 'number',
27+
min: 3,
28+
max: 9,
29+
step: 1,
30+
},
31+
},
32+
'aria-label': {
33+
name: 'aria-label',
34+
description: 'Add this if and only aria-hidden is false',
35+
control: {
36+
type: 'text',
2837
},
2938
},
3039
},
3140
args: {
3241
size: 4,
42+
'aria-hidden': true,
3343
},
3444
}
3545

‎src/components/Icon/Icon.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,16 @@ export const makeUSWDSIcon = (
3737
...iconProps,
3838
}
3939

40+
if (
41+
'img' === role &&
42+
!iconProps['aria-hidden'] &&
43+
!iconProps['aria-label'] &&
44+
!iconProps['aria-labelledby']
45+
) {
46+
console.warn(
47+
`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`
48+
)
49+
}
4050
return <Component {...finalProps} />
4151
}
4252
IconFunctionalComponent.displayName = Component.displayName

‎src/components/Icon/Icons.stories.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,16 @@ Source: https://designsystem.digital.gov/components/icon/
2121
argTypes: {
2222
size: {
2323
control: {
24-
type: 'select',
25-
options: [3, 4, 5, 6, 7, 8, 9],
24+
type: 'number',
25+
min: 3,
26+
max: 9,
27+
step: 1,
2628
},
2729
},
2830
},
2931
args: {
3032
size: 4,
33+
'aria-hidden': true,
3134
},
3235
}
3336

‎src/components/IconList/IconList.stories.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,21 @@ export const Default = (): ReactElement => (
2424
<IconList>
2525
<IconListItem>
2626
<IconListIcon className="text-green">
27-
<Icon.CheckCircle />
27+
<Icon.CheckCircle aria-hidden="true" />
2828
</IconListIcon>
2929
<IconListContent>
3030
Wash your hands for 20 seconds with soap
3131
</IconListContent>
3232
</IconListItem>
3333
<IconListItem>
3434
<IconListIcon className="text-green">
35-
<Icon.CheckCircle />
35+
<Icon.CheckCircle aria-hidden="true" />
3636
</IconListIcon>
3737
<IconListContent>Stay six feet away from others</IconListContent>
3838
</IconListItem>
3939
<IconListItem>
4040
<IconListIcon className="text-red">
41-
<Icon.Cancel />
41+
<Icon.Cancel aria-hidden="true" />
4242
</IconListIcon>
4343
<IconListContent>Avoid large gatherings</IconListContent>
4444
</IconListItem>
@@ -51,27 +51,27 @@ export const SimpleContent = (): ReactElement => (
5151
<IconList className="usa-icon-list--primary">
5252
<IconListItem>
5353
<IconListIcon>
54-
<Icon.ThumbUpAlt />
54+
<Icon.ThumbUpAlt aria-hidden="true" />
5555
</IconListIcon>
5656
<IconListContent>No processing lines</IconListContent>
5757
</IconListItem>
5858
<IconListItem>
5959
<IconListIcon>
60-
<Icon.ThumbUpAlt />
60+
<Icon.ThumbUpAlt aria-hidden="true" />
6161
</IconListIcon>
6262
<IconListContent>
6363
Access to expedited entry benefits in other countries
6464
</IconListContent>
6565
</IconListItem>
6666
<IconListItem>
6767
<IconListIcon>
68-
<Icon.ThumbUpAlt />
68+
<Icon.ThumbUpAlt aria-hidden="true" />
6969
</IconListIcon>
7070
<IconListContent>Available at major U.S. airports</IconListContent>
7171
</IconListItem>
7272
<IconListItem>
7373
<IconListIcon>
74-
<Icon.ThumbUpAlt />
74+
<Icon.ThumbUpAlt aria-hidden="true" />
7575
</IconListIcon>
7676
<IconListContent>Reduced wait times</IconListContent>
7777
</IconListItem>
@@ -83,7 +83,7 @@ export const RichContent = (): ReactElement => (
8383
<IconList>
8484
<IconListItem>
8585
<IconListIcon className="text-ink">
86-
<Icon.CheckCircle />
86+
<Icon.CheckCircle aria-hidden="true" />
8787
</IconListIcon>
8888
<IconListContent>
8989
<IconListTitle type="h3">Donate cash when possible.</IconListTitle>
@@ -98,7 +98,7 @@ export const RichContent = (): ReactElement => (
9898
</IconListItem>
9999
<IconListItem>
100100
<IconListIcon className="text-ink">
101-
<Icon.CheckCircle />
101+
<Icon.CheckCircle aria-hidden="true" />
102102
</IconListIcon>
103103
<IconListContent>
104104
<IconListTitle type="h3">
@@ -113,7 +113,7 @@ export const RichContent = (): ReactElement => (
113113
</IconListItem>
114114
<IconListItem>
115115
<IconListIcon className="text-ink">
116-
<Icon.CheckCircle />
116+
<Icon.CheckCircle aria-hidden="true" />
117117
</IconListIcon>
118118
<IconListContent>
119119
<IconListTitle type="h3">
@@ -140,7 +140,7 @@ export const CustomSizeWithRichContent = (): ReactElement => (
140140
<IconList className="usa-icon-list--size-lg">
141141
<IconListItem>
142142
<IconListIcon className="text-green">
143-
<Icon.AttachMoney />
143+
<Icon.AttachMoney aria-hidden="true" />
144144
</IconListIcon>
145145
<IconListContent>
146146
<IconListTitle type="h3">Let the sun shine.</IconListTitle>
@@ -154,7 +154,7 @@ export const CustomSizeWithRichContent = (): ReactElement => (
154154
</IconListItem>
155155
<IconListItem>
156156
<IconListIcon className="text-green">
157-
<Icon.AttachMoney />
157+
<Icon.AttachMoney aria-hidden="true" />
158158
</IconListIcon>
159159
<IconListContent>
160160
<IconListTitle type="h3">Adjust your schedule.</IconListTitle>
@@ -168,7 +168,7 @@ export const CustomSizeWithRichContent = (): ReactElement => (
168168
</IconListItem>
169169
<IconListItem>
170170
<IconListIcon className="text-green">
171-
<Icon.AttachMoney />
171+
<Icon.AttachMoney aria-hidden="true" />
172172
</IconListIcon>
173173
<IconListContent>
174174
<IconListTitle type="h3">Fill it up.</IconListTitle>
@@ -188,7 +188,7 @@ export const CustomSize = (): ReactElement => (
188188
<IconList className="usa-icon-list--size-lg">
189189
<IconListItem>
190190
<IconListIcon className="text-blue">
191-
<Icon.Help />
191+
<Icon.Help aria-hidden="true" />
192192
</IconListIcon>
193193
<IconListContent>
194194
<span className="text-bold">Timing.</span> Is now the right time to
@@ -197,7 +197,7 @@ export const CustomSize = (): ReactElement => (
197197
</IconListItem>
198198
<IconListItem>
199199
<IconListIcon className="text-blue">
200-
<Icon.Help />
200+
<Icon.Help aria-hidden="true" />
201201
</IconListIcon>
202202
<IconListContent>
203203
<span className="text-bold">Funding.</span> Do I have enough money to
@@ -206,7 +206,7 @@ export const CustomSize = (): ReactElement => (
206206
</IconListItem>
207207
<IconListItem>
208208
<IconListIcon className="text-blue">
209-
<Icon.Help />
209+
<Icon.Help aria-hidden="true" />
210210
</IconListIcon>
211211
<IconListContent>
212212
<span className="text-bold">Need.</span> Will this business fill a real

‎src/components/LanguageSelector/LanguageSelectorButton.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ type LanguageSelectorButtonProps = {
66
labelAttr?: string
77
isOpen?: boolean
88
onToggle: () => void
9+
controls?: string
910
}
1011

1112
export const LanguageSelectorButton = ({
@@ -14,6 +15,7 @@ export const LanguageSelectorButton = ({
1415
isOpen,
1516
onToggle,
1617
className,
18+
controls,
1719
...buttonProps
1820
}: LanguageSelectorButtonProps &
1921
JSX.IntrinsicElements['button']): React.ReactElement => {
@@ -28,7 +30,7 @@ export const LanguageSelectorButton = ({
2830
data-testid="languageSelectorButton"
2931
className={classes}
3032
aria-expanded={isOpen}
31-
aria-controls="language-options"
33+
aria-controls={controls}
3234
onClick={(): void => onToggle()}
3335
type="button"
3436
{...buttonProps}>

‎src/components/LanguageSelector/LanguageSelectorDropdown.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const LanguageSelectorDropdown: React.FC<LanguageSelectorProps> = ({
5454
className
5555
)
5656
const displayLabel = langs.find((langDef) => langDef.attr === displayLang)
57+
const menuID = 'language-options'
5758

5859
return (
5960
<div className={classes} data-testid="languageSelector" {...divProps}>
@@ -63,12 +64,13 @@ const LanguageSelectorDropdown: React.FC<LanguageSelectorProps> = ({
6364
className={classes}
6465
label={displayLabel?.label || label || langs[0].label}
6566
isOpen={isOpen}
67+
controls={menuID}
6668
onToggle={() => setIsOpen((prevIsOpen) => !prevIsOpen)}
6769
/>
6870
<Menu
6971
items={generateMenuItems(langs)}
7072
isOpen={isOpen}
71-
id="language-options"
73+
id={menuID}
7274
type="language"
7375
/>
7476
</li>

0 commit comments

Comments
 (0)