From 0e0321b30e67f5a2f094318382e7d169b954f122 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 9 Dec 2021 16:26:28 -0500
Subject: [PATCH] CSR-186
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Indicate that clicking a radio-button takes the user somewhere
Add a fieldset around the radio button group
Update the loader to indicate that it’s loading
Update the page-header component to use a new color: Gray 550 (#727676)
---
 .../radio-question/radio-question.vue         | 11 +++---
 src/layouts/component-test/component-test.vue | 12 +++++++
 src/layouts/vehicle-year/vehicle-year.vue     | 36 +++++++++----------
 .../year-question/year-question.vue           |  7 ++--
 src/styles/ux-variables.scss                  |  1 +
 src/ux-components/header/header.vue           |  8 ++++-
 src/ux-components/loader/loader.vue           |  2 ++
 .../radio-horizontal/radio-horizontal.vue     |  2 ++
 src/ux-components/radio/radio.vue             |  6 ++--
 9 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index 1abf5bb0f..0a04f49cf 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -6,8 +6,8 @@
       }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <div class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
-        <h3 class="visually-hidden" id="select-year-radio-group">Vehicle Year</h3>
+      <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
+        <legend class="visually-hidden">{{groupName}}</legend>
           <radio v-for="answer in answers" :key="answer"
             :radioID="answer"
             @click="chooseAnswer(answer)"
@@ -15,13 +15,13 @@
             loaderPosition="right"
             sizeInRem="1.5"
             data-test="radio"
-            groupName="radio-list"
+            :groupName="groupName"
             textPosition="text-start"
             isRequired=true
             :value="modelValue"
             screenReaderOnlyText="(opens new window)"
           />
-      </div>
+      </fieldset>
     </div>
   </div>
 </template>
@@ -33,7 +33,8 @@ export default {
   props: {
     questionText: String,
     answers: Array,
-    modelValue: String
+    modelValue: String,
+    groupName: String
   },
   methods: {
     chooseAnswer(answer) {
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index d1b96ff23..38391ac59 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -86,6 +86,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-1"
@@ -96,6 +97,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-1"
@@ -106,6 +108,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
       </div>
     </div>
@@ -128,6 +131,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-2"
@@ -138,6 +142,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-2"
@@ -148,6 +153,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
       </div>
     </div>
@@ -170,6 +176,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-3"
@@ -180,6 +187,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-3"
@@ -190,6 +198,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
       </div>
     </div>
@@ -214,6 +223,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radioHorizontal
         groupName="demo-4"
@@ -226,6 +236,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="2"
+        screenReaderOnlyText="(opens new window)"
         />
         <radioHorizontal
         groupName="demo-4"
@@ -238,6 +249,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="3"
+        screenReaderOnlyText="(opens new window)"
         />
       </div>
     </div>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 4da235fcc..470acc446 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,10 +1,12 @@
 <template v-if="isCmsContentReady">
-  <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
-  <div class="select-car">
-    <div class="select-car-form rounded text-center">
-      <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-      <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
-      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
+  <div class="container-fluid shadow rounded-3 p-0">
+    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
+      </div>
     </div>
   </div>
 </template>
@@ -66,8 +68,8 @@ export default {
 
   watch: {
     selectedYear(year) {
-        this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-        this.$router.push('?fmgPage=vehicle-make');
+      this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
+      this.$router.push('?fmgPage=vehicle-make');
     }
   },
 
@@ -81,15 +83,13 @@ export default {
 </script>
 
 <style lang="scss">
-    .select-car {
-        height: calc(100vh - 56px);
-        padding: 0 1.5rem;
+.select-car {
+  height: calc(100vh - 56px);
 
-        .car_list {
-            // Height will be determined by overall height of content above list
-            height: calc(100% - 300px);
-            padding: 0 1.5rem;
-            -webkit-overflow-scrolling: touch;
-        }
-    }
+  .car_list {
+    // Height will be determined by overall height of content above list
+    height: calc(100% - 300px);
+    -webkit-overflow-scrolling: touch;
+  }
+}
 </style>
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 4c5bb8d30..b6af42a07 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -1,7 +1,8 @@
 <template>
-<radioQuestion class="radioQuestion" 
-    :questionText="questionText" 
+<radioQuestion class="radioQuestion"
+    :questionText="questionText"
     :answers="years"
+    groupName="Choose Vehicle Year"
     v-model="selectedYear"
  />
 </template>
@@ -18,7 +19,7 @@ export default {
     },
     props: {
         questionText: String,
-        years: Array, 
+        years: Array,
         modelValue: String
     },
     components: {
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index a6e84d369..a9857c420 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -54,6 +54,7 @@ $gray-200:   #E3E4E4;// Used in theme
 $gray-300:   #D2D4D4;
 $gray:       #B0B3B3;// Default Gray
 $gray-500:   #8E9292;// Used in theme
+$gray-550:   #727676;// Used in theme
 $gray-600:   #4D5151;// Used in theme
 $gray-700:   #303333;// Used in theme
 $gray-800:   #222424;// Used in theme
diff --git a/src/ux-components/header/header.vue b/src/ux-components/header/header.vue
index 0749c0462..3395a7e93 100644
--- a/src/ux-components/header/header.vue
+++ b/src/ux-components/header/header.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center">
-      <h2 class="text-center text-dark fs-5 d-block fw-normal mb-0">{{ text }}</h2>
+      <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
     </div>
   </div>
 </template>
@@ -14,3 +14,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+  h2 {
+    color: $gray-550;
+  }
+</style>
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index 66ac9bc85..0170fe468 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="loader"
+  role="alert"
+  aria-label="Loading new page"
   v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
   v-bind:class="[this.loaderColor, this.loaderPosition]"
   ></div>
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.vue b/src/ux-components/radio-horizontal/radio-horizontal.vue
index aeed345d6..5cd533e2a 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/src/ux-components/radio-horizontal/radio-horizontal.vue
@@ -12,6 +12,7 @@
     <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
       <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+      <span v-if="screenReaderOnlyText" class="visually-hidden">{{screenReaderOnlyText}}</span>
       <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
     </label>
     <p class="small">{{errorMessage}}</p>
@@ -26,6 +27,7 @@ export default {
     groupName: String, /* Required, unique for each radio button GROUP */
     radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
     radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
+    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
     errorMessage: String, /* Optional, if there is an error message to be displayed */
     loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 2b4933ec1..516a51585 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -7,8 +7,8 @@
   <!-- Example -->
   <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
   <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent">
-    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent'>
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent()">
+    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
       <span v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="visually-hidden">{{screenReaderOnlyText}}</span>
@@ -47,6 +47,6 @@ export default {
   },
   components: {
     loader,
-  },
+  }
 };
 </script>