Skip to content
This repository has been archived by the owner on May 6, 2024. It is now read-only.

A11y feedback 3 #106

Merged
merged 1 commit into from
Oct 8, 2021
Merged

A11y feedback 3 #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions assets/styles/theme/_uswds-theme-custom-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,4 +62,11 @@ i.e.
@include at-media($theme-header-min-width) {
bottom: 6rem;
}
}

.usa-social-link-a11y > img {
display: block;
margin: 0 auto;
width: 65%;
transform: translate(0, 25%);
}
9 changes: 7 additions & 2 deletions components/Accordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<transition-group id="acc-id" class="usa-accordion usa-accordion--bordered" name="benefit-list"
tag="div" aria-multiselectable="true" aria-live="polite">
<transition-group id="acc-id" ref="accordion" class="usa-accordion usa-accordion--bordered"
name="benefit-list" tag="div" aria-multiselectable="true"
aria-live="polite">
<div v-for="benefit in lifeEventBenefits" :key="`acc-key-${benefit.slug}`"
class="break-inside-avoid margin-bottom-2">
<h2 :id="`acc-h-${benefit.slug}-${cid}`" class="usa-accordion__heading">
Expand Down Expand Up @@ -148,6 +149,10 @@ export default {
openAll () {
this.toggleAccordion(true);
},
focus () {
this.closeAll();
this.$refs.accordion.$el.querySelector('.usa-accordion__button').focus();
},
getCriteriaMatchLanguage (eligibilityCriteria) {
if (eligibilityCriteria.some(c => this.doesCriterionMatchSelection(c) === false)) {
return '(you are not eligible)';
Expand Down
19 changes: 12 additions & 7 deletions components/Footer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,33 +98,38 @@
<div class="usa-footer__social-links grid-row grid-gap-1 padding-bottom-0">
<div class="grid-col-auto">
<a
class="usa-social-link usa-social-link--facebook"
class="usa-social-link usa-social-link-a11y"
href="https://www.facebook.com/USAgov">
<span>Facebook</span>
<img alt="Facebook"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCI+PHJlY3QgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0Ii8+PHBhdGggZD0iTTIyLDEyYzAtNS41Mi00LjQ4LTEwLTEwLTEwUzIsNi40OCwyLDEyYzAsNC44NCwzLjQ0LDguODcsOCw5LjhWMTVIOHYtM2gyVjkuNUMxMCw3LjU3LDExLjU3LDYsMTMuNSw2SDE2djNoLTIgYy0wLjU1LDAtMSwwLjQ1LTEsMXYyaDN2M2gtM3Y2Ljk1QzE4LjA1LDIxLjQ1LDIyLDE3LjE5LDIyLDEyeiIvPjwvc3ZnPg==">
</a>
</div>

<div class="grid-col-auto">
<a
class="usa-social-link usa-social-link--twitter"
class="usa-social-link usa-social-link-a11y"
href="https://twitter.com/USAgov">
<span>Twitter</span>
<img alt="Twitter"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggaWQ9IlR3aXR0ZXIiIGQ9Ik0xMiwyQTEwLDEwLDAsMSwwLDIyLDEyLDEwLDEwLDAsMCwwLDEyLDJabTUsOC4xYzAsLjEsMCwuMjEsMCwuMzFhNi44MSw2LjgxLDAsMCwxLTYuODYsNi44Niw2Ljc0LDYuNzQsMCwwLDEtMy42OS0xLjA4LDUuNjMsNS42MywwLDAsMCwuNTgsMCw0Ljc5LDQuNzksMCwwLDAsMy0xQTIuNDEsMi40MSwwLDAsMSw3LjgsMTMuNTFhMS43NSwxLjc1LDAsMCwwLC40Ni4wNSwyLjU5LDIuNTksMCwwLDAsLjYzLS4wOEEyLjQyLDIuNDIsMCwwLDEsNywxMS4xMXYwYTIuMzMsMi4zMywwLDAsMCwxLjA5LjNBMi40MywyLjQzLDAsMCwxLDcuMyw4LjE2YTYuODQsNi44NCwwLDAsMCw1LDIuNTMsMi41OSwyLjU5LDAsMCwxLS4wNy0uNTUsMi40MSwyLjQxLDAsMCwxLDIuNDEtMi40MSwyLjM4LDIuMzgsMCwwLDEsMS43Ny43NkE0LjY3LDQuNjcsMCwwLDAsMTcuOSw3LjlhMi4zOSwyLjM5LDAsMCwxLTEuMDYsMS4zNCw0LjU1LDQuNTUsMCwwLDAsMS4zOS0uMzlBNSw1LDAsMCwxLDE3LDEwLjFaIi8+PC9zdmc+">
</a>
</div>

<div class="grid-col-auto">
<a
class="usa-social-link usa-social-link--youtube"
class="usa-social-link usa-social-link-a11y"
href="https://www.youtube.com/usagov1">
<img alt="YouTube"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyem01Ljc1IDEyLjkxQTEuNDkgMS40OSAwIDAxMTYuNjkgMTZhMzQuNjUgMzQuNjUgMCAwMS00LjY5LjI2QTM0LjY1IDM0LjY1IDAgMDE3LjMxIDE2YTEuNDkgMS40OSAwIDAxLTEuMDYtMS4wNkExNS44OCAxNS44OCAwIDAxNiAxMmExNS44OCAxNS44OCAwIDAxLjI1LTIuOTFBMS40OSAxLjQ5IDAgMDE3LjMxIDggMzQuNjUgMzQuNjUgMCAwMTEyIDcuNzdhMzQuNjUgMzQuNjUgMCAwMTQuNjkuMjMgMS40OSAxLjQ5IDAgMDExLjA2IDEuMDZBMTUuODggMTUuODggMCAwMTE4IDEyYTE1Ljg4IDE1Ljg4IDAgMDEtLjI1IDIuOTF6Ii8+PHBhdGggZD0iTTEwLjc3IDEzLjc4TDEzLjkxIDEybC0zLjE0LTEuNzh2My41NnoiLz48L3N2Zz4=">
<span>YouTube</span>
</a>
</div>

<div class="grid-col-auto">
<a
class="usa-social-link usa-social-link--instagram"
class="usa-social-link usa-social-link-a11y"
href="https://www.instagram.com/usagov/">
<span>Instagram</span>
<img alt="Instagram"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDEwYTIgMiAwIDEwMiAyIDIgMiAwIDAwLTItMnoiLz48cGF0aCBkPSJNMTIgMmExMCAxMCAwIDEwMTAgMTBBMTAgMTAgMCAwMDEyIDJ6bTYgMTIuNjlBMy4zMiAzLjMyIDAgMDExNC42OSAxOEg5LjMxQTMuMzIgMy4zMiAwIDAxNiAxNC42OVY5LjMxQTMuMzIgMy4zMiAwIDAxOS4zMSA2aDUuMzhBMy4zMiAzLjMyIDAgMDExOCA5LjMxeiIvPjxwYXRoIGQ9Ik0xNi45NCA5LjMxYTIuMjUgMi4yNSAwIDAwLTIuMjUtMi4yNUg5LjMxYTIuMjUgMi4yNSAwIDAwLTIuMjUgMi4yNXY1LjM4YTIuMjUgMi4yNSAwIDAwMi4yNSAyLjI1aDUuMzhhMi4yNSAyLjI1IDAgMDAyLjI1LTIuMjV6TTEyIDE1LjA5QTMuMDkgMy4wOSAwIDExMTUuMDkgMTIgMy4wOSAzLjA5IDAgMDExMiAxNS4wOXptMy43Ny01Ljc1YS43OS43OSAwIDAxLS41NS4yMy44My44MyAwIDAxLS41NS0uMjMuNzguNzggMCAwMTAtMS4xMS44Mi44MiAwIDAxLjU1LS4yMy43OC43OCAwIDAxLjU1IDEuMzN6Ii8+PC9zdmc+">
</a>
</div>
</div>
Expand Down
79 changes: 27 additions & 52 deletions components/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@

<div class="usa-overlay" />
<header class="usa-header usa-header--extended">
<div class="usa-navbar">
<div class="usa-navbar position-relative">
<div id="extended-logo" class="usa-logo" style="max-width: 60%">
<em class="usa-logo__text display-flex" style="align-items: center;">
<nuxt-link to="/" title="USAGov Logo" aria-label="USAGov Logo">
Expand All @@ -103,6 +103,32 @@
</em>
</div>
<button class="usa-menu-btn print:display-none">Menu</button>

<div class="usa-nav__secondary mobile:display-none mobile-lg:display-none tablet:display-none tablet-lg:display-none desktop:display-block">
<ul class="usa-nav__secondary-links">
<li class="usa-nav__secondary-item">
<a href="https://www.usa.gov/phone">1-844-USA-GOV1</a>
</li>
</ul>
<form class="usa-search" role="search">
<label class="usa-sr-only" for="extended-search-field-small">Search small</label>
<input
id="extended-search-field-small"
ref="search"
class="usa-input"
type="search"
name="search"
:value="query"/>
<button class="usa-button" type="submit" @click="doSearch">
<span class="usa-sr-only">Search</span>
<svg class="usa-icon text-middle usa-icon--size-3" aria-hidden="true" focusable="false"
role="img">
<use xlink:href="~/assets/img/sprite.svg#search"/>
</svg>
<!-- <span class="text-middle">Share my selections</span> -->
</button>
</form>
</div>
</div>
<nav aria-label="Primary navigation" class="usa-nav print:display-none">
<div class="usa-nav__inner">
Expand All @@ -113,32 +139,6 @@
alt="close"/>
</button>
<ul class="usa-nav__primary usa-accordion">
<!--<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link usa-current" aria-expanded="false" aria-controls="extended-nav-section-one"><span>Current section</span></button>
<ul id="extended-nav-section-one" class="usa-nav__submenu">
<li class="usa-nav__submenu-item">
<a href="#" class=""> Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class=""> Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class=""> Navigation link</a>
</li>
</ul>
</li>-->
<!--<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-nav-section-two"><span>Section</span></button>
<ul id="extended-nav-section-two" class="usa-nav__submenu">
<li class="usa-nav__submenu-item">
<a href="#" class=""> Navigation link</a>
</li><li class="usa-nav__submenu-item">
<a href="#" class=""> Navigation link</a>
</li><li class="usa-nav__submenu-item">
<a href="#" class=""> Navigation link</a>
</li>
</ul>
</li>-->
<li v-if="isLifeEventPage" class="usa-nav__primary-item">
<nuxt-link to="/" class="usa-nav__link">
<span>Benefits by life event</span>
Expand All @@ -160,31 +160,6 @@
</nuxt-link>
</li>
</ul>
<div class="usa-nav__secondary">
<ul class="usa-nav__secondary-links">
<li class="usa-nav__secondary-item">
<a href="https://www.usa.gov/phone">1-844-USA-GOV1</a>
</li>
</ul>
<form class="usa-search" role="search">
<label class="usa-sr-only" for="extended-search-field-small">Search small</label>
<input
id="extended-search-field-small"
ref="search"
class="usa-input"
type="search"
name="search"
:value="query"/>
<button class="usa-button" type="submit" @click="doSearch">
<span class="usa-sr-only">Search</span>
<svg class="usa-icon text-middle usa-icon--size-3" aria-hidden="true" focusable="false"
role="img">
<use xlink:href="~/assets/img/sprite.svg#search"/>
</svg>
<!-- <span class="text-middle">Share my selections</span> -->
</button>
</form>
</div>
</div>
</nav>
</header>
Expand Down
1 change: 1 addition & 0 deletions pages/_slug/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,7 @@ export default {
this.filter = "";
this.lifeEventBenefits = this.allLifeEventBenefits;
this.sortBenefits();
this.$nextTick(() => this.$refs.accordion.focus());
}
},
};
Expand Down