From bcc241cf906200ad19ed0988cd239ecf1f92fb65 Mon Sep 17 00:00:00 2001
From: brandonlenz <brandonalenz@gmail.com>
Date: Thu, 4 May 2023 12:42:47 -0400
Subject: [PATCH 1/2] Update banner aria props with changes from
 https://github.com/uswds/uswds/pull/4925/files

---
 .../banner/BannerHeader/BannerHeader.tsx      |  1 +
 .../BannerLockImage/BannerLockImage.tsx       |  2 +-
 .../banner/CustomBanner.stories.tsx           |  8 ++--
 .../banner/GovBanner/GovBanner.test.tsx       |  8 +++-
 src/components/banner/GovBanner/GovBanner.tsx | 39 +++++++++++++------
 .../__snapshots__/GovBanner.test.tsx.snap     |  9 +++--
 6 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/src/components/banner/BannerHeader/BannerHeader.tsx b/src/components/banner/BannerHeader/BannerHeader.tsx
index ce2310b50e..db25363117 100644
--- a/src/components/banner/BannerHeader/BannerHeader.tsx
+++ b/src/components/banner/BannerHeader/BannerHeader.tsx
@@ -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}
diff --git a/src/components/banner/BannerLockImage/BannerLockImage.tsx b/src/components/banner/BannerLockImage/BannerLockImage.tsx
index 359d22f4f9..84fb6c1f96 100644
--- a/src/components/banner/BannerLockImage/BannerLockImage.tsx
+++ b/src/components/banner/BannerLockImage/BannerLockImage.tsx
@@ -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}>
diff --git a/src/components/banner/CustomBanner.stories.tsx b/src/components/banner/CustomBanner.stories.tsx
index 6cf5240a4f..9151bd2617 100644
--- a/src/components/banner/CustomBanner.stories.tsx
+++ b/src/components/banner/CustomBanner.stories.tsx
@@ -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
diff --git a/src/components/banner/GovBanner/GovBanner.test.tsx b/src/components/banner/GovBanner/GovBanner.test.tsx
index 8080d1fa3a..2e376ea4aa 100644
--- a/src/components/banner/GovBanner/GovBanner.test.tsx
+++ b/src/components/banner/GovBanner/GovBanner.test.tsx
@@ -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', () => {
diff --git a/src/components/banner/GovBanner/GovBanner.tsx b/src/components/banner/GovBanner/GovBanner.tsx
index 7305d555cf..b6a9831204 100644
--- a/src/components/banner/GovBanner/GovBanner.tsx
+++ b/src/components/banner/GovBanner/GovBanner.tsx
@@ -20,6 +20,7 @@ type TLD = '.gov' | '.mil'
 
 interface GovBannerCopy {
   header: string
+  ariaLabel: string
   headerAction: string
   tldSectionHeader: string
   tldSectionContent: JSX.Element
@@ -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 => {
@@ -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 => {
@@ -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}>
@@ -136,9 +153,9 @@ export const GovBanner = ({
             <BannerIcon src={dotGovIcon} alt="" />
             <MediaBlockBody>
               <p>
-                <strong>{copy.tldSectionHeader}</strong>
+                <strong>{tldSectionHeader}</strong>
                 <br />
-                {copy.tldSectionContent}
+                {tldSectionContent}
               </p>
             </MediaBlockBody>
           </BannerGuidance>
@@ -146,9 +163,9 @@ export const GovBanner = ({
             <BannerIcon src={httpsIcon} alt="" />
             <MediaBlockBody>
               <p>
-                <strong>{copy.httpsSectionHeader}</strong>
+                <strong>{httpsSectionHeader}</strong>
                 <br />
-                {copy.httpsSectionContent}
+                {httpsSectionContent}
               </p>
             </MediaBlockBody>
           </BannerGuidance>
diff --git a/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap b/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap
index 65b636d14a..628bdd98b9 100644
--- a/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap
+++ b/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap
@@ -642,6 +642,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"
 >
@@ -660,12 +661,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"
         >
@@ -755,7 +758,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"
@@ -772,7 +775,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"

From 265cd88167af8d403387b445ad7610bc18bbbfbd Mon Sep 17 00:00:00 2001
From: brandonlenz <brandonalenz@gmail.com>
Date: Thu, 4 May 2023 13:26:05 -0400
Subject: [PATCH 2/2] fix tests

---
 .../BannerLockImage/BannerLockImage.test.tsx  |  5 +--
 .../__snapshots__/GovBanner.test.tsx.snap     | 36 ++++++++++++-------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/banner/BannerLockImage/BannerLockImage.test.tsx b/src/components/banner/BannerLockImage/BannerLockImage.test.tsx
index 8437e98ec5..e59187dc98 100644
--- a/src/components/banner/BannerLockImage/BannerLockImage.test.tsx
+++ b/src/components/banner/BannerLockImage/BannerLockImage.test.tsx
@@ -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')
   })
diff --git a/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap b/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap
index 628bdd98b9..3e6909a0ac 100644
--- a/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap
+++ b/src/components/banner/GovBanner/__snapshots__/GovBanner.test.tsx.snap
@@ -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"
 >
@@ -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"
         >
@@ -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"
@@ -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"
@@ -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"
 >
@@ -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"
         >
@@ -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"
@@ -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"
@@ -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"
 >
@@ -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"
         >
@@ -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"
@@ -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"
@@ -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"
 >
@@ -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"
         >
@@ -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"
@@ -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"