From afb8c5a11c46945c56392152913f6c00b104e6cc Mon Sep 17 00:00:00 2001
From: Andrew Steele <andrew.steele@adhocteam.us>
Date: Wed, 15 Nov 2023 14:10:41 -0500
Subject: [PATCH] A11y improvements for va-crisis-line-modal,
 va-minimal-header, va-modal (#940)

* A11y improvements for CLM and MH and Modal
* Streamlining the divs for CLM and switching to V3 modal
* Adding 'focus outline' to the VA logo's link
* Making modal content fit better on smaller screens
* Removing "describedby" for modal to prevent run-on screen reading

* Version bump
---
 .../test/va-crisis-line-modal.e2e.ts          |  96 ++++++------
 .../va-crisis-line-modal.tsx                  | 137 +++++++++---------
 .../test/va-minimal-header.spec.tsx           |   4 +-
 .../va-minimal-header/va-minimal-header.scss  |   4 +
 .../va-minimal-header/va-minimal-header.tsx   |  14 +-
 .../components/va-modal/test/va-modal.e2e.ts  |   2 +-
 .../src/components/va-modal/va-modal.scss     |   7 +-
 .../src/components/va-modal/va-modal.tsx      |   9 +-
 8 files changed, 134 insertions(+), 139 deletions(-)

diff --git a/packages/web-components/src/components/va-crisis-line-modal/test/va-crisis-line-modal.e2e.ts b/packages/web-components/src/components/va-crisis-line-modal/test/va-crisis-line-modal.e2e.ts
index d182a7291..fea5c6ead 100644
--- a/packages/web-components/src/components/va-crisis-line-modal/test/va-crisis-line-modal.e2e.ts
+++ b/packages/web-components/src/components/va-crisis-line-modal/test/va-crisis-line-modal.e2e.ts
@@ -24,60 +24,56 @@ describe('va-crisis-line-modal', () => {
         </button>
       </div>
       <va-modal class=\"hydrated\" large=\"\">
-        <div class=\"va-modal va-modal-large va-overlay\" id=\"modal-crisisline\" role=\"alertdialog\">
-          <div class=\"va-crisis-panel va-modal-inner\">
-            <div class=\"va-crisis-panel-body va-overlay-body\">
-              <p>
-                If you are a Veteran in crisis or concerned about one, connect with our caring, qualified responders for confidential help. Many of them are Veterans themselves.
-              </p>
-              <ul class=\"va-crisis-panel-list\">
-                <li>
-                  <i aria-hidden=\"true\" class=\"fa fa-phone va-crisis-panel-icon\"></i>
-                  <span>
-                    Call
-                    <strong>
-                      <va-telephone class=\"hydrated\"></va-telephone>
-                      and select 1
-                    </strong>
-                  </span>
-                </li>
-                <li>
-                  <i aria-hidden=\"true\" class=\"fa fa-mobile-alt va-crisis-panel-icon\"></i>
-                  <span>
-                    Text
-                    <strong>
-                      <va-telephone class=\"hydrated\"></va-telephone>
-                    </strong>
-                  </span>
-                </li>
-                <li>
-                  <i aria-hidden=\"true\" class=\"fa fa-comments va-crisis-panel-icon\"></i>
-                  <a class=\"no-external-icon\" href=\"https://www.veteranscrisisline.net/get-help-now/chat/\">
-                    Start a confidential chat
-                  </a>
-                </li>
-                <li>
-                  <i aria-hidden=\"true\" class=\"fa fa-deaf va-crisis-panel-icon\"></i>
-                  <p>
-                    Call TTY if you have hearing loss
-                    <strong>
-                      <va-telephone class=\"hydrated\"></va-telephone>
-                    </strong>
-                  </p>
-                </li>
-              </ul>
-              Get more resources at
-              <a class=\"no-external-icon\" href=\"https://www.veteranscrisisline.net/\">
-                VeteransCrisisLine.net
-              </a>
-            </div>
-          </div>
-        </div>
+        <p>
+          If you are a Veteran in crisis or concerned about one, connect with our caring, qualified responders for confidential help. Many of them are Veterans themselves.
+        </p>
+        <ul class=\"va-crisis-panel-list\">
+          <li>
+            <i aria-hidden=\"true\" class=\"fa fa-phone va-crisis-panel-icon\"></i>
+            <span>
+              Call
+              <strong>
+                <va-telephone class=\"hydrated\"></va-telephone>
+                and select 1
+              </strong>
+            </span>
+          </li>
+          <li>
+            <i aria-hidden=\"true\" class=\"fa fa-mobile-alt va-crisis-panel-icon\"></i>
+            <span>
+              Text
+              <strong>
+                <va-telephone class=\"hydrated\"></va-telephone>
+              </strong>
+            </span>
+          </li>
+          <li>
+            <i aria-hidden=\"true\" class=\"fa fa-comments va-crisis-panel-icon\"></i>
+            <a class=\"no-external-icon\" href=\"https://www.veteranscrisisline.net/get-help-now/chat/\">
+              Start a confidential chat
+            </a>
+          </li>
+          <li>
+            <i aria-hidden=\"true\" class=\"fa fa-deaf va-crisis-panel-icon\"></i>
+            <p>
+              Call TTY if you have hearing loss
+              <strong>
+                <va-telephone class=\"hydrated\"></va-telephone>
+              </strong>
+            </p>
+          </li>
+        </ul>
+        <p>
+          Get more resources at
+          <a class=\"no-external-icon\" href=\"https://www.veteranscrisisline.net/\">
+            VeteransCrisisLine.net
+          </a>
+        </p>
       </va-modal>
     </mock:shadow-root>
   </va-crisis-line-modal>`);
   });
-  
+
   it('shows modal when triggered', async () => {
     const page = await newE2EPage();
     await page.setContent(`<va-crisis-line-modal />`);
diff --git a/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx b/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx
index 82f676589..4d34103ba 100644
--- a/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx
+++ b/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx
@@ -53,79 +53,72 @@ export class VACrisisLineModal {
           onCloseEvent={() => this.setNotVisible()}
           visible={this.isOpen}
           large={true}
+          uswds={true}
         >
-          <div
-            id="modal-crisisline"
-            class="va-overlay va-modal va-modal-large"
-            role="alertdialog"
-          >
-            <div class="va-crisis-panel va-modal-inner">
-              <div class="va-overlay-body va-crisis-panel-body">
-                <p>
-                  If you are a Veteran in crisis or concerned about one, connect
-                  with our caring, qualified responders for confidential help.
-                  Many of them are Veterans themselves.
-                </p>
-                <ul class="va-crisis-panel-list">
-                  <li>
-                    <i
-                      class="fa fa-phone va-crisis-panel-icon"
-                      aria-hidden="true"
-                    />
-                    <span>
-                      Call{' '}
-                      <strong>
-                        <va-telephone contact="988" /> and select 1
-                      </strong>
-                    </span>
-                  </li>
-                  <li>
-                    <i
-                      class="fa fa-mobile-alt va-crisis-panel-icon"
-                      aria-hidden="true"
-                    />
-                    <span>
-                      Text&nbsp;
-                      <strong>
-                        <va-telephone sms contact="838255" />
-                      </strong>
-                    </span>
-                  </li>
-                  <li>
-                    <i
-                      class="fa fa-comments va-crisis-panel-icon"
-                      aria-hidden="true"
-                    />
-                    <a
-                      class="no-external-icon"
-                      href="https://www.veteranscrisisline.net/get-help-now/chat/"
-                    >
-                      Start a confidential chat
-                    </a>
-                  </li>
-                  <li>
-                    <i
-                      class="fa fa-deaf va-crisis-panel-icon"
-                      aria-hidden="true"
-                    />
-                    <p>
-                      Call TTY if you have hearing loss{' '}
-                      <strong>
-                        <va-telephone tty contact={CONTACTS.CRISIS_TTY} />
-                      </strong>
-                    </p>
-                  </li>
-                </ul>
-                Get more resources at{' '}
-                <a
-                  class="no-external-icon"
-                  href="https://www.veteranscrisisline.net/"
-                >
-                  VeteransCrisisLine.net
-                </a>
-              </div>
-            </div>
-          </div>
+          <p>
+            If you are a Veteran in crisis or concerned about one, connect
+            with our caring, qualified responders for confidential help.
+            Many of them are Veterans themselves.
+          </p>
+          <ul class="va-crisis-panel-list">
+            <li>
+              <i
+                class="fa fa-phone va-crisis-panel-icon"
+                aria-hidden="true"
+              />
+              <span>
+                Call{' '}
+                <strong>
+                  <va-telephone contact="988" /> and select 1
+                </strong>
+              </span>
+            </li>
+            <li>
+              <i
+                class="fa fa-mobile-alt va-crisis-panel-icon"
+                aria-hidden="true"
+              />
+              <span>
+                Text&nbsp;
+                <strong>
+                  <va-telephone sms contact="838255" />
+                </strong>
+              </span>
+            </li>
+            <li>
+              <i
+                class="fa fa-comments va-crisis-panel-icon"
+                aria-hidden="true"
+              />
+              <a
+                class="no-external-icon"
+                href="https://www.veteranscrisisline.net/get-help-now/chat/"
+              >
+                Start a confidential chat
+              </a>
+            </li>
+            <li>
+              <i
+                class="fa fa-deaf va-crisis-panel-icon"
+                aria-hidden="true"
+              />
+              <p>
+                Call TTY if you have hearing loss{' '}
+                <strong>
+                  <va-telephone tty contact={CONTACTS.CRISIS_TTY} />
+                </strong>
+              </p>
+            </li>
+          </ul>
+          <p>
+            Get more resources at{' '}
+            <a
+              class="no-external-icon"
+              href="https://www.veteranscrisisline.net/"
+            >
+              VeteransCrisisLine.net
+            </a>
+          </p>
         </va-modal>
       </Host>
     );
diff --git a/packages/web-components/src/components/va-minimal-header/test/va-minimal-header.spec.tsx b/packages/web-components/src/components/va-minimal-header/test/va-minimal-header.spec.tsx
index bcb0a0e54..367337227 100644
--- a/packages/web-components/src/components/va-minimal-header/test/va-minimal-header.spec.tsx
+++ b/packages/web-components/src/components/va-minimal-header/test/va-minimal-header.spec.tsx
@@ -13,7 +13,7 @@ describe('va-minimal-header', () => {
           <va-official-gov-banner></va-official-gov-banner>
           <va-crisis-line-modal></va-crisis-line-modal>
           <div class="va-header">
-            <a href="/" title="Go to VA.gov">
+            <a title="Go to VA.gov" class="va-logo-link" href="/">
               <img alt="VA logo and Seal, U.S. Department of Veterans Affairs" class="va-logo" src="[object Object]">
             </a>
             <div class="header-container">
@@ -36,7 +36,7 @@ describe('va-minimal-header', () => {
           <va-official-gov-banner></va-official-gov-banner>
           <va-crisis-line-modal></va-crisis-line-modal>
           <div class="va-header">
-            <a href="/" title="Go to VA.gov">
+            <a title="Go to VA.gov" class="va-logo-link" href="/">
               <img alt="VA logo and Seal, U.S. Department of Veterans Affairs" class="va-logo" src="[object Object]">
             </a>
             <div class="header-container">
diff --git a/packages/web-components/src/components/va-minimal-header/va-minimal-header.scss b/packages/web-components/src/components/va-minimal-header/va-minimal-header.scss
index d4b18777b..ca27bd01c 100644
--- a/packages/web-components/src/components/va-minimal-header/va-minimal-header.scss
+++ b/packages/web-components/src/components/va-minimal-header/va-minimal-header.scss
@@ -14,6 +14,10 @@
   }
 }
 
+.va-logo-link:focus {
+  outline: 2px solid var(--color-gold-light);
+}
+
 .va-logo {
   margin-right: 8px;
   min-height: 30px;
diff --git a/packages/web-components/src/components/va-minimal-header/va-minimal-header.tsx b/packages/web-components/src/components/va-minimal-header/va-minimal-header.tsx
index bb816cd2c..a82a3b5b4 100644
--- a/packages/web-components/src/components/va-minimal-header/va-minimal-header.tsx
+++ b/packages/web-components/src/components/va-minimal-header/va-minimal-header.tsx
@@ -22,17 +22,15 @@ export class VaMinimalHeader {
 
     return (
       <Host role="banner">
-        <va-official-gov-banner/>
-        <va-crisis-line-modal/>
+        <va-official-gov-banner />
+        <va-crisis-line-modal />
         <div class="va-header">
-
-          <a href="/" title="Go to VA.gov">
-            <img class="va-logo" src={vaSeal} alt="VA logo and Seal, U.S. Department of Veterans Affairs"/>
+          <a href="/" title="Go to VA.gov" class="va-logo-link">
+            <img class="va-logo" src={vaSeal} alt="VA logo and Seal, U.S. Department of Veterans Affairs" />
           </a>
-          <div class='header-container'>
+          <div class="header-container">
             <h1>{header}</h1>
-            {this.subheader &&
-              <h2>{subheader}</h2>}
+            {this.subheader && <h2>{subheader}</h2>}
           </div>
         </div>
       </Host>
diff --git a/packages/web-components/src/components/va-modal/test/va-modal.e2e.ts b/packages/web-components/src/components/va-modal/test/va-modal.e2e.ts
index 0a45d5c42..22b160e39 100644
--- a/packages/web-components/src/components/va-modal/test/va-modal.e2e.ts
+++ b/packages/web-components/src/components/va-modal/test/va-modal.e2e.ts
@@ -287,7 +287,7 @@ describe('va-modal', () => {
     expect(element).toEqualHtml(`
       <va-modal class="hydrated" modal-title="Example Title" uswds="" visible="">
         <mock:shadow-root>
-        <div aria-describedby="description" aria-label="Example Title modal" aria-modal="true" class="usa-modal" role="dialog">
+        <div aria-label="Example Title modal" aria-modal="true" class="usa-modal" role="dialog">
             <div class="usa-modal__content">
               <button aria-label="Close Example Title modal" class="va-modal-close" type="button">
                 <i aria-hidden="true"></i>
diff --git a/packages/web-components/src/components/va-modal/va-modal.scss b/packages/web-components/src/components/va-modal/va-modal.scss
index d0e75e75d..28a4bf891 100644
--- a/packages/web-components/src/components/va-modal/va-modal.scss
+++ b/packages/web-components/src/components/va-modal/va-modal.scss
@@ -13,7 +13,7 @@
 @import '../../global/formation_overrides';
 
 .usa-modal-alert {
-  padding: 0px // => Due to icons
+  padding: 0px; // => Due to icons
 }
 
 .usa-modal__heading,
@@ -31,6 +31,11 @@
   }
 }
 
+@media screen and (max-width: 481px) {
+  .usa-modal__content {
+    width: 85%;
+  }
+}
 
 :host([status='info']) .usa-modal {
   border-left-color: var(--color-primary-alt-dark);
diff --git a/packages/web-components/src/components/va-modal/va-modal.tsx b/packages/web-components/src/components/va-modal/va-modal.tsx
index e3431bb5e..0ecd79e8b 100644
--- a/packages/web-components/src/components/va-modal/va-modal.tsx
+++ b/packages/web-components/src/components/va-modal/va-modal.tsx
@@ -87,7 +87,7 @@ export class VaModal {
   componentLibraryAnalytics: EventEmitter;
 
   /**
-   * Listen for the va-button GA event and capture it so 
+   * Listen for the va-button GA event and capture it so
    * that we can emit a single va-modal GA event that includes
    * the va-button details in handlePrimaryButtonClick and
    * handleSecondaryButtonClick.
@@ -165,7 +165,7 @@ export class VaModal {
   @Prop({ reflect: true }) visible?: boolean = false;
 
   /**
-   * Additional DOM-nodes that should not be hidden from screen readers. 
+   * Additional DOM-nodes that should not be hidden from screen readers.
    * Useful when an open modal shouldn't hide all content behind the overlay.
    */
   @Prop() ariaHiddenNodeExceptions?: HTMLElement[] = [];
@@ -427,7 +427,7 @@ export class VaModal {
         'usa-modal__heading': true,
         'va-modal-alert-title': status,
       });
-      const closingButton = forcedModal ? '' 
+      const closingButton = forcedModal ? ''
       : <button
           aria-label={btnAriaLabel}
           class="va-modal-close"
@@ -439,10 +439,9 @@ export class VaModal {
         </button>;
       return (
         <Host>
-          <div class={wrapperClass} 
+          <div class={wrapperClass}
             role={status === 'warning' || status === 'error' ? 'alertdialog' : 'dialog' }
             aria-label={ariaLabel}
-            aria-describedby="description"
             aria-modal="true"
           >
             <div class={contentClass}>