User testing feedback 2

components/Accordion.vue

@@ -1,7 +1,8 @@
 <template>
-  <transition-group class="usa-accordion usa-accordion--bordered" name="benefit-list" tag="div"
-    aria-multiselectable="true">
-      <div v-for="benefit in lifeEventBenefits" :key="`acc-key-${benefit.slug}`" class="break-inside-avoid margin-bottom-2">
+  <transition-group id="acc-id" 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">
           <button
             ref="accordionButtons"

components/CriteriaChild.vue

@@ -9,7 +9,7 @@
       </label>
     </div>
 
-    <div v-if="type === 'select'" :key="criteriaKey" class="">
+    <div v-if="type === 'select' && values.length >= 7" :key="criteriaKey">
       <label class="usa-label margin-top-0" :for="'criteria-' + criteriaGroupKey + '-' + criteriaKey">{{ label }}</label>
       <select :id="'criteria-' + criteriaGroupKey + '-' + criteriaKey" class="usa-select" :name="'criteria-' + criteriaGroupKey + '-' + criteriaKey"
         @change="updateEligibilitySelected">
@@ -20,6 +20,23 @@
         </option>
       </select>
     </div>
+
+    <div v-if="type === 'select' && values.length < 7">
+        <fieldset class="usa-fieldset">
+          <legend class="usa-legend usa-legend">{{ label }}</legend>
+          <div v-for="option, i in values" :key="option" class="usa-radio shade">
+            <input
+              :id="`criteria-${criteriaGroupKey}-${criteriaKey}-${i}`"
+              class="usa-radio__input"
+              type="radio"
+              :name="criteriaGroupKey + '-' + criteriaKey"
+              :value="option"
+              :checked="(response === option) || (!response && i === 0)"
+              @change="updateEligibilitySelected"/>
+              <label class="usa-radio__label" :for="`criteria-${criteriaGroupKey}-${criteriaKey}-${i}`">{{ option }}</label>
+          </div>
+        </fieldset>
+    </div>
 </div>
 </template>
 <script>

components/Header.vue

@@ -150,8 +150,8 @@
               </nuxt-link>
             </li>
             <li class="usa-nav__primary-item">
-              <nuxt-link to="/topics" class="usa-nav__link">
-                <span>Benefits by topic</span>
+              <nuxt-link to="/types" class="usa-nav__link">
+                <span>Benefits by type</span>
               </nuxt-link>
             </li>
             <li class="usa-nav__primary-item">
@@ -161,6 +161,11 @@
             </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

components/ShareResults.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="margin-bottom-4 print:display-none">
-    <h3>Getting help from a friend?</h3>
+    <h3>Sharing and printing</h3>
     <p class="usa-prose">
       Copy a link to this page with the criteria you
       selected above. Make sure to share it only with
@@ -11,10 +11,11 @@
         <input class="usa-input" type="text" readonly
           aria-label="URL of website with responses saved"
           :value="url" data-position="top"
-          @click="copy"/>
+          @click="copy"
+          @blur="blur"/>
           <span :class="{ 'usa-tooltip__body': true, 'is-set': alert, 'usa-tooltip__body--top':true, 'is-visible': alert }" role="tooltip" :aria-hidden="!alert"
             style="left: 15%; top: -4rem;">
-            URL with responses copied to clipboard
+            Link with my selections is copied
           </span>
         </span>
     </div>
@@ -24,7 +25,7 @@
           role="img">
           <use xlink:href="~/assets/img/sprite.svg#share"/>
         </svg>
-        <span class="text-middle">Share my selections</span>
+        <span class="text-middle">Copy my selections</span>
       </button>
     </div>
     <div class="margin-bottom-1">
@@ -99,9 +100,13 @@ export default {
     }
   },
   methods: {
+    blur () {
+      this.alert = false;
+    },
     async copy () {
       await navigator.clipboard.writeText(this.url);
       this.alert = true;
+      /* istanbul ignore next */
       setTimeout(() => {
         this.alert = false;
       }, 30 * 1000)

nuxt.config.js

@@ -22,14 +22,14 @@ export default {
   target: 'static',
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    title: 'Benefits Eligibility Estimator',
+    title: 'Benefit finder',
     htmlAttrs: {
       lang: 'en'
     },
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'Default meta tags are in nuxt.config.js' }
+      { hid: 'description', name: 'description', content: 'Answer a few questions. Review a custom list of potential benefits. Find out how to apply.' }
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: sitePrefix + 'favicon.ico' }

package.json

@@ -28,6 +28,7 @@
     "axios": "^0.21.4",
     "core-js": "^3.18.0",
     "nuxt": "^2.15.8",
+    "glob-parent": ">=5.1.2",
     "prismjs": ">=1.25.0",
     "nth-check": ">=2.0.1"
   },

pages/_slug/index.vue

@@ -34,9 +34,9 @@
         </div>
         <div class="tablet:grid-col-4 desktop:grid-col-3 display-flex flex-align-center margin-y-2 print:display-none">
           <div>
-            <button class="usa-button usa-button--unstyled open-all" @click="openAll">Open All</button>
+            <button class="usa-button usa-button--unstyled open-all" aria-controls="acc-id" @click="openAll">Open All</button>
             /
-            <button class="usa-button usa-button--unstyled close-all" @click="closeAll">Close All</button>
+            <button class="usa-button usa-button--unstyled close-all" aria-controls="acc-id" @click="closeAll">Close All</button>
           </div>
         </div>
         <div class="grid-col margin-y-2 text-right">
@@ -60,55 +60,56 @@
       </div>
 
       <div class="grid-row grid-gap print:display-block">
-        <div class="tablet:grid-col-5 desktop:grid-col-4 desktop:position-sticky desktop:top-1 desktop:height-viewport desktop:overflow-y-auto shade padding-2 radius-md">
-          <h2 class="display-none print:display-block">Eligibility criteria</h2>
-          <div v-if="filter">
-            <div class="margin-bottom-3">
-              Currently viewing
-              <span
-                class="usa-tag bg-secondary display-inline-flex margin-left-05 padding-0 usa-button-group__item">
-                <button
-                  class="usa-tooltip usa-button usa-button--unstyled usa-button--outline usa-button--inverse text-uppercase margin-left-05 border-left border-accent-cool-light padding-x-05 font-sans-3xs"
-                  style="padding: .25rem; text-decoration: none;"
-                  :title="`Remove the ${filter} filter`"
-                  aria-label="Remove this filter"
-                  data-position="top"
-                  @click="clearFilter">
-                  <span class="text-middle">{{ filter }}</span>
-                  <svg
-                    class="usa-icon text-white text-middle"
-                    aria-hidden="true"
-                    focusable="false"
-                    role="img">
-                    <use xlink:href="~/assets/img/sprite.svg#close" />
-                  </svg>
-                </button>
-              </span>
+        <div class="tablet:grid-col-5 desktop:grid-col-4 desktop:position-sticky desktop:top-1 desktop:height-viewport desktop:overflow-y-auto shade radius-md ">
+          <h2 class="padding-left-2">Eligibility criteria</h2>
+          <div>
+            <div v-if="filter">
+              <div class="margin-bottom-3">
+                Currently viewing
+                <span
+                  class="usa-tag bg-secondary display-inline-flex margin-left-05 padding-0 usa-button-group__item">
+                  <button
+                    class="usa-tooltip usa-button usa-button--unstyled usa-button--outline usa-button--inverse text-uppercase margin-left-05 border-left border-accent-cool-light padding-x-05 font-sans-3xs"
+                    style="padding: .25rem; text-decoration: none;"
+                    :title="`Remove the ${filter} filter`"
+                    aria-label="Remove this filter"
+                    data-position="top"
+                    @click="clearFilter">
+                    <span class="text-middle">{{ filter }}</span>
+                    <svg
+                      class="usa-icon text-white text-middle"
+                      aria-hidden="true"
+                      focusable="false"
+                      role="img">
+                      <use xlink:href="~/assets/img/sprite.svg#close" />
+                    </svg>
+                  </button>
+                </span>
+              </div>
             </div>
+            <div class="margin-bottom-4 display-flex print:display-none">
+              <div class="text-primary">
+                <svg class="usa-icon usa-icon--size-3" aria-labelledby="eligibility-section-criteria-icon-title" focusable="false"
+                  role="img">
+                  <title id="eligibility-section-criteria-icon-title">Important information</title>
+                  <use xlink:href="~/assets/img/sprite.svg#priority_high"/>
+                </svg>
+              </div>
+              <div class="font-body-md usa-icon-list">
+                {{ lifeEvent.eligibilityCriteriaDescription }}
+              </div>
+            </div>
+            <CriteriaGroup :life-event-criteria="lifeEvent.eligibilityCriteria" />
+            <share-results @print="openAll()" />
           </div>
-          <div class="margin-bottom-4 print:display-none">
-            <ul class="usa-icon-list usa-icon-list--size-md">
-              <li class="usa-icon-list__item">
-                <div class="usa-icon-list__icon text-primary">
-                  <svg class="usa-icon usa-icon--size-3" aria-hidden="true" focusable="false"
-                    role="img">
-                    <use xlink:href="~/assets/img/sprite.svg#priority_high"/>
-                  </svg>
-                </div>
-                <div class="usa-icon-list__content">
-                  {{ lifeEvent.eligibilityCriteriaDescription }}
-                </div>
-              </li>
-            </ul>
-          </div>
-          <CriteriaGroup :life-event-criteria="lifeEvent.eligibilityCriteria" />
-          <share-results @print="openAll()" />
         </div>
         <div class="tablet:grid-col-7 desktop:grid-col-8 print:display-block">
-          <div class="grid-row grid-gap display-none print:display-block break-before-always">
+          <div class="grid-row grid-gap print:display-block break-before-always">
             <div class="grid-col margin-bottom-3">
               <h2>Benefits</h2>
-              Showing {{ lifeEventBenefits.length }} related benefits sorted by {{ sort }}.
+              <span class="display-none print:display-block">
+                Showing {{ lifeEventBenefits.length }} related benefits sorted by {{ sort }}.
+              </span>
             </div>
           </div>
           <div
@@ -192,6 +193,12 @@ export default {
     this.lifeEvent = lifeEvent;
     this.allLifeEventBenefits = this.lifeEventBenefits = lifeEventBenefits;
   },
+  /* istanbul ignore next */
+  head () {
+    return {
+      title: this.lifeEvent.secondaryHeadline,
+    };
+  },
   computed: {
     lifeEventTitle () {
       return this.lifeEvent.secondaryHeadline;