CSR-186

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)

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">
+      <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
-        <h3 class="visually-hidden" id="select-year-radio-group">Vehicle Year</h3>
+        <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) {

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>

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,10 +1,12 @@
 <template v-if="isCmsContentReady">
-  <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+  <div class="container-fluid shadow rounded-3 p-0">
-  <div class="select-car">
+    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
-    <div class="select-car-form rounded text-center">
+    <div class="select-car">
-      <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+      <div class="select-car-form rounded text-center">
-      <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
+        <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.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-        this.$router.push('?fmgPage=vehicle-make');
+      this.$router.push('?fmgPage=vehicle-make');
     }
   },
 
@@ -81,15 +83,13 @@ export default {
 </script>
 
 <style lang="scss">
-    .select-car {
+.select-car {
-        height: calc(100vh - 56px);
+  height: calc(100vh - 56px);
-        padding: 0 1.5rem;
 
-        .car_list {
+  .car_list {
-            // Height will be determined by overall height of content above list
+    // Height will be determined by overall height of content above list
-            height: calc(100% - 300px);
+    height: calc(100% - 300px);
-            padding: 0 1.5rem;
+    -webkit-overflow-scrolling: touch;
-            -webkit-overflow-scrolling: touch;
+  }
-        }
+}
-    }
 </style>

src/layouts/vehicle-year/year-question/year-question.vue

@@ -1,7 +1,8 @@
 <template>
-<radioQuestion class="radioQuestion" 
+<radioQuestion class="radioQuestion"
-    :questionText="questionText" 
+    :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: {

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

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>

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>

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 */

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">
+    <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'>
+    <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>