Merge pull request #88 from Safelite/CSR-186-radio-button-updates

Csr 186 radio button updates
2021-12-10 09:49:43 -05:00 · 2021-12-10 09:49:43 -05:00 · 91fb99a1a6
commit 91fb99a1a6
parent aa073dc229 ebbe6d28de
10 changed files with 196 additions and 257 deletions
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@ -6,33 +6,22 @@
      }}</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">*</h3>
-        <radio
-          v-for="answer in answers"
-          :key="answer"
-          :radioID="answer"
-          @click="chooseAnswer(answer)"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1.5"
-          data-test="radio"
-          groupName="radio-list"
-          textPosition="text-start"
-          :value="modelValue"
-        />
-      </div>
+      <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)"
+            loaderColor="blue"
+            loaderPosition="right"
+            sizeInRem="1.5"
+            data-test="radio"
+            :groupName="groupName"
+            textPosition="text-start"
+            isRequired=true
+            :value="modelValue"
+            screenReaderOnlyText="(opens new window)"
+          />
+      </fieldset>
    </div>
  </div>
 </template>
@ -45,6 +34,7 @@ export default {
    questionText: String,
    answers: Array,
    modelValue: String,
+    groupName: String
  },
  methods: {
    chooseAnswer(answer) {
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@ -80,31 +80,37 @@
          Select Vehicle Year
        </h3>
        <radio
-          groupName="demo-1"
-          ariaLabelBy="vehicle-year"
-          radioID="2021"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
+        groupName="demo-1"
+        ariaLabelBy="vehicle-year"
+        radioID="2021"
+        isRequired=true
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
        />
        <radio
-          groupName="demo-1"
-          ariaLabelBy="vehicle-year"
-          radioID="2020"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
+        groupName="demo-1"
+        ariaLabelBy="vehicle-year"
+        radioID="2020"
+        isRequired=true
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
        />
        <radio
-          groupName="demo-1"
-          ariaLabelBy="vehicle-year"
-          radioID="2019"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
+        groupName="demo-1"
+        ariaLabelBy="vehicle-year"
+        radioID="2019"
+        isRequired=true
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
        />
      </div>
    </div>
@ -125,34 +131,37 @@
          Select Vehicle Year
        </h3>
        <radio
-          groupName="demo-2"
-          ariaLabelBy="vehicle-make"
-          radioID="Chevrolet"
-          radioLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
+        groupName="demo-2"
+        ariaLabelBy="vehicle-make"
+        radioID="Chevrolet"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
        />
        <radio
-          groupName="demo-2"
-          ariaLabelBy="vehicle-make"
-          radioID="Dodge"
-          radioLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
+        groupName="demo-2"
+        ariaLabelBy="vehicle-make"
+        radioID="Dodge"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
        />
        <radio
-          groupName="demo-2"
-          ariaLabelBy="vehicle-make"
-          radioID="Ford"
-          radioLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
+        groupName="demo-2"
+        ariaLabelBy="vehicle-make"
+        radioID="Ford"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
        />
      </div>
    </div>
@ -173,34 +182,37 @@
          Multi-Line Centered
        </h3>
        <radio
-          groupName="demo-3"
-          ariaLabelBy="vehicle-model"
-          radioID="Corvette"
-          radioLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
+        groupName="demo-3"
+        ariaLabelBy="vehicle-model"
+        radioID="Corvette"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
        />
        <radio
-          groupName="demo-3"
-          ariaLabelBy="vehicle-model"
-          radioID="Testarosa"
-          radioLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
+        groupName="demo-3"
+        ariaLabelBy="vehicle-model"
+        radioID="Testarosa"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
        />
        <radio
-          groupName="demo-3"
-          ariaLabelBy="vehicle-model"
-          radioID="S600"
-          radioLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
+        groupName="demo-3"
+        ariaLabelBy="vehicle-model"
+        radioID="S600"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
        />
      </div>
    </div>
@ -221,40 +233,43 @@
          Select Vehicle Year
        </h3>
        <radioHorizontal
-          groupName="demo-4"
-          ariaLabelBy="vehicle-model"
-          radioID="1"
-          radioLabelSubCopy=""
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="1"
+        groupName="demo-4"
+        ariaLabelBy="vehicle-model"
+        radioID="1"
+        radioLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="1"
+        screenReaderOnlyText="(opens new window)"
        />
        <radioHorizontal
-          groupName="demo-4"
-          ariaLabelBy="vehicle-model"
-          radioID="2"
-          radioLabelSubCopy=""
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="2"
+        groupName="demo-4"
+        ariaLabelBy="vehicle-model"
+        radioID="2"
+        radioLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="2"
+        screenReaderOnlyText="(opens new window)"
        />
        <radioHorizontal
-          groupName="demo-4"
-          ariaLabelBy="vehicle-model"
-          radioID="3"
-          radioLabelSubCopy=""
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="3"
+        groupName="demo-4"
+        ariaLabelBy="vehicle-model"
+        radioID="3"
+        radioLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        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,16 +1,12 @@
-<template>
-  <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"
-      />
+<template v-if="isCmsContentReady">
+  <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>
@ -76,8 +72,8 @@ export default {
  watch: {
    selectedYear(year) {
      this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-      this.$router.push("?fmgPage=vehicle-make");
-    },
+      this.$router.push('?fmgPage=vehicle-make');
+    }
  },

  components: {
@ -92,12 +88,10 @@ export default {
 <style lang="scss">
 .select-car {
  height: calc(100vh - 56px);
-  padding: 0 1.5rem;

  .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;
  }
 }
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@ -1,8 +1,8 @@
 <template>
-  <radioQuestion
-    class="radioQuestion"
+<radioQuestion class="radioQuestion"
    :questionText="questionText"
    :answers="years"
+    groupName="Choose Vehicle Year"
    v-model="selectedYear"
  />
 </template>
@ -28,7 +28,7 @@ export default {
  watch: {
    selectedYear(val) {
      this.$emit("update:modelValue", val);
-    },
+    }
  },
 };
 </script>
--- 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,9 +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>
@ -16,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,8 +1,9 @@
 <template>
-  <div
-    class="loader"
-    v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
-    v-bind:class="[this.loaderColor, this.loaderPosition]"
+  <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>
 </template>

--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/src/ux-components/radio-horizontal/radio-horizontal.vue
@ -1,39 +1,13 @@
 <!-- See the component-test.vue page for example implementation -->
-<!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-<!-- Example: -->
-<!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
-<!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
-<!-- Example -->
-<!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
 <template>
  <!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
  <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
-    <input
-      type="radio"
-      :id="radioID"
-      :name="groupName"
-      :value="radioID"
-      aria-required="true"
-      @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"
-      :class="isFirstOrLastButton"
-      @click="displayComponent"
-    >
-      <span class="m-0" :class="[this.textPosition]">{{ radioID }}</span>
-      <span class="m-0 small" :class="[this.textPosition]">{{
-        radioLabelSubCopy
-      }}</span>
-      <loader
-        v-if="display"
-        :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
-        :class="[this.loaderColor, this.loaderPosition]"
-      />
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @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" :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>
  </div>
@ -44,26 +18,17 @@ import loader from "@/ux-components/loader/loader";
 export default {
  name: "radioHorizontal",
  props: {
-    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 */,
-    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 */,
-    loaderPosition:
-      String /* Specify horizontal position of loader/spinner. Options are center, right, left */,
-    sizeInRem: [
-      Number,
-      String,
-    ] /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */,
-    totalInGroup:
-      Number /* Required, total number of radio buttons in group. Used to tell first and last in group to apply border radius. */,
-    positionInGroup:
-      Number /* Rquired, position of radio button in group. Example, 1,2,3 */,
+    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 */
+    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
+    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
+    totalInGroup: Number, /* Required, total number of radio buttons in group. Used to tell first and last in group to apply border radius. */
+    positionInGroup: Number /* Rquired, position of radio button in group. Example, 1,2,3 */
  },
  data() {
    return {
--- a/src/ux-components/radio/radio.spec.js
+++ b/src/ux-components/radio/radio.spec.js
@ -27,7 +27,7 @@ describe("radio.vue", () => {
      type: "radio",
      value: "2023",
      name: "TestGroup",
-      "aria-required": "true",
+      "aria-required": "false",
    });

    expect(label.attributes()).toEqual({
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@ -1,40 +1,15 @@
 <template>
  <!-- See the component-test.vue page for example implementation -->
-  <!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-  <!-- Example: -->
-  <!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
-  <!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
-  <!-- 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="true"
-      @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 class="m-0 small" :class="[this.textPosition]">{{
-        radioLabelSubCopy
-      }}</span>
-      <loader
-        v-if="display"
-        :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
-        :class="[this.loaderColor, this.loaderPosition]"
-      />
-    </label>
-    <p class="small">{{ errorMessage }}</p>
-  </div>
+    <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>
+    <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
+  </label>
+  <p class="small">{{errorMessage}}</p>
+</div>
 </template>

 <script>
@ -42,22 +17,16 @@ import loader from "@/ux-components/loader/loader";
 export default {
  name: "radioList",
  props: {
-    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 */,
-    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 */,
-    loaderPosition:
-      String /* Specify horizontal position of loader/spinner. Options are center, right, left */,
-    sizeInRem: [
-      Number,
-      String,
-    ] /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */,
+    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> */
+    isRequired: Boolean, /* Optional, default is false */
+    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
+    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
+    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 */
+    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
+    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
  },
  data() {
    return {
@ -72,6 +41,6 @@ export default {
  },
  components: {
    loader,
-  },
+  }
 };
 </script>