From c9f71d7d7989fb9c7ab2e264d1af26436dcb66c3 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandonalenz@gmail.com>
Date: Tue, 20 Apr 2021 13:08:43 -0400
Subject: [PATCH] feat: Update to USWDS 2.10.3 (#1106)

---
 package.json                                  |   4 +-
 .../Footer/Footer/Footer.stories.tsx          |  18 +-
 src/components/Footer/Logo/Logo.stories.tsx   |   2 +-
 src/components/Footer/Logo/Logo.test.tsx      |   2 +-
 .../SocialLinks/SocialLinks.stories.tsx       |   6 +
 src/components/GovBanner/GovBanner.tsx        |  17 +-
 .../__snapshots__/GovBanner.test.tsx.snap     |  50 ++++-
 .../forms/ComboBox/ComboBox.stories.tsx       |  12 +-
 .../forms/ComboBox/ComboBox.test.tsx          | 196 ++++++++++--------
 src/components/forms/ComboBox/ComboBox.tsx    |   5 +-
 .../templates/documentation.stories.tsx       |   8 +-
 src/stories/templates/landing.stories.tsx     |   8 +-
 yarn.lock                                     |  58 +++---
 13 files changed, 241 insertions(+), 145 deletions(-)

diff --git a/package.json b/package.json
index ba2565e6b9..058dfc8a65 100644
--- 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
index af652fa66f..f607aa1393 100644
--- 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
index 328bb115a9..0b830db01b 100644
--- 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
index 87720fad79..2cf3c07c1f 100644
--- 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
index bd3811d63f..d373a59c9e 100644
--- 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
index d8be425f46..5545e96f70 100644
--- 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
index 71e6548566..88db8748b1 100644
--- 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
index 3318003b4c..774bb38af7 100644
--- 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>
   )
 }
diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index 97fdb0096e..0696046929 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -40,12 +40,10 @@ describe('ComboBox component', () => {
         defaultValue="apple"
       />
     )
-    expect(getByTestId('combo-box-select')).toBeInstanceOf(HTMLSelectElement)
-    expect(getByTestId('combo-box-select')).toHaveAttribute(
-      'aria-hidden',
-      'true'
-    )
-    expect(getByTestId('combo-box-select')).toHaveClass('usa-sr-only')
+    const comboBoxSelect = getByTestId('combo-box-select')
+    expect(comboBoxSelect).toBeInstanceOf(HTMLSelectElement)
+    expect(comboBoxSelect).toHaveAttribute('aria-hidden', 'true')
+    expect(comboBoxSelect).toHaveClass('usa-sr-only')
   })
 
   it('renders input element', () => {
@@ -57,8 +55,10 @@ describe('ComboBox component', () => {
         onChange={jest.fn()}
       />
     )
-    expect(getByRole('combobox')).toBeInTheDocument()
-    expect(getByRole('combobox')).toBeInstanceOf(HTMLInputElement)
+
+    const comboBox = getByRole('combobox')
+    expect(comboBox).toBeInTheDocument()
+    expect(comboBox).toBeInstanceOf(HTMLInputElement)
   })
 
   it('renders hidden options list on load', () => {
@@ -216,9 +216,9 @@ describe('ComboBox component', () => {
         selectProps={{ required: true, role: 'testing' }}
       />
     )
-
-    expect(getByTestId('combo-box-select')).toHaveAttribute('required')
-    expect(getByTestId('combo-box-select')).toHaveAttribute('role', 'testing')
+    const comboBoxSelect = getByTestId('combo-box-select')
+    expect(comboBoxSelect).toHaveAttribute('required')
+    expect(comboBoxSelect).toHaveAttribute('role', 'testing')
   })
 
   it('renders input with custom props if passed in', () => {
@@ -232,8 +232,27 @@ describe('ComboBox component', () => {
       />
     )
 
-    expect(getByTestId('combo-box-input')).toHaveAttribute('required')
-    expect(getByTestId('combo-box-input')).toHaveAttribute('role', 'testing')
+    const comboBoxInput = getByTestId('combo-box-input')
+    expect(comboBoxInput).toHaveAttribute('required')
+    expect(comboBoxInput).toHaveAttribute('role', 'testing')
+  })
+
+  it('renders input with custom props if passed in', () => {
+    const { getByTestId } = render(
+      <ComboBox
+        id="favorite-fruit"
+        name="favorite-fruit"
+        options={fruitOptions}
+        onChange={jest.fn()}
+        ulProps={{ 'aria-labelledby': 'test-label-id' }}
+      />
+    )
+
+    const comboBoxOptionList = getByTestId('combo-box-option-list')
+    expect(comboBoxOptionList).toHaveAttribute(
+      'aria-labelledby',
+      'test-label-id'
+    )
   })
 
   // TODO: ❓ Don't know how to test this
@@ -460,10 +479,9 @@ describe('ComboBox component', () => {
       expect(getByTestId('combo-box-clear-button')).not.toBeVisible()
       expect(getByTestId('combo-box-input')).toHaveValue('')
       expect(onChange).toHaveBeenNthCalledWith(2, undefined)
-      expect(getByTestId('combo-box-option-list')).not.toBeVisible()
-      expect(getByTestId('combo-box-option-list').children.length).toBe(
-        fruitOptions.length
-      )
+      const comboBoxOptionList = getByTestId('combo-box-option-list')
+      expect(comboBoxOptionList).not.toBeVisible()
+      expect(comboBoxOptionList.children.length).toBe(fruitOptions.length)
     })
 
     it('remains focused on the input after click', () => {
@@ -533,9 +551,10 @@ describe('ComboBox component', () => {
 
       userEvent.type(getByTestId('combo-box-input'), 'zzz{enter}')
 
+      const comboBoxInput = getByTestId('combo-box-input')
       expect(getByTestId('combo-box-option-list')).not.toBeVisible()
-      expect(getByTestId('combo-box-input')).toHaveValue('')
-      expect(getByTestId('combo-box-input')).toHaveFocus()
+      expect(comboBoxInput).toHaveValue('')
+      expect(comboBoxInput).toHaveFocus()
     })
 
     it('clears filter when there is no match and enter is pressed', () => {
@@ -549,11 +568,9 @@ describe('ComboBox component', () => {
       )
 
       userEvent.type(getByTestId('combo-box-input'), 'zzz{enter}')
-
-      expect(getByTestId('combo-box-option-list')).not.toBeVisible()
-      expect(getByTestId('combo-box-option-list').children.length).toBe(
-        fruitOptions.length
-      )
+      const comboBoxOptionList = getByTestId('combo-box-option-list')
+      expect(comboBoxOptionList).not.toBeVisible()
+      expect(comboBoxOptionList.children.length).toBe(fruitOptions.length)
     })
 
     it('focuses the first filtered option with tab', () => {
@@ -587,11 +604,9 @@ describe('ComboBox component', () => {
       userEvent.click(getByTestId('combo-box-input')) // open menu
       userEvent.tab()
 
-      expect(getByTestId('combo-box-option-apple')).toHaveFocus()
-      expect(getByTestId('combo-box-option-apple')).toHaveAttribute(
-        'tabindex',
-        '0'
-      )
+      const appleOption = getByTestId('combo-box-option-apple')
+      expect(appleOption).toHaveFocus()
+      expect(appleOption).toHaveAttribute('tabindex', '0')
     })
 
     it('selects the focused option with tab', () => {
@@ -643,11 +658,12 @@ describe('ComboBox component', () => {
         />
       )
 
-      userEvent.type(getByTestId('combo-box-input'), 'apri')
+      const comboBoxInput = getByTestId('combo-box-input')
+      userEvent.type(comboBoxInput, 'apri')
       userEvent.tab()
       userEvent.type(getByTestId('combo-box-option-apricot'), '{enter}')
 
-      expect(getByTestId('combo-box-input')).toHaveValue('Apricot')
+      expect(comboBoxInput).toHaveValue('Apricot')
       expect(onChange).toHaveBeenLastCalledWith('apricot')
     })
 
@@ -705,8 +721,9 @@ describe('ComboBox component', () => {
         />
       )
 
-      userEvent.click(getByTestId('combo-box-input'))
-      fireEvent.keyDown(getByTestId('combo-box-input'), {
+      const comboBoxInput = getByTestId('combo-box-input')
+      userEvent.click(comboBoxInput)
+      fireEvent.keyDown(comboBoxInput, {
         key: 'ArrowDown',
       })
 
@@ -724,8 +741,9 @@ describe('ComboBox component', () => {
         />
       )
 
-      userEvent.click(getByTestId('combo-box-input'))
-      fireEvent.keyDown(getByTestId('combo-box-input'), {
+      const comboBoxInput = getByTestId('combo-box-input')
+      userEvent.click(comboBoxInput)
+      fireEvent.keyDown(comboBoxInput, {
         key: 'ArrowDown',
       })
       fireEvent.keyDown(getByTestId('combo-box-option-apple'), {
@@ -733,7 +751,7 @@ describe('ComboBox component', () => {
       })
 
       expect(getByTestId('combo-box-option-list')).not.toBeVisible()
-      expect(getByTestId('combo-box-input')).toHaveFocus()
+      expect(comboBoxInput).toHaveFocus()
     })
 
     it('does not change focus when last option is focused and down arrow is pressed', () => {
@@ -746,13 +764,14 @@ describe('ComboBox component', () => {
         />
       )
 
+      const yuzuOption = getByTestId('combo-box-option-yuzu')
       fireEvent.click(getByTestId('combo-box-input'))
-      userEvent.hover(getByTestId('combo-box-option-yuzu'))
-      fireEvent.keyDown(getByTestId('combo-box-option-yuzu'), {
+      userEvent.hover(yuzuOption)
+      fireEvent.keyDown(yuzuOption, {
         key: 'ArrowDown',
       })
 
-      expect(getByTestId('combo-box-option-yuzu')).toHaveFocus()
+      expect(yuzuOption).toHaveFocus()
     })
 
     it('pressing tab once in the input with a selected option focuses the clear button', () => {
@@ -824,12 +843,13 @@ describe('ComboBox component', () => {
       )
 
       // Apple is the item at top of list
-      userEvent.hover(getByTestId('combo-box-option-apple'))
-      fireEvent.keyDown(getByTestId('combo-box-option-apple'), {
+      const appleOption = getByTestId('combo-box-option-apple')
+      userEvent.hover(appleOption)
+      fireEvent.keyDown(appleOption, {
         key: 'ArrowUp',
       })
 
-      expect(getByTestId('combo-box-option-apple')).toHaveFocus()
+      expect(appleOption).toHaveFocus()
       expect(getByTestId('combo-box-input')).toHaveAttribute(
         'aria-expanded',
         'true'
@@ -927,10 +947,11 @@ describe('ComboBox component', () => {
         />
       )
       const input = getByTestId('combo-box-input')
+      const apricotOption = getByTestId('combo-box-option-apricot')
 
       userEvent.tab()
-      userEvent.hover(getByTestId('combo-box-option-apricot'))
-      fireEvent.keyDown(getByTestId('combo-box-option-apricot'), {
+      userEvent.hover(apricotOption)
+      fireEvent.keyDown(apricotOption, {
         key: 'tab',
         keyCode: 9,
         shiftKey: true,
@@ -950,17 +971,14 @@ describe('ComboBox component', () => {
           onChange={jest.fn()}
         />
       )
+      const input = getByTestId('combo-box-input')
+      const optionList = getByTestId('combo-box-option-list')
 
-      fireEvent.click(getByTestId('combo-box-input'))
+      fireEvent.click(input)
 
-      expect(getByTestId('combo-box-input')).toHaveAttribute(
-        'aria-expanded',
-        'true'
-      )
-      expect(getByTestId('combo-box-option-list')).toBeVisible()
-      expect(getByTestId('combo-box-option-list').childElementCount).toEqual(
-        fruitOptions.length
-      )
+      expect(input).toHaveAttribute('aria-expanded', 'true')
+      expect(optionList).toBeVisible()
+      expect(optionList.childElementCount).toEqual(fruitOptions.length)
     })
 
     it('displays options list when input is clicked twice', () => {
@@ -992,13 +1010,11 @@ describe('ComboBox component', () => {
         />
       )
 
-      fireEvent.click(getByTestId('combo-box-input'))
-      fireEvent.blur(getByTestId('combo-box-input'))
+      const input = getByTestId('combo-box-input')
+      fireEvent.click(input)
+      fireEvent.blur(input)
 
-      expect(getByTestId('combo-box-input')).toHaveAttribute(
-        'aria-expanded',
-        'false'
-      )
+      expect(input).toHaveAttribute('aria-expanded', 'false')
       expect(getByTestId('combo-box-option-list')).not.toBeVisible()
     })
 
@@ -1012,15 +1028,15 @@ describe('ComboBox component', () => {
         />
       )
 
-      fireEvent.click(getByTestId('combo-box-input'))
-      userEvent.hover(getByTestId('combo-box-option-blackberry'))
+      const input = getByTestId('combo-box-input')
+      const blackberryOption = getByTestId('combo-box-option-blackberry')
 
-      fireEvent.blur(getByTestId('combo-box-option-blackberry'))
+      fireEvent.click(input)
 
-      expect(getByTestId('combo-box-input')).toHaveAttribute(
-        'aria-expanded',
-        'false'
-      )
+      userEvent.hover(blackberryOption)
+      fireEvent.blur(blackberryOption)
+
+      expect(input).toHaveAttribute('aria-expanded', 'false')
       expect(getByTestId('combo-box-option-list')).not.toBeVisible()
     })
 
@@ -1034,21 +1050,17 @@ describe('ComboBox component', () => {
         />
       )
 
+      const input = getByTestId('combo-box-input')
+      const optionList = getByTestId('combo-box-option-list')
       fireEvent.click(getByTestId('combo-box-toggle'))
 
-      expect(getByTestId('combo-box-input')).toHaveAttribute(
-        'aria-expanded',
-        'true'
-      )
-      expect(getByTestId('combo-box-option-list')).toBeVisible()
+      expect(input).toHaveAttribute('aria-expanded', 'true')
+      expect(optionList).toBeVisible()
 
       fireEvent.click(getByTestId('combo-box-toggle'))
 
-      expect(getByTestId('combo-box-input')).toHaveAttribute(
-        'aria-expanded',
-        'false'
-      )
-      expect(getByTestId('combo-box-option-list')).not.toBeVisible()
+      expect(input).toHaveAttribute('aria-expanded', 'false')
+      expect(optionList).not.toBeVisible()
     })
 
     it('selects an item by clicking on an option', () => {
@@ -1062,12 +1074,13 @@ describe('ComboBox component', () => {
         />
       )
 
+      const input = getByTestId('combo-box-input')
       fireEvent.click(getByTestId('combo-box-toggle'))
       fireEvent.click(getByTestId('combo-box-option-apple'))
 
       expect(onChange).toHaveBeenLastCalledWith('apple')
-      expect(getByTestId('combo-box-input')).toHaveDisplayValue('Apple')
-      expect(getByTestId('combo-box-input')).toHaveValue('Apple')
+      expect(input).toHaveDisplayValue('Apple')
+      expect(input).toHaveValue('Apple')
     })
 
     it('persists input text when items list is blurred', () => {
@@ -1084,13 +1097,14 @@ describe('ComboBox component', () => {
         </>
       )
 
+      const input = getByTestId('combo-box-input')
       userEvent.click(getByTestId('combo-box-toggle'))
       userEvent.click(getByTestId('combo-box-option-apple'))
-      fireEvent.blur(getByTestId('combo-box-input'))
+      fireEvent.blur(input)
 
       expect(onChange).toHaveBeenLastCalledWith('apple')
-      expect(getByTestId('combo-box-input')).toHaveDisplayValue('Apple')
-      expect(getByTestId('combo-box-input')).toHaveValue('Apple')
+      expect(input).toHaveDisplayValue('Apple')
+      expect(input).toHaveValue('Apple')
     })
 
     it('persists input text if dropdown is closed and open without selection', () => {
@@ -1104,12 +1118,13 @@ describe('ComboBox component', () => {
       )
 
       const input = getByTestId('combo-box-input')
+      const toggle = getByTestId('combo-box-toggle')
       userEvent.type(input, 'yu')
 
-      userEvent.click(getByTestId('combo-box-toggle'))
+      userEvent.click(toggle)
       expect(input).toHaveValue('yu')
 
-      userEvent.click(getByTestId('combo-box-toggle'))
+      userEvent.click(toggle)
       expect(input).toHaveValue('yu')
     })
 
@@ -1142,20 +1157,21 @@ describe('ComboBox component', () => {
         />
       )
 
+      const yuzuOption = getByTestId('combo-box-option-yuzu')
+      const blackberryOption = getByTestId('combo-box-option-blackberry')
+
       userEvent.click(getByTestId('combo-box-toggle'))
-      userEvent.hover(getByTestId('combo-box-option-blackberry'))
+      userEvent.hover(blackberryOption)
 
-      expect(getByTestId('combo-box-option-blackberry')).toHaveClass(
+      expect(blackberryOption).toHaveClass(
         'usa-combo-box__list-option--focused'
       )
 
-      userEvent.hover(getByTestId('combo-box-option-yuzu'))
-      expect(getByTestId('combo-box-option-blackberry')).not.toHaveClass(
-        'usa-combo-box__list-option--focused'
-      )
-      expect(getByTestId('combo-box-option-yuzu')).toHaveClass(
+      userEvent.hover(yuzuOption)
+      expect(blackberryOption).not.toHaveClass(
         'usa-combo-box__list-option--focused'
       )
+      expect(yuzuOption).toHaveClass('usa-combo-box__list-option--focused')
     })
 
     it('clears focus when clicking outside of the component', () => {
diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index 14ebf5e193..16b83c8df2 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -37,6 +37,7 @@ interface ComboBoxProps {
   noResults?: string
   inputProps?: JSX.IntrinsicElements['input']
   selectProps?: JSX.IntrinsicElements['select']
+  ulProps?: JSX.IntrinsicElements['ul']
 }
 
 interface InputProps {
@@ -79,6 +80,7 @@ export const ComboBox = ({
   noResults,
   selectProps,
   inputProps,
+  ulProps,
   ...customProps
 }: ComboBoxProps): React.ReactElement => {
   const isDisabled = !!disabled
@@ -341,7 +343,8 @@ export const ComboBox = ({
         id={listID}
         className="usa-combo-box__list"
         role="listbox"
-        hidden={!state.isOpen}>
+        hidden={!state.isOpen}
+        {...ulProps}>
         {state.filteredOptions.map((option, index) => {
           const focused = option === state.focusedOption
           const selected = option === state.selectedOption
diff --git a/src/stories/templates/documentation.stories.tsx b/src/stories/templates/documentation.stories.tsx
index 59830e9a71..f429c8e3ae 100644
--- a/src/stories/templates/documentation.stories.tsx
+++ b/src/stories/templates/documentation.stories.tsx
@@ -155,7 +155,7 @@ export const DocumentationPage = (): React.ReactElement => {
         <Logo
           medium
           image={<img className="usa-footer__logo-img" src={logoImg} alt="" />}
-          heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+          heading={<p className="usa-footer__logo-heading">Name of Agency</p>}
         />
         <Grid className="usa-footer__contact-links" mobileLg={{ col: 6 }}>
           <SocialLinks
@@ -178,6 +178,12 @@ export const DocumentationPage = (): React.ReactElement => {
                 href="javascript:void(0);">
                 <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/stories/templates/landing.stories.tsx b/src/stories/templates/landing.stories.tsx
index 4219d5da35..e401e9dbb6 100644
--- a/src/stories/templates/landing.stories.tsx
+++ b/src/stories/templates/landing.stories.tsx
@@ -126,7 +126,7 @@ export const LandingPage = (): React.ReactElement => {
         <Logo
           medium
           image={<img className="usa-footer__logo-img" src={logoImg} alt="" />}
-          heading={<h3 className="usa-footer__logo-heading">Name of Agency</h3>}
+          heading={<p className="usa-footer__logo-heading">Name of Agency</p>}
         />
         <Grid className="usa-footer__contact-links" mobileLg={{ col: 6 }}>
           <SocialLinks
@@ -149,6 +149,12 @@ export const LandingPage = (): React.ReactElement => {
                 href="javascript:void(0);">
                 <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/yarn.lock b/yarn.lock
index 7d2a5d09e7..70cb893735 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5388,18 +5388,18 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-del@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/del/-/del-5.1.0.tgz#d9487c94e367410e6eff2925ee58c0c84a75b3a7"
-  integrity sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==
+del@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/del/-/del-6.0.0.tgz#0b40d0332cea743f1614f818be4feb717714c952"
+  integrity sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==
   dependencies:
-    globby "^10.0.1"
-    graceful-fs "^4.2.2"
+    globby "^11.0.1"
+    graceful-fs "^4.2.4"
     is-glob "^4.0.1"
     is-path-cwd "^2.2.0"
-    is-path-inside "^3.0.1"
-    p-map "^3.0.0"
-    rimraf "^3.0.0"
+    is-path-inside "^3.0.2"
+    p-map "^4.0.0"
+    rimraf "^3.0.2"
     slash "^3.0.0"
 
 delayed-stream@~1.0.0:
@@ -6449,7 +6449,7 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.0.3, fast-glob@^3.1.1, fast-glob@^3.2.5:
+fast-glob@^3.1.1, fast-glob@^3.2.5:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
   integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==
@@ -7191,18 +7191,16 @@ globby@11.0.1:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
-globby@^10.0.1:
-  version "10.0.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.2.tgz#277593e745acaa4646c3ab411289ec47a0392543"
-  integrity sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==
+globby@^11.0.1:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
+  integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
   dependencies:
-    "@types/glob" "^7.1.1"
     array-union "^2.1.0"
     dir-glob "^3.0.1"
-    fast-glob "^3.0.3"
-    glob "^7.1.3"
-    ignore "^5.1.1"
-    merge2 "^1.2.3"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
     slash "^3.0.0"
 
 globby@^11.0.2:
@@ -7250,7 +7248,7 @@ good-listener@^1.2.2:
   dependencies:
     delegate "^3.1.2"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.4:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
@@ -7739,7 +7737,7 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.1.1, ignore@^5.1.4, ignore@^5.1.8:
+ignore@^5.1.4, ignore@^5.1.8:
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
@@ -8186,10 +8184,10 @@ is-path-cwd@^2.2.0:
   resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
   integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
 
-is-path-inside@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"
-  integrity sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==
+is-path-inside@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
 is-plain-obj@^1.1.0:
   version "1.1.0"
@@ -13946,13 +13944,13 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-uswds@2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.9.0.tgz#002089d74582960099b0ee836f89f043cdf6d0bc"
-  integrity sha512-5IMVgMCUUlgWVFrB7Wf1qTvv5L3oDDlSsAgvJ02+/sV2uh4JzO9YPm3493RTaMuHTc+feRCuYyEIloXsEQY0Pg==
+uswds@2.10.3:
+  version "2.10.3"
+  resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.10.3.tgz#16d34cee81897762d6d69d3ac83aa55129826fa6"
+  integrity sha512-krNRzx1jRzOJpuH/qtmQhd5zxnXTaDVqrPNYT99sJbxzWUqjb1zZHh3jFNo+xKDpNuiO0XMPwZwlaSp2YdZ3Ag==
   dependencies:
     classlist-polyfill "^1.0.3"
-    del "^5.1.0"
+    del "^6.0.0"
     domready "^1.0.8"
     elem-dataset "^2.0.0"
     lodash.debounce "^4.0.7"