Add role attribute to SVG images per revisions in USWDS 2.7.1

See: https://designsystem.digital.gov/about/releases/#version-271
18F · Oct 15, 2020 · a67fff0 · a67fff0
1 parent 231ebd3
commit a67fff0
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 36 deletions.
diff --git a/docs/_components/badges.md b/docs/_components/badges.md
@@ -14,7 +14,7 @@ The unphishable badge is used to indicate that an account is only using security
 
 {% capture example %}
 <div class="lg-verification-badge">
-  <img src="{{ site.baseurl }}/assets/img/alerts/unphishable.svg" width="16" height="16" class="text-middle" alt="unphishable icon" id="unphishable_badge" />
+  <img src="{{ site.baseurl }}/assets/img/alerts/unphishable.svg" role="img" width="16" height="16" class="text-middle" alt="unphishable icon" id="unphishable_badge" />
   <span>Unphishable</span>
 </div>
 {% endcapture %}
@@ -26,7 +26,7 @@ A verfied account badge is used to indicate that an account has completed the id
 
 {% capture example %}
 <div class="lg-verification-badge">
-  <img src="{{ site.baseurl }}/assets/img/alerts/success-badge.svg" width="16" height="16" class="text-middle" alt="verification icon" id="verified_account_badge" />
+  <img src="{{ site.baseurl }}/assets/img/alerts/success-badge.svg" role="img" width="16" height="16" class="text-middle" alt="verification icon" id="verified_account_badge" />
   <span>Verified Account</span>
 </div>
 {% endcapture %}

diff --git a/docs/_components/tooltips.md b/docs/_components/tooltips.md
@@ -14,7 +14,7 @@ Tooltips can be useful means to display information to a user, most typically in
 
 {% capture example %}
 <span class="usa-tooltip usa-tooltip--top" aria-label="Hello there! You look nice today." tabindex="0">
-  <img src="{{ site.baseurl }}/assets/img/tooltip.svg" width="16" height="16" class="text-middle" alt="Help icon" />
+  <img src="{{ site.baseurl }}/assets/img/tooltip.svg" role="img" width="16" height="16" class="text-middle" alt="Help icon" />
 </span>
 {% endcapture %}
 {% include helpers/code-example.html code=example %}

diff --git a/docs/_includes/banner.html b/docs/_includes/banner.html
@@ -20,7 +20,7 @@
     <div class="usa-banner__content usa-accordion__content" id="gov-banner">
       <div class="grid-row grid-gap-lg">
         <div class="usa-banner__guidance tablet:grid-col-6">
-          <img class="usa-banner__icon usa-media-block__img" src="{{ site.baseurl }}/assets/img/icon-dot-gov.svg" alt="Dot gov">
+          <img class="usa-banner__icon usa-media-block__img" src="{{ site.baseurl }}/assets/img/icon-dot-gov.svg" role="img" alt="Dot gov">
           <div class="usa-media-block__body">
             <p>
               <strong>The .gov means it’s official.</strong>
@@ -30,7 +30,7 @@
           </div>
         </div>
         <div class="usa-banner__guidance tablet:grid-col-6">
-          <img class="usa-banner__icon usa-media-block__img" src="{{ site.baseurl }}/assets/img/icon-https.svg" alt="Https">
+          <img class="usa-banner__icon usa-media-block__img" src="{{ site.baseurl }}/assets/img/icon-https.svg" role="img" alt="Https">
           <div class="usa-media-block__body">
             <p>
               <strong>The site is secure.</strong>

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
@@ -13,7 +13,7 @@
     <div class="grid-container">
       <div class="usa-footer__logo grid-row grid-gap-2">
         <div class="grid-col-auto">
-          <img src="{{ site.baseurl }}/assets/img/gsa-logo-rev.svg" alt="U.S. General Services Administration logo" class="usa-footer__logo-img usa-footer__slim usa-footer__medium">
+          <img src="{{ site.baseurl }}/assets/img/gsa-logo-rev.svg" role="img" alt="U.S. General Services Administration logo" class="usa-footer__logo-img usa-footer__slim usa-footer__medium">
         </div>
         <div class="grid-col-auto">
           <h3 class="usa-footer__logo-heading">U.S. General Services Administration</h3>

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
@@ -4,15 +4,15 @@
   <div class="usa-navbar">
     <div class="usa-logo" id="basic-logo">
       <a href="{{ site.baseurl }}/" title="Home" aria-label="Home">
-        <img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" class="usa-logo__img" alt="login.gov">
+        <img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" role="img" class="usa-logo__img" alt="login.gov">
         <em class="usa-logo__text">Design System</em>
       </a>
     </div>
     <button class="usa-menu-btn">Menu</button>
   </div>
   <nav aria-label="Primary navigation" role="navigation" class="usa-nav">
     <div class="usa-nav__inner">
-      <button class="usa-nav__close"><img src="{{ site.baseurl }}/assets/img/close.svg" alt="Close"></button>
+      <button class="usa-nav__close"><img src="{{ site.baseurl }}/assets/img/close.svg" role="img" alt="Close"></button>
       <ul class="usa-nav__primary usa-accordion">
         {%
           include nav/list.html

diff --git a/docs/brand.md b/docs/brand.md
@@ -24,82 +24,82 @@ Consistent and repeated use of the logo and lockups will establish equity and st
 
 The login.gov logo is the cornerstone of our brand. Whenever possible, the red and blue version should be used. A white (or reverse) version can be used on a dark background.
 
-<a href="{{ site.baseurl }}/assets/img/login-gov-logo.svg" download><img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" alt="login.gov logo" class="padding-4"></a>
+<a href="{{ site.baseurl }}/assets/img/login-gov-logo.svg" download><img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" role="img" alt="login.gov logo" class="padding-4"></a>
 
-<a href="{{ site.baseurl }}/assets/img/login-gov-logo-rev.svg" download><img src="{{ site.baseurl }}/assets/img/login-gov-logo-rev.svg" alt="login.gov logo" class="bg-primary-darker padding-4"></a>
+<a href="{{ site.baseurl }}/assets/img/login-gov-logo-rev.svg" download><img src="{{ site.baseurl }}/assets/img/login-gov-logo-rev.svg" role="img" alt="login.gov logo" class="bg-primary-darker padding-4"></a>
 
 ### Whitespace
 
 The logo should always be surrounded by generous white space. The diagram below defines the minimum amount of clear space needed, which is based on the cap-height of the typography.
 
-<img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-spacing.svg" alt="login.gov logo spacing diagram">
+<img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-spacing.svg" role="img" alt="login.gov logo spacing diagram">
 
 ### Minimum size
 
 Establishing a minimum size ensures that the impact and legibility of the logo is not compromised in application.
 
-<img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-minimum-size.svg" alt="login.gov logo minimum size diagram">
+<img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-minimum-size.svg" role="img" alt="login.gov logo minimum size diagram">
 
 ## Logo Usage
 
 ### Incorrect color usage
 
 For optimum legibility and brand consistency, the logo should never be used in white with a light background. Conversely, the standard logo should never appear on a dark background.
 
-<img src="{{ site.baseurl }}/assets/img/login-gov-logo-rev.svg" alt="login.gov logo" class="bg-primary-lighter padding-4">
+<img src="{{ site.baseurl }}/assets/img/login-gov-logo-rev.svg" role="img" alt="login.gov logo" class="bg-primary-lighter padding-4">
 
-<img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" alt="login.gov logo" class="bg-gray-70 padding-4">
+<img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" role="img" alt="login.gov logo" class="bg-gray-70 padding-4">
 
 ### Do not modify the logo
 
 <div class="grid-row grid-gap">
   <div class="tablet:grid-col-4">
     Do not outline.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-outlined.svg" alt="login.gov logo outlined" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-outlined.svg" role="img" alt="login.gov logo outlined" class="display-block margin-top-1 margin-bottom-4">
   </div>
   <div class="tablet:grid-col-4">
     Do not skew.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-skewed.svg" alt="login.gov logo skewed" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-skewed.svg" role="img" alt="login.gov logo skewed" class="display-block margin-top-1 margin-bottom-4">
   </div>
   <div class="tablet:grid-col-4">
     Do not apply effects.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-with-effects.svg" alt="login.gov logo with effects" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-with-effects.svg" role="img" alt="login.gov logo with effects" class="display-block margin-top-1 margin-bottom-4">
   </div>
   <div class="tablet:grid-col-4">
     Do not adjust spacing.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-spaced.svg" alt="login.gov logo spaced" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-spaced.svg" role="img" alt="login.gov logo spaced" class="display-block margin-top-1 margin-bottom-4">
   </div>
   <div class="tablet:grid-col-4">
     Do not apply drop shadows.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-shadowed.svg" alt="login.gov logo shadowed" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-shadowed.svg" role="img" alt="login.gov logo shadowed" class="display-block margin-top-1 margin-bottom-4">
   </div>
   <div class="tablet:grid-col-4">
     Do not distort.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-distorted.svg" alt="login.gov logo distorted" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-distorted.svg" role="img" alt="login.gov logo distorted" class="display-block margin-top-1 margin-bottom-4">
   </div>
   <div class="tablet:grid-col-4">
     Do not apply brand colors.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-brand-colored.svg" alt="login.gov logo brand colored" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-brand-colored.svg" role="img" alt="login.gov logo brand colored" class="display-block margin-top-1 margin-bottom-4">
   </div>
   <div class="tablet:grid-col-4">
     Do not apply gradients.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-gradiented.svg" alt="login.gov logo gradiented" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-gradiented.svg" role="img" alt="login.gov logo gradiented" class="display-block margin-top-1 margin-bottom-4">
   </div>
   <div class="tablet:grid-col-4">
     Do not rotate.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-rotated.svg" alt="login.gov logo rotated" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-rotated.svg" role="img" alt="login.gov logo rotated" class="display-block margin-top-1 margin-bottom-4">
   </div>
   <div class="tablet:grid-col-4">
     Do not mask images or graphics.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-masked.svg" alt="login.gov logo masked" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-masked.svg" role="img" alt="login.gov logo masked" class="display-block margin-top-1 margin-bottom-4">
   </div>
   <div class="tablet:grid-col-4">
     Do not use additional colors.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-colored.svg" alt="login.gov logo colored" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-logo-colored.svg" role="img" alt="login.gov logo colored" class="display-block margin-top-1 margin-bottom-4">
   </div>
   <div class="tablet:grid-col-4">
     Do not separate the shield from the wordmark.
-    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-shield.svg" alt="login.gov logo separated" class="display-block margin-top-1 margin-bottom-4">
+    <img src="{{ site.baseurl }}/assets/img/style-guide/login-gov-shield.svg" role="img" alt="login.gov logo separated" class="display-block margin-top-1 margin-bottom-4">
   </div>
 </div>
 
@@ -128,9 +128,9 @@ Being consistent in illustration means considering details of a single illustrat
 Illustration is most effective when it is precise in choosing a single message to deliver. With every narrative that is built there needs to be a focal point, a hierarchy of elements that contribute to the single, pointed message. With every illustration, we ask ourselves “what are we trying to say?”
 
 <div class="grid-row grid-gap">
-  <img src="{{ site.baseurl }}/assets/img/illustrations/security-key.svg" alt="Security key illustration" class="display-block grid-col flex-auto flex-align-center">
-  <img src="{{ site.baseurl }}/assets/img/illustrations/fail.svg" alt="Failure illustration" class="display-block grid-col flex-auto flex-align-center">
-  <img src="{{ site.baseurl }}/assets/img/illustrations/id-confirm.svg" alt="Confirmed identification illustration" class="display-block grid-col flex-auto flex-align-center">
+  <img src="{{ site.baseurl }}/assets/img/illustrations/security-key.svg" role="img" alt="Security key illustration" class="display-block grid-col flex-auto flex-align-center">
+  <img src="{{ site.baseurl }}/assets/img/illustrations/fail.svg" role="img" alt="Failure illustration" class="display-block grid-col flex-auto flex-align-center">
+  <img src="{{ site.baseurl }}/assets/img/illustrations/id-confirm.svg" role="img" alt="Confirmed identification illustration" class="display-block grid-col flex-auto flex-align-center">
 </div>
 
 ## Slide decks

diff --git a/docs/examples/basic-header-landing-slim-footer.html b/docs/examples/basic-header-landing-slim-footer.html
@@ -11,13 +11,13 @@
     <div class="usa-navbar">
       <div class="usa-logo" id="basic-logo">
         <a href="javascript:;" title="Home" aria-label="Home">
-          <img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" class="usa-logo__img" alt="login.gov">
+          <img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" role="img" class="usa-logo__img" alt="login.gov">
         </a>
       </div>
       <button class="usa-menu-btn">Menu</button>
     </div>
     <nav role="navigation" class="usa-nav" aria-role="Footer navigation">
-      <button class="usa-nav__close"><img src="{{ site.baseurl }}/assets/img/close.svg" alt="Close"></button>
+      <button class="usa-nav__close"><img src="{{ site.baseurl }}/assets/img/close.svg" role="img" alt="Close"></button>
       <ul class="usa-nav__primary usa-accordion">
         <li class="usa-nav__primary-item">
           <a class="usa-nav__link" href="javascript:;">

diff --git a/docs/examples/basic-header-sidenav-slim-footer.html b/docs/examples/basic-header-sidenav-slim-footer.html
@@ -11,14 +11,14 @@
     <div class="usa-navbar">
       <div class="usa-logo" id="basic-logo">
         <a href="javascript:;" title="Home" aria-label="Home">
-          <img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" class="usa-logo__img" alt="login.gov">
+          <img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" role="img" class="usa-logo__img" alt="login.gov">
           <em class="usa-logo__text">Optional Site Title</em>
         </a>
       </div>
       <button class="usa-menu-btn">Menu</button>
     </div>
     <nav role="navigation" class="usa-nav" aria-role="Footer navigation">
-      <button class="usa-nav__close"><img src="{{ site.baseurl }}/assets/img/close.svg" alt="Close"></button>
+      <button class="usa-nav__close"><img src="{{ site.baseurl }}/assets/img/close.svg" role="img" alt="Close"></button>
       <ul class="usa-nav__primary usa-accordion">
         <li class="usa-nav__primary-item">
           <a class="usa-nav__link" href="javascript:;">

diff --git a/docs/examples/extended-header-no-sidenav-medium-footer.html b/docs/examples/extended-header-no-sidenav-medium-footer.html
@@ -10,15 +10,15 @@
   <div class="usa-navbar">
       <div class="usa-logo" id="extended-logo">
         <a href="javascript:;" title="Home" aria-label="Home">
-          <img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" class="usa-logo__img" alt="login.gov">
+          <img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg" role="img" class="usa-logo__img" alt="login.gov">
           <em class="usa-logo__text">Optional Site Title</em>
         </a>
       </div>
       <button class="usa-menu-btn">Menu</button>
     </div>
     <nav role="navigation" class="usa-nav">
       <div class="usa-nav__inner">
-        <button class="usa-nav__close"><img src="{{ site.baseurl }}/assets/img/close.svg" alt="Close"></button>
+        <button class="usa-nav__close"><img src="{{ site.baseurl }}/assets/img/close.svg" role="img" alt="Close"></button>
         <ul class="usa-nav__primary usa-accordion">
           <li class="usa-nav__primary-item">
             <a class="usa-nav__link" href="javascript:;">
@@ -110,7 +110,7 @@ <h2>Still have questions?</h2>
       <div class="usa-footer__logo grid-row grid-gap-2">
         <a href="https://www.gsa.gov" class="usa-footer__logo grid-row grid-gap-2" target="_blank">
           <div class="grid-col-auto">
-            <img src="{{ site.baseurl }}/assets/img/gsa-logo-rev.svg" alt="U.S. General Services Administration logo" class="usa-footer__logo-img">
+            <img src="{{ site.baseurl }}/assets/img/gsa-logo-rev.svg" role="img" alt="U.S. General Services Administration logo" class="usa-footer__logo-img">
           </div>
           <div class="grid-col-auto">
             U.S. General Services Administration