feat: Update to USWDS 2.10.3 (#1106)

trussworks · Apr 20, 2021 · c9f71d7 · c9f71d7
1 parent 1d0db77
commit c9f71d7
Show file tree

Hide file tree

Showing 13 changed files with 241 additions and 145 deletions.
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
   "peerDependencies": {
     "react": "^16.x || ^17.x",
     "react-dom": "^16.x || ^17.x",
-    "uswds": "2.9.0"
+    "uswds": "2.10.3"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",
@@ -126,7 +126,7 @@
     "ts-jest": "^26.1.2",
     "typescript": "^3.8.0",
     "url-loader": "^4.0.0",
-    "uswds": "2.9.0",
+    "uswds": "2.10.3",
     "webpack": "^4.41.0",
     "webpack-cli": "^4.0.0"
   },

diff --git a/src/components/Footer/Footer/Footer.stories.tsx b/src/components/Footer/Footer/Footer.stories.tsx
@@ -96,7 +96,7 @@ export const SlimFooter = (): React.ReactElement => (
             src={logoImg}
           />
         }
-        heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+        heading={<p className="usa-footer__logo-heading">Name of Agency</p>}
       />
     }
   />
@@ -127,7 +127,7 @@ export const MediumFooter = (): React.ReactElement => (
               src={logoImg}
             />
           }
-          heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+          heading={<p className="usa-footer__logo-heading">Name of Agency</p>}
         />
         <div className="usa-footer__contact-links mobile-lg:grid-col-6">
           <SocialLinks
@@ -150,6 +150,12 @@ export const MediumFooter = (): React.ReactElement => (
                 href="#">
                 <span>YouTube</span>
               </a>,
+              <a
+                key="instagram"
+                className="usa-social-link usa-social-link--instagram"
+                href="#">
+                <span>Instagram</span>
+              </a>,
               <a
                 key="rss"
                 className="usa-social-link usa-social-link--rss"
@@ -240,7 +246,7 @@ export const BigFooter = (): React.ReactElement => (
               src={logoImg}
             />
           }
-          heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+          heading={<p className="usa-footer__logo-heading">Name of Agency</p>}
         />
         <div className="usa-footer__contact-links mobile-lg:grid-col-6">
           <SocialLinks
@@ -263,6 +269,12 @@ export const BigFooter = (): React.ReactElement => (
                 href="#">
                 <span>YouTube</span>
               </a>,
+              <a
+                key="instagram"
+                className="usa-social-link usa-social-link--instagram"
+                href="#">
+                <span>Instagram</span>
+              </a>,
               <a
                 key="rss"
                 className="usa-social-link usa-social-link--rss"

diff --git a/src/components/Footer/Logo/Logo.stories.tsx b/src/components/Footer/Logo/Logo.stories.tsx
@@ -28,7 +28,7 @@ export const Slim = (): React.ReactElement => (
       image={
         <img className="usa-footer__logo-img" src={logoImg} alt="Mock logo" />
       }
-      heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+      heading={<p className="usa-footer__logo-heading">Name of Agency</p>}
     />
   </div>
 )

diff --git a/src/components/Footer/Logo/Logo.test.tsx b/src/components/Footer/Logo/Logo.test.tsx
@@ -5,7 +5,7 @@ jest.mock('../../../deprecation')
 import { deprecationWarning } from '../../../deprecation'
 import { Logo } from './Logo'
 
-const heading = <h3 className="usa-footer__logo-heading">Swoosh Branding</h3>
+const heading = <p className="usa-footer__logo-heading">Swoosh Branding</p>
 const logoImage = (
   <img
     className="usa-footer__logo-img"

diff --git a/src/components/Footer/SocialLinks/SocialLinks.stories.tsx b/src/components/Footer/SocialLinks/SocialLinks.stories.tsx
@@ -37,6 +37,12 @@ const links = [
     href="#">
     <span>YouTube</span>
   </a>,
+  <a
+    key="instagram"
+    className="usa-social-link usa-social-link--instagram"
+    href="#">
+    <span>Instagram</span>
+  </a>,
   <a key="rss" className="usa-social-link usa-social-link--rss" href="#">
     <span>RSS</span>
   </a>,

diff --git a/src/components/GovBanner/GovBanner.tsx b/src/components/GovBanner/GovBanner.tsx
@@ -23,7 +23,14 @@ interface GovBannerCopy {
 const getCopy = (language: Language, tld: TLD): GovBannerCopy => {
   const lock = (
     <span className="icon-lock">
-      <img src={lockIcon} className="usa-banner__lock-image" alt="lock" />
+      {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
+      <img
+        src={lockIcon}
+        className="usa-banner__lock-image"
+        alt="lock"
+        title="Lock"
+        role="img"
+      />
     </span>
   )
 
@@ -154,7 +161,9 @@ export const GovBanner = ({
               <img
                 className="usa-banner__icon usa-media-block__img"
                 src={dotGovIcon}
-                alt="Dot gov"
+                role="img"
+                alt=""
+                aria-hidden="true"
               />
               <div className="usa-media-block__body">
                 <p>
@@ -168,7 +177,9 @@ export const GovBanner = ({
               <img
                 className="usa-banner__icon usa-media-block__img"
                 src={httpsIcon}
-                alt="Https"
+                role="img"
+                alt=""
+                aria-hidden="true"
               />
               <div className="usa-media-block__body">
                 <p>

diff --git a/src/components/GovBanner/__snapshots__/GovBanner.test.tsx.snap b/src/components/GovBanner/__snapshots__/GovBanner.test.tsx.snap
@@ -65,8 +65,10 @@ exports[`GovBanner component static content renders consistently in English for
           className="usa-banner__guidance tablet:grid-col-6"
         >
           <img
-            alt="Dot gov"
+            alt=""
+            aria-hidden="true"
             className="usa-banner__icon usa-media-block__img"
+            role="img"
             src="test-file-stub"
           />
           <div
@@ -89,8 +91,10 @@ exports[`GovBanner component static content renders consistently in English for
           className="usa-banner__guidance tablet:grid-col-6"
         >
           <img
-            alt="Https"
+            alt=""
+            aria-hidden="true"
             className="usa-banner__icon usa-media-block__img"
+            role="img"
             src="test-file-stub"
           />
           <div
@@ -110,7 +114,9 @@ exports[`GovBanner component static content renders consistently in English for
                   <img
                     alt="lock"
                     className="usa-banner__lock-image"
+                    role="img"
                     src="test-file-stub"
+                    title="Lock"
                   />
                 </span>
                 )
@@ -196,8 +202,10 @@ exports[`GovBanner component static content renders consistently in English for
           className="usa-banner__guidance tablet:grid-col-6"
         >
           <img
-            alt="Dot gov"
+            alt=""
+            aria-hidden="true"
             className="usa-banner__icon usa-media-block__img"
+            role="img"
             src="test-file-stub"
           />
           <div
@@ -220,8 +228,10 @@ exports[`GovBanner component static content renders consistently in English for
           className="usa-banner__guidance tablet:grid-col-6"
         >
           <img
-            alt="Https"
+            alt=""
+            aria-hidden="true"
             className="usa-banner__icon usa-media-block__img"
+            role="img"
             src="test-file-stub"
           />
           <div
@@ -241,7 +251,9 @@ exports[`GovBanner component static content renders consistently in English for
                   <img
                     alt="lock"
                     className="usa-banner__lock-image"
+                    role="img"
                     src="test-file-stub"
+                    title="Lock"
                   />
                 </span>
                 )
@@ -327,8 +339,10 @@ exports[`GovBanner component static content renders consistently in Spanish for
           className="usa-banner__guidance tablet:grid-col-6"
         >
           <img
-            alt="Dot gov"
+            alt=""
+            aria-hidden="true"
             className="usa-banner__icon usa-media-block__img"
+            role="img"
             src="test-file-stub"
           />
           <div
@@ -351,8 +365,10 @@ exports[`GovBanner component static content renders consistently in Spanish for
           className="usa-banner__guidance tablet:grid-col-6"
         >
           <img
-            alt="Https"
+            alt=""
+            aria-hidden="true"
             className="usa-banner__icon usa-media-block__img"
+            role="img"
             src="test-file-stub"
           />
           <div
@@ -372,7 +388,9 @@ exports[`GovBanner component static content renders consistently in Spanish for
                   <img
                     alt="lock"
                     className="usa-banner__lock-image"
+                    role="img"
                     src="test-file-stub"
+                    title="Lock"
                   />
                 </span>
                 )
@@ -459,8 +477,10 @@ exports[`GovBanner component static content renders consistently in Spanish for
           className="usa-banner__guidance tablet:grid-col-6"
         >
           <img
-            alt="Dot gov"
+            alt=""
+            aria-hidden="true"
             className="usa-banner__icon usa-media-block__img"
+            role="img"
             src="test-file-stub"
           />
           <div
@@ -483,8 +503,10 @@ exports[`GovBanner component static content renders consistently in Spanish for
           className="usa-banner__guidance tablet:grid-col-6"
         >
           <img
-            alt="Https"
+            alt=""
+            aria-hidden="true"
             className="usa-banner__icon usa-media-block__img"
+            role="img"
             src="test-file-stub"
           />
           <div
@@ -504,7 +526,9 @@ exports[`GovBanner component static content renders consistently in Spanish for
                   <img
                     alt="lock"
                     className="usa-banner__lock-image"
+                    role="img"
                     src="test-file-stub"
+                    title="Lock"
                   />
                 </span>
                 )
@@ -591,8 +615,10 @@ exports[`GovBanner component static content renders consistently with default pr
           className="usa-banner__guidance tablet:grid-col-6"
         >
           <img
-            alt="Dot gov"
+            alt=""
+            aria-hidden="true"
             className="usa-banner__icon usa-media-block__img"
+            role="img"
             src="test-file-stub"
           />
           <div
@@ -615,8 +641,10 @@ exports[`GovBanner component static content renders consistently with default pr
           className="usa-banner__guidance tablet:grid-col-6"
         >
           <img
-            alt="Https"
+            alt=""
+            aria-hidden="true"
             className="usa-banner__icon usa-media-block__img"
+            role="img"
             src="test-file-stub"
           />
           <div
@@ -636,7 +664,9 @@ exports[`GovBanner component static content renders consistently with default pr
                   <img
                     alt="lock"
                     className="usa-banner__lock-image"
+                    role="img"
                     src="test-file-stub"
+                    title="Lock"
                   />
                 </span>
                 )

diff --git a/src/components/forms/ComboBox/ComboBox.stories.tsx b/src/components/forms/ComboBox/ComboBox.stories.tsx
@@ -71,8 +71,16 @@ export const withLabel = (): React.ReactElement => {
 
   return (
     <Form onSubmit={noop}>
-      <Label htmlFor="fruit">Select A Fruit</Label>
-      <ComboBox id="fruit" name="fruit" options={fruitList} onChange={noop} />
+      <Label id="fruit-label" htmlFor="fruit">
+        Select A Fruit
+      </Label>
+      <ComboBox
+        id="fruit"
+        name="fruit"
+        options={fruitList}
+        onChange={noop}
+        ulProps={{ 'aria-labelledby': 'fruit-label' }}
+      />
     </Form>
   )
 }