Merge pull request #77 from Safelite/CSR-186-horizontal-radio-buttons

CSR-186 Updates to horizontal radio buttons.

src/layouts/component-test/component-test.vue

@@ -155,11 +155,11 @@
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-      <div role="radiogroup" aria-labelledby="demo-4-radio-group" class="col my-3 d-flex align-items-center flex-column">
+      <div role="radiogroup" aria-labelledby="demo-3-radio-group" class="col my-3 d-flex align-items-center flex-column">
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="visually-hidden" id="demo-4-radio-group">Multi-Line Centered</h3>
+        <h3 class="visually-hidden" id="demo-3-radio-group">Multi-Line Centered</h3>
         <radio
-        groupName="demo-4"
+        groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="Corvette"
         radioLabelSubCopy="Test sub-headline"
@@ -203,7 +203,7 @@
         <radioHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="horizontal 1"
+        radioID="1"
         radioLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
@@ -215,7 +215,7 @@
         <radioHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="horizontal-2"
+        radioID="2"
         radioLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
@@ -227,7 +227,7 @@
         <radioHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="horizontal-3"
+        radioID="3"
         radioLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"

src/ux-components/button-primary/button-primary.vue

@@ -24,7 +24,7 @@ export default {
     isDisabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: Number
+    sizeInRem: [Number,String]
   },
   data() {
     return {

src/ux-components/button-secondary/button-secondary.vue

@@ -24,7 +24,7 @@ export default {
     isDisabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: Number
+    sizeInRem: [Number,String]
   },
   data() {
     return {

src/ux-components/list-button/list-button.vue

@@ -4,7 +4,6 @@
     class="btn list-button d-flex align-items-center justify-content-between py-3 px-4"
     @click='displayComponent'
     v-bind:class="[
-    this.isLoading ? 'button-loader' : 'not-loading',
     this.isError ? 'error' : '',
     ]"
     >
@@ -28,7 +27,7 @@ export default {
     errorText: String,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: Number
+    sizeInRem: [Number,String]
   },
   data() {
     return {

src/ux-components/radio-horizontal/radio-horizontal.spec.js

@@ -27,6 +27,7 @@ describe("radio.vue", () => {
       type: "radio",
       value: "2023",
       name: "TestGroup",
+      "aria-required": "true"
     });
 
     expect(label.attributes()).toEqual({

src/ux-components/radio-horizontal/radio-horizontal.vue

@@ -1,7 +1,15 @@
+<!-- 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">
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true"/>
-    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastItem" @click='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]" />
@@ -22,7 +30,7 @@ export default {
     errorMessage: String, /* Optional */
     loaderColor: String, /* Optional */
     loaderPosition: String, /* Optional */
-    sizeInRem: String, /* Optional */
+    sizeInRem: [Number,String], /* Optional */
     totalInGroup: Number,
     positionInGroup: Number
   },
@@ -35,13 +43,13 @@ export default {
   methods: {
     displayComponent() {
       this.display = true;
-    },
+    }
   },
   components: {
     loader,
   },
   computed: {
-    isFirstOrLastItem() {
+    isFirstOrLastButton() {
       let className = '';
       if(this.positionInGroup == this.totalInGroup) {
         className = 'last-item'
@@ -82,6 +90,7 @@ export default {
     &:hover {
       box-shadow: 0 0 0 4px $blue-100;
       cursor: pointer;
+      z-index: 2;
     }
     + p {
       display: none;

src/ux-components/radio/radio.spec.js

@@ -27,6 +27,7 @@ describe("radio.vue", () => {
       type: "radio",
       value: "2023",
       name: "TestGroup",
+      "aria-required": "true"
     });
 
     expect(label.attributes()).toEqual({

src/ux-components/radio/radio.vue

@@ -7,7 +7,7 @@
   <!-- 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">
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true">
     <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>
@@ -21,16 +21,16 @@
 import loader from "@/ux-components/loader/loader";
 export default {
   name: "radioList",
-  props: [
+  props: {
-    "groupName", /* Required, unique for each radio button GROUP */
+    groupName: String, /* Required, unique for each radio button GROUP */
-    "radioID", /* Required, unique for each radio button. Used for button id, label and <label for> */
+    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
-    "radioLabelSubCopy", /* Optional, used for multi-line radio buttons */
+    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
-    "textPosition", /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
+    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    "errorMessage", /* Optional */
+    errorMessage: String, /* Optional */
-    "loaderColor", /* Optional */
+    loaderColor: String, /* Optional */
-    "loaderPosition", /* Optional */
+    loaderPosition: String, /* Optional */
-    "sizeInRem" /* Optional */
+    sizeInRem: [Number,String], /* Optional */
-  ],
+  },
   data() {
     return {
       isError: false,