Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Update banner aria props with changes from USWDS #2384

Merged
merged 3 commits into from
May 5, 2023
Merged

feat: Update banner aria props with changes from USWDS #2384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bcc241c
Update banner aria props with changes from https://github.com/uswds/u…
brandonlenz May 4, 2023
265cd88
fix tests
brandonlenz May 4, 2023
32064cc
Merge branch 'main' into bl-update-banner-aria
brandonlenz May 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/banner/BannerHeader/BannerHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export const BannerHeader = ({
)}
<div
className="grid-col-fill tablet:grid-col-auto"
aria-hidden
data-testid="banner-header-grid-div">
<p className={headerTextClasses} {...remainingHeaderTextProps}>
{headerText}
Expand Down
5 changes: 1 addition & 4 deletions src/components/banner/BannerLockImage/BannerLockImage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,7 @@ describe('BannerIcon Component', () => {

expect(span).toHaveClass('icon-lock')
expect(svg).toHaveClass('usa-banner__lock-image')
expect(svg).toHaveAttribute(
'aria-labelledby',
'banner-lock-title banner-lock-description'
)
expect(svg).toHaveAttribute('aria-labelledby', 'banner-lock-description')
expect(title).toHaveProperty('id', 'banner-lock-title')
expect(description).toHaveProperty('id', 'banner-lock-description')
})
Expand Down
2 changes: 1 addition & 1 deletion src/components/banner/BannerLockImage/BannerLockImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const BannerLockImage = ({
viewBox="0 0 52 64"
className={svgClasses}
role="img"
aria-labelledby="banner-lock-title banner-lock-description"
aria-labelledby="banner-lock-description"
focusable="false"
{...remainingSvgProps}>
<title id="banner-lock-title" {...titleProps}>
Expand Down
8 changes: 5 additions & 3 deletions src/components/banner/CustomBanner.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,15 @@ import httpsIcon from '@uswds/uswds/src/img/icon-https.svg'
const CustomBanner = (): ReactElement => {
const [isOpen, setIsOpen] = useState(false)

const lock = <BannerLockImage title="Lock" description="A locked padlock" />
const lock = (
<BannerLockImage title="Lock" description="Locked padlock icon" />
)

return (
<Banner>
<Banner aria-label="Official website of the state department of something specific">
<BannerHeader
isOpen={isOpen}
flagImg={<BannerFlag src={flagImg} alt="U.S. flag" />}
flagImg={<BannerFlag src={flagImg} aria-hidden alt="" />}
headerText="This is an official website of the state department of something specific"
headerActionText="Here's how you know">
<BannerButton
Expand Down
8 changes: 7 additions & 1 deletion src/components/banner/GovBanner/GovBanner.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ import { GovBanner } from './GovBanner'
describe('GovBanner component', () => {
it('renders without errors', () => {
const { queryByTestId } = render(<GovBanner />)
expect(queryByTestId('govBanner')).toBeInTheDocument()

const banner = queryByTestId('govBanner')
expect(banner).toBeInTheDocument()
expect(banner).toHaveAttribute(
'aria-label',
'Official website of the United States government'
)
})

it('renders section attributes passed in through props', () => {
Expand Down
39 changes: 28 additions & 11 deletions src/components/banner/GovBanner/GovBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ type TLD = '.gov' | '.mil'

interface GovBannerCopy {
header: string
ariaLabel: string
headerAction: string
tldSectionHeader: string
tldSectionContent: JSX.Element
Expand All @@ -28,12 +29,15 @@ interface GovBannerCopy {
}

const getCopy = (language: Language, tld: TLD): GovBannerCopy => {
const lock = <BannerLockImage title="Lock" description="A locked padlock" />
const lock = (
<BannerLockImage title="Lock" description="Locked padlock icon" />
)

switch (language) {
case 'english':
return {
header: 'An official website of the United States government',
ariaLabel: 'Official website of the United States government',
headerAction: 'Here’s how you know',
tldSectionHeader: `Official websites use ${tld}`,
tldSectionContent: ((): JSX.Element => {
Expand Down Expand Up @@ -66,6 +70,7 @@ const getCopy = (language: Language, tld: TLD): GovBannerCopy => {
case 'spanish':
return {
header: 'Un sitio oficial del Gobierno de Estados Unidos',
ariaLabel: 'Un sitio oficial del Gobierno de Estados Unidos',
headerAction: 'Así es como usted puede verificarlo',
tldSectionHeader: `Los sitios web oficiales usan ${tld}`,
tldSectionContent: ((): JSX.Element => {
Expand Down Expand Up @@ -112,22 +117,34 @@ export const GovBanner = ({
}: GovBannerProps & JSX.IntrinsicElements['section']): ReactElement => {
const [isOpen, setIsOpen] = useState(false)

const copy = getCopy(language, tld)
const {
header,
ariaLabel,
headerAction,
httpsSectionHeader,
httpsSectionContent,
tldSectionHeader,
tldSectionContent,
} = getCopy(language, tld)

return (
<Banner className={className} data-testid="govBanner" {...sectionProps}>
<Banner
className={className}
data-testid="govBanner"
aria-label={ariaLabel}
{...sectionProps}>
<BannerHeader
isOpen={isOpen}
flagImg={<BannerFlag src={flagImg} alt="U.S. flag" />}
headerText={copy.header}
headerActionText={copy.headerAction}>
flagImg={<BannerFlag src={flagImg} aria-hidden alt="" />}
headerText={header}
headerActionText={headerAction}>
<BannerButton
isOpen={isOpen}
aria-controls="gov-banner"
onClick={(): void => {
setIsOpen((previousIsOpen) => !previousIsOpen)
}}>
{copy.headerAction}
{headerAction}
</BannerButton>
</BannerHeader>
<BannerContent id="gov-banner" isOpen={isOpen}>
Expand All @@ -136,19 +153,19 @@ export const GovBanner = ({
<BannerIcon src={dotGovIcon} alt="" />
<MediaBlockBody>
<p>
<strong>{copy.tldSectionHeader}</strong>
<strong>{tldSectionHeader}</strong>
<br />
{copy.tldSectionContent}
{tldSectionContent}
</p>
</MediaBlockBody>
</BannerGuidance>
<BannerGuidance className="tablet:grid-col-6">
<BannerIcon src={httpsIcon} alt="" />
<MediaBlockBody>
<p>
<strong>{copy.httpsSectionHeader}</strong>
<strong>{httpsSectionHeader}</strong>
<br />
{copy.httpsSectionContent}
{httpsSectionContent}
</p>
</MediaBlockBody>
</BannerGuidance>
Expand Down
45 changes: 30 additions & 15 deletions src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

exports[`GovBanner component static content renders consistently in English for .gov sites 1`] = `
<section
aria-label="Official website of the United States government"
className="usa-banner"
data-testid="govBanner"
>
Expand All @@ -20,12 +21,14 @@ exports[`GovBanner component static content renders consistently in English for
data-testid="banner-header-flag-div"
>
<img
alt="U.S. flag"
alt=""
aria-hidden={true}
className="usa-banner__header-flag"
src="test-file-stub"
/>
</div>
<div
aria-hidden={true}
className="grid-col-fill tablet:grid-col-auto"
data-testid="banner-header-grid-div"
>
Expand Down Expand Up @@ -115,7 +118,7 @@ exports[`GovBanner component static content renders consistently in English for
className="icon-lock"
>
<svg
aria-labelledby="banner-lock-title banner-lock-description"
aria-labelledby="banner-lock-description"
className="usa-banner__lock-image"
focusable="false"
height="64"
Expand All @@ -132,7 +135,7 @@ exports[`GovBanner component static content renders consistently in English for
<desc
id="banner-lock-description"
>
A locked padlock
Locked padlock icon
</desc>
<path
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
Expand Down Expand Up @@ -162,6 +165,7 @@ exports[`GovBanner component static content renders consistently in English for

exports[`GovBanner component static content renders consistently in English for .mil sites 1`] = `
<section
aria-label="Official website of the United States government"
className="usa-banner"
data-testid="govBanner"
>
Expand All @@ -180,12 +184,14 @@ exports[`GovBanner component static content renders consistently in English for
data-testid="banner-header-flag-div"
>
<img
alt="U.S. flag"
alt=""
aria-hidden={true}
className="usa-banner__header-flag"
src="test-file-stub"
/>
</div>
<div
aria-hidden={true}
className="grid-col-fill tablet:grid-col-auto"
data-testid="banner-header-grid-div"
>
Expand Down Expand Up @@ -275,7 +281,7 @@ exports[`GovBanner component static content renders consistently in English for
className="icon-lock"
>
<svg
aria-labelledby="banner-lock-title banner-lock-description"
aria-labelledby="banner-lock-description"
className="usa-banner__lock-image"
focusable="false"
height="64"
Expand All @@ -292,7 +298,7 @@ exports[`GovBanner component static content renders consistently in English for
<desc
id="banner-lock-description"
>
A locked padlock
Locked padlock icon
</desc>
<path
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
Expand Down Expand Up @@ -322,6 +328,7 @@ exports[`GovBanner component static content renders consistently in English for

exports[`GovBanner component static content renders consistently in Spanish for .gov sites 1`] = `
<section
aria-label="Un sitio oficial del Gobierno de Estados Unidos"
className="usa-banner"
data-testid="govBanner"
>
Expand All @@ -340,12 +347,14 @@ exports[`GovBanner component static content renders consistently in Spanish for
data-testid="banner-header-flag-div"
>
<img
alt="U.S. flag"
alt=""
aria-hidden={true}
className="usa-banner__header-flag"
src="test-file-stub"
/>
</div>
<div
aria-hidden={true}
className="grid-col-fill tablet:grid-col-auto"
data-testid="banner-header-grid-div"
>
Expand Down Expand Up @@ -435,7 +444,7 @@ exports[`GovBanner component static content renders consistently in Spanish for
className="icon-lock"
>
<svg
aria-labelledby="banner-lock-title banner-lock-description"
aria-labelledby="banner-lock-description"
className="usa-banner__lock-image"
focusable="false"
height="64"
Expand All @@ -452,7 +461,7 @@ exports[`GovBanner component static content renders consistently in Spanish for
<desc
id="banner-lock-description"
>
A locked padlock
Locked padlock icon
</desc>
<path
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
Expand Down Expand Up @@ -482,6 +491,7 @@ exports[`GovBanner component static content renders consistently in Spanish for

exports[`GovBanner component static content renders consistently in Spanish for .mil sites 1`] = `
<section
aria-label="Un sitio oficial del Gobierno de Estados Unidos"
className="usa-banner"
data-testid="govBanner"
>
Expand All @@ -500,12 +510,14 @@ exports[`GovBanner component static content renders consistently in Spanish for
data-testid="banner-header-flag-div"
>
<img
alt="U.S. flag"
alt=""
aria-hidden={true}
className="usa-banner__header-flag"
src="test-file-stub"
/>
</div>
<div
aria-hidden={true}
className="grid-col-fill tablet:grid-col-auto"
data-testid="banner-header-grid-div"
>
Expand Down Expand Up @@ -595,7 +607,7 @@ exports[`GovBanner component static content renders consistently in Spanish for
className="icon-lock"
>
<svg
aria-labelledby="banner-lock-title banner-lock-description"
aria-labelledby="banner-lock-description"
className="usa-banner__lock-image"
focusable="false"
height="64"
Expand All @@ -612,7 +624,7 @@ exports[`GovBanner component static content renders consistently in Spanish for
<desc
id="banner-lock-description"
>
A locked padlock
Locked padlock icon
</desc>
<path
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
Expand Down Expand Up @@ -642,6 +654,7 @@ exports[`GovBanner component static content renders consistently in Spanish for

exports[`GovBanner component static content renders consistently with default props 1`] = `
<section
aria-label="Official website of the United States government"
className="usa-banner"
data-testid="govBanner"
>
Expand All @@ -660,12 +673,14 @@ exports[`GovBanner component static content renders consistently with default pr
data-testid="banner-header-flag-div"
>
<img
alt="U.S. flag"
alt=""
aria-hidden={true}
className="usa-banner__header-flag"
src="test-file-stub"
/>
</div>
<div
aria-hidden={true}
className="grid-col-fill tablet:grid-col-auto"
data-testid="banner-header-grid-div"
>
Expand Down Expand Up @@ -755,7 +770,7 @@ exports[`GovBanner component static content renders consistently with default pr
className="icon-lock"
>
<svg
aria-labelledby="banner-lock-title banner-lock-description"
aria-labelledby="banner-lock-description"
className="usa-banner__lock-image"
focusable="false"
height="64"
Expand All @@ -772,7 +787,7 @@ exports[`GovBanner component static content renders consistently with default pr
<desc
id="banner-lock-description"
>
A locked padlock
Locked padlock icon
</desc>
<path
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
Expand Down