LG-3187: Upgrade USWDS to 2.9.0 (#159)

* Upgrade USWDS to 2.9.0 * Reconcile banner changes from USWDS upgrade * Add overflow to highlighted code segments * Update deprecated header settings value See: https://designsystem.digital.gov/about/releases/#version-220 * Fix light disabled grey color * Apply overflow specific to pre element Avoid duplicate overflow, allow margins to collapse as before * Improve markup accessibility per revisions in USWDS 2.5.0 See: https://designsystem.digital.gov/about/releases/#version-250 * Ignore qualified lint error **Why:** Two elements may have this class, and only one should have overflow applied. * Update search markup per USWDS 2.6.0 See: https://designsystem.digital.gov/about/releases/#version-260 * Update numeric field guidance per USWDS 2.7.0 See: https://designsystem.digital.gov/about/releases/#version-270 * Add role attribute to SVG images per revisions in USWDS 2.7.1 See: https://designsystem.digital.gov/about/releases/#version-271 * Add expected TODO * Add CHANGELOG.md * Update banner text per USWDS 2.8.0 See: https://designsystem.digital.gov/about/releases/#version-280 * Fix mobile expanded banner background color * Update link color of mobile banner button * Remove Tooltip component * NPM audit fix **Why**: Clear up console warnings on build
18F · Nov 30, 2020 · 64b6f69 · 64b6f69
1 parent 2da76d5
commit 64b6f69
Show file tree

Hide file tree

Showing 21 changed files with 470 additions and 1,261 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,18 @@
-## 2.2.4
+## 3.0.0
+
+### Breaking Changes
+
+- Updates USWDS from 2.0.3 to 2.9.0. Review [release notes](https://designsystem.digital.gov/about/releases/) for specific changes which may apply. Specific impactful changes include...
+  - The Tooltip component is now inherited from USWDS, newly introduced as of USWDS 2.8.0. [See component documentation](https://designsystem.digital.gov/components/tooltip/) for more information. The markup of this component is significantly different than that of the component previously implemented in the login.gov Design System.
+  - Due to a rounding precision fix, line-heights for text may appear larger than it had previously.
+  - Guidance for many components has been updated to improve accessibility and usability of markup. Neglecting to update this markup should not result in user-facing regressions, but you are recommended to update to improve end-user experience. Refer to the release notes and related component documentation for specifics:
+    - SVG images should include `role="img"`.
+    - Numeric fields should use `type="text" inputmode="numeric"` instead of `type="number"`.
+    - Search forms should assign `role="search"` to the form element.
+    - Banner should be rendered as a `section` element instead of a `div`, and include a descriptive `aria-label`.
+    - Footer and hero content should include a descriptive `aria-label`.
+    - Graphic list should use `h2` as a heading element instead of `h3`.
+- "Official government website" banner text has been updated. Refer to [USWDS guidance](https://designsystem.digital.gov/components/banner/) for updated markup.
 
 ### Bug Fixes
 

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/form-fields.md b/docs/_components/form-fields.md
@@ -41,18 +41,18 @@ Three text fields are the easiest way for users to enter most dates.
   <div class="usa-memorable-date">
     <div class="usa-form-group usa-form-group--month">
       <label for="f5bf" class="usa-label">Month</label>
-      <input id="f5bf" class="usa-input usa-input--inline" aria-describedby="d7d4" type="number" min="1" max="12">
+      <input id="f5bf" class="usa-input usa-input--inline" aria-describedby="d7d4" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
     </div>
     <div class="usa-form-group usa-form-group--day">
       <label for="b0fe" class="usa-label">Day</label>
-      <input id="b0fe" class="usa-input usa-input--inline" aria-describedby="d7d4" type="number" min="1" max="31">
+      <input id="b0fe" class="usa-input usa-input--inline" aria-describedby="d7d4" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
     </div>
     <div class="usa-form-group usa-form-group--year">
       <label for="dc41" class="usa-label">Year</label>
-      <input id="dc41" class="usa-input usa-input--inline" aria-describedby="d7d4" type="number" min="1900" max="2000">
+      <input id="dc41" class="usa-input usa-input--inline" aria-describedby="d7d4" type="text" minlength="4" maxlength="4" pattern="[0-9]*" inputmode="numeric">
     </div>
   </div>
-  <span class="usa-form-hint" id="d7d4">Example: 04 28 1986</span>
+  <span class="usa-form-hint" id="d7d4">Example: 4 28 1986</span>
 </fieldset>
 {% endcapture %}
 {% include helpers/code-example.html code=example %}
@@ -300,18 +300,18 @@ Follow the same pattern of applying `.usa-input--error` to the effected input an
   <div class="usa-memorable-date">
     <div class="usa-form-group usa-form-group--month">
       <label for="e30e" class="usa-label">Month</label>
-      <input id="e30e" class="usa-input usa-input--inline usa-input--error" aria-describedby="f9e5" type="number" min="1" max="12">
+      <input id="e30e" class="usa-input usa-input--inline usa-input--error" aria-describedby="f9e5" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
     </div>
     <div class="usa-form-group usa-form-group--day">
       <label for="b857" class="usa-label">Day</label>
-      <input id="b857" class="usa-input usa-input--inline usa-input--error" aria-describedby="f9e5" type="number" min="1" max="31">
+      <input id="b857" class="usa-input usa-input--inline usa-input--error" aria-describedby="f9e5" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
     </div>
     <div class="usa-form-group usa-form-group--year">
       <label for="a5dc" class="usa-label">Year</label>
-      <input id="a5dc" class="usa-input usa-input--inline usa-input--error" aria-describedby="f9e5" type="number" min="1900" max="2000">
+      <input id="a5dc" class="usa-input usa-input--inline usa-input--error" aria-describedby="f9e5" type="text" minlength="4" maxlength="4" pattern="[0-9]*" inputmode="numeric">
     </div>
   </div>
-  <span class="usa-form-hint" id="f9e5">Example: 04 28 1986</span>
+  <span class="usa-form-hint" id="f9e5">Example: 4 28 1986</span>
   <span class="usa-error-message" role="alert">Error message text.</span>
 </fieldset>
 {% endcapture %}

diff --git a/docs/_components/tooltips.md b/docs/_components/tooltips.md
diff --git a/docs/_includes/banner.html b/docs/_includes/banner.html
@@ -1,6 +1,6 @@
 <a class="usa-skipnav" href="#main-content">Skip to main content</a>
 
-<div class="usa-banner">
+<section class="usa-banner" aria-label="Official government website">
   <div class="usa-accordion">
     <header class="usa-banner__header">
       <div class="usa-banner__inner">
@@ -20,26 +20,28 @@
     <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>
+              <strong>Official websites use .gov</strong>
               <br>
-              Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.
+              A <strong>.gov</strong> website belongs to an official government organization in the United States.
             </p>
           </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>
+              <strong>Secure .gov websites use HTTPS</strong>
               <br>
-              The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
+              A <strong>lock</strong> (
+<span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-title banner-lock-description"><title id="banner-lock-title">Lock</title><desc id="banner-lock-description">A locked padlock</desc><path fill="#000000" fill-rule="evenodd" 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"/></svg></span>
+) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
             </p>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</section>
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