From 926668a37731115138c8e877b820263174aa6c0c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 6 Dec 2021 09:11:26 -0500
Subject: [PATCH] CSR-186 Updates to horizontal radio buttons.

Add aria-required to radio and list buttons. Update unit test accordingly.
---
 src/layouts/component-test/component-test.vue | 12 +++++-----
 .../button-primary/button-primary.vue         |  2 +-
 .../button-secondary/button-secondary.vue     |  2 +-
 src/ux-components/list-button/list-button.vue |  3 +--
 .../radio-horizontal/radio-horizontal.spec.js |  1 +
 .../radio-horizontal/radio-horizontal.vue     | 19 +++++++++++-----
 src/ux-components/radio/radio.spec.js         |  1 +
 src/ux-components/radio/radio.vue             | 22 +++++++++----------
 8 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 45768db57..2ad001282 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/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"
diff --git a/src/ux-components/button-primary/button-primary.vue b/src/ux-components/button-primary/button-primary.vue
index 7da10a107..e2aaea4b3 100644
--- a/src/ux-components/button-primary/button-primary.vue
+++ b/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 {
diff --git a/src/ux-components/button-secondary/button-secondary.vue b/src/ux-components/button-secondary/button-secondary.vue
index ddbde2a7d..f6dd62631 100644
--- a/src/ux-components/button-secondary/button-secondary.vue
+++ b/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 {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 6937ea93c..303ccdf2a 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/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 {
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.spec.js b/src/ux-components/radio-horizontal/radio-horizontal.spec.js
index ec12ce7ea..0a926c912 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.spec.js
+++ b/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({
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.vue b/src/ux-components/radio-horizontal/radio-horizontal.vue
index 41fea15b3..c71f283f0 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/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">
-    <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'>
+    <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="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;
diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
index faaab08e7..31aea38c1 100644
--- a/src/ux-components/radio/radio.spec.js
+++ b/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({
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 0db8c91d4..8ffb46289 100644
--- a/src/ux-components/radio/radio.vue
+++ b/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: [
-    "groupName", /* Required, unique for each radio button GROUP */
-    "radioID", /* Required, unique for each radio button. Used for button id, label and <label for> */
-    "radioLabelSubCopy", /* Optional, used for multi-line radio buttons */
-    "textPosition", /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    "errorMessage", /* Optional */
-    "loaderColor", /* Optional */
-    "loaderPosition", /* Optional */
-    "sizeInRem" /* Optional */
-  ],
+  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 */
+    loaderColor: String, /* Optional */
+    loaderPosition: String, /* Optional */
+    sizeInRem: [Number,String], /* Optional */
+  },
   data() {
     return {
       isError: false,