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)
2021-12-09 16:26:28 -05:00 · 2021-12-09 16:26:28 -05:00 · 0e0321b30e
commit 0e0321b30e
parent 1f7525abdc
9 changed files with 55 additions and 30 deletions
--- 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) {
--- 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>
--- 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>
--- 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: {
--- 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
--- 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>
--- 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>
--- 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 */
--- 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>