feat(UsaBanner): update banner component text and simplify aria markup

patrickcate · Oct 31, 2022 · f33bc00 · f33bc00
1 parent b2c92ad
commit f33bc00
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 33 deletions.
diff --git a/src/components/UsaBanner/UsaBanner.test.js b/src/components/UsaBanner/UsaBanner.test.js
@@ -13,7 +13,7 @@ describe('UsaBanner', () => {
 
     cy.get('section.usa-banner')
       .should('have.attr', 'aria-label')
-      .and('contain', 'Official government website')
+      .and('contain', 'Official website of the United States government')
 
     cy.get('div.usa-accordion')
       .should('have.attr', 'class')
@@ -28,11 +28,9 @@ describe('UsaBanner', () => {
       .and('equal', 'usa-banner__inner')
 
     cy.get('img.usa-banner__header-flag')
-      .should('have.attr', 'alt')
-      .and('contain', 'U.S. flag')
-    cy.get('img.usa-banner__header-flag')
-      .should('have.attr', 'src')
-      .and('contain', '/assets/img/us_flag_small.png')
+      .should('have.attr', 'alt', '')
+      .and('have.attr', 'src', '/assets/img/us_flag_small.png')
+      .and('have.attr', 'aria-hidden', 'true')
 
     cy.get('.usa-banner__header-text').should(
       'contain',
@@ -42,11 +40,8 @@ describe('UsaBanner', () => {
     // Check that the default grid classes exist.
     cy.get('.grid-col-auto').should('exist')
     cy.get('.grid-col-fill').should('exist')
-    cy.get(`.tablet\\:grid-col-auto`).should('exist')
+    cy.get(`.tablet\\:grid-col-auto`).and('have.attr', 'aria-hidden', 'true')
 
-    cy.get('p.usa-banner__header-action')
-      .should('have.attr', 'aria-hidden')
-      .and('contain', 'true')
     cy.get('p.usa-banner__header-action').should(
       'contain',
       "Here's how you know"

diff --git a/src/components/UsaBanner/UsaBanner.vue b/src/components/UsaBanner/UsaBanner.vue
@@ -25,7 +25,7 @@ const props = defineProps({
   },
   ariaLabel: {
     type: String,
-    default: 'Official government website',
+    default: 'Official website of the United States government',
   },
   headerText: {
     type: String,
@@ -72,19 +72,19 @@ defineExpose({
           <div :class="`${gridNamespace}col-auto`">
             <slot name="flag">
               <img
+                aria-hidden="true"
                 class="usa-banner__header-flag"
                 :src="`${imagePath}/us_flag_small.png`"
-                alt="U.S. flag"
+                alt=""
               />
             </slot>
           </div>
           <div
+            aria-hidden="true"
             :class="`${gridNamespace}col-fill tablet${prefixSeparator}${gridNamespace}col-auto`"
           >
             <p class="usa-banner__header-text">{{ headerText }}</p>
-            <p class="usa-banner__header-action" aria-hidden="true">{{
-              actionText
-            }}</p>
+            <p class="usa-banner__header-action">{{ actionText }}</p>
           </div>
           <button
             type="button"

diff --git a/src/components/UsaBannerContent/UsaBannerContent.test.js b/src/components/UsaBannerContent/UsaBannerContent.test.js
@@ -13,26 +13,23 @@ describe('UsaBannerContent', () => {
     cy.get('img.usa-banner__icon[src$="icon-dot-gov.svg"]')
       .as('tldIcon')
       .should('have.class', 'usa-media-block__img')
-      .and('have.attr', 'role')
-      .and('contain', 'img')
-
-    cy.get('@tldIcon').should('have.attr', 'alt').and('be.empty')
-    cy.get('@tldIcon').should('have.attr', 'aria-hidden').and('contain', 'true')
+      .and('have.attr', 'role', 'img')
+      .and('have.attr', 'alt', '')
+      .and('have.attr', 'aria-hidden', 'true')
 
     cy.get('img.usa-banner__icon[src$="icon-https.svg"]')
       .as('httpsIcon')
       .should('have.class', 'usa-media-block__img')
-      .and('have.attr', 'role')
-      .and('contain', 'img')
+      .and('have.attr', 'role', 'img')
+      .and('have.attr', 'alt', '')
+      .and('have.attr', 'aria-hidden', 'true')
 
-    cy.get('@httpsIcon').should('have.attr', 'alt').and('be.empty')
-    cy.get('@httpsIcon')
-      .should('have.attr', 'aria-hidden')
-      .and('contain', 'true')
+    cy.get('span.icon-lock').should('exist')
 
     cy.get('svg.usa-banner__lock-image')
-      .should('have.attr', 'focusable')
-      .and('contain', 'false')
+      .should('have.attr', 'focusable', 'false')
+      .and('have.attr', 'role', 'img')
+      .and('have.attr', 'aria-labelledby', 'banner-lock-description')
   })
 
   it('uses custom slot content', () => {

diff --git a/src/components/UsaBannerContent/UsaBannerContent.vue b/src/components/UsaBannerContent/UsaBannerContent.vue
@@ -63,13 +63,11 @@ const imagePath = inject('vueUswds.imagePath', IMAGE_PATH)
                 viewBox="0 0 52 64"
                 class="usa-banner__lock-image"
                 role="img"
-                aria-labelledby="banner-lock-title-default banner-lock-description-default"
+                aria-labelledby="banner-lock-description"
                 focusable="false"
               >
-                <title id="banner-lock-title-default">Lock</title>
-                <desc id="banner-lock-description-default">
-                  A locked padlock
-                </desc>
+                <title id="banner-lock-title">Lock</title>
+                <desc id="banner-lock-description">Locked padlock icon</desc>
                 <path
                   fill="#000000"
                   fill-rule="evenodd"