Skip to content

Commit

Permalink
A11y improvements for va-crisis-line-modal, va-minimal-header, va-mod…
Browse files Browse the repository at this point in the history 
…al (#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
  • Loading branch information
@Andrew565
Andrew565 authored Nov 15, 2023
1 parent 981e742 commit afb8c5a
Show file tree
Hide file tree
Showing 8 changed files with 134 additions and 139 deletions.
96 changes: 46 additions & 50 deletions packages/web-components/src/components/va-crisis-line-modal/test/va-crisis-line-modal.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 />`);
Expand Down
137 changes: 65 additions & 72 deletions packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/web-components/src/components/va-minimal-header/test/va-minimal-header.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand Down
4 changes: 4 additions & 0 deletions packages/web-components/src/components/va-minimal-header/va-minimal-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
}
}

.va-logo-link:focus {
outline: 2px solid var(--color-gold-light);
}

.va-logo {
margin-right: 8px;
min-height: 30px;
Expand Down
14 changes: 6 additions & 8 deletions packages/web-components/src/components/va-minimal-header/va-minimal-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/src/components/va-modal/test/va-modal.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion packages/web-components/src/components/va-modal/va-modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
@import '../../global/formation_overrides';

.usa-modal-alert {
padding: 0px // => Due to icons
padding: 0px; // => Due to icons
}

.usa-modal__heading,
Expand All @@ -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);
Expand Down
9 changes: 4 additions & 5 deletions packages/web-components/src/components/va-modal/va-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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[] = [];
Expand Down Expand Up @@ -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"
Expand All @@ -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}>
Expand Down

0 comments on commit afb8c5a

Please sign in to comment.