CSR-447: refactoring logic of buttons and events, remove unused logic

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

@@ -2,8 +2,12 @@
   <div
     class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
     :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
-    @mouseup="handleClick(value)"
-    @keyup.space="handleClick(value)"
+    @mouseup="triggerButton()"
+    @keyup.space="triggerButton()"
+    @keyup.up="handleKeyupArrow()"
+    @keyup.down="handleKeyupArrow()"
+    @keyup.left="handleKeyupArrow()"
+    @keyup.right="handleKeyupArrow()"
   >
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -12,7 +16,7 @@
       :value="value"
       :aria-required="isRequired"
       v-model="checkValue"
-      @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
+      @change="handleInputChange()"
     />
     <label
       tabindex="-1"
@@ -31,13 +35,16 @@
         class="m-0 small"
         :class="textPosition"
       >
-        {{buttonLabelSubCopy}}
+        {{ buttonLabelSubCopy }}
       </span>
-      <span v-if="screenReaderOnlyText" class="sr-only">
-        {{screenReaderOnlyText}}
+      <span 
+        v-if="screenReaderOnlyText" 
+        class="sr-only"
+      >
+        {{ screenReaderOnlyText }}
       </span>
       <loader
-        v-if="isLoaderDisplayed && !isMultiSelect"
+        v-if="isLoaderDisplayed && selectingInitiatesLoad"
         :class="[loaderColor, loaderPosition]"
       />
     </label>
@@ -77,27 +84,47 @@ export default {
       checkValue: Boolean,
     };
   },
-  created(){
-    if(Array.isArray(this.selectedValues)){
-      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
+  created() {
+    if (Array.isArray(this.selectedValues)) {
+      this.checkValue = this.isMultiSelect
+        ? this.selectedValues.includes(this.value)
+        : this.selectedValues[0];
     }
   },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
-    handleClick(value) {
-      if(this.selectingInitiatesLoad) {
-        this.displayLoader();
+    handleInputChange() {
+        if(!this.selectingInitiatesLoad) {
+          this.handleCheckChange();
+        }
+    },
+    handleKeyupArrow() {
+      if (this.isMultiSelect) {
+        return; // Prevent arrow keys from doing anything if element is a checkbox
+      }
+
+      if(!this.selectingInitiatesLoad) {
         this.handleCheckChange();
       }
-      this.handleChange(value);
+      this.handleChange(this.value);
     },
-    handleCheckChange(newValue, oldValue){
-      const isInitialization = typeof(oldValue) === 'function';
-      if (!isInitialization) {
-        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
+    triggerButton() {
+      if(this.selectingInitiatesLoad) {
+        this.displayLoader();
+          this.handleCheckChange();
       }
+      this.handleChange(this.value);
+    },
+    handleCheckChange() {
+      const emitEvent = {
+        checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
+        value: this.value.toString(),
+        buttonId: this.buttonID && this.buttonID.toString(),
+      };
+      this.$emit("isCheckedChanged", emitEvent);
+      this.$emit("update:modelValue", emitEvent);
     }
   },
   components: {
@@ -105,6 +132,7 @@ export default {
   },
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
+
     const fieldOptions = {
       type: inputType,
       checkedValue: props.value,
@@ -118,13 +146,11 @@ export default {
     }
 
     const {
-      checked,
       handleChange,
       errors,
     } = useField(props.groupName, props.validationRules, fieldOptions);
 
     return {
-      checked,
       handleChange,
       errors,
       fieldOptions, // only need to expose this for unit test purposes

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

@@ -2,8 +2,12 @@
   <div
     class="list-group list-button d-flex flex-column w-100 mb-2"
     :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
-    @mouseup="handleClick(value)"
-    @keyup.space="handleClick(value)"
+    @mouseup="triggerButton()"
+    @keyup.space="triggerButton()"
+    @keyup.up="handleKeyupArrow()"
+    @keyup.down="handleKeyupArrow()"
+    @keyup.left="handleKeyupArrow()"
+    @keyup.right="handleKeyupArrow()"
   >
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -12,7 +16,7 @@
       :value="value"
       :aria-required="isRequired"
       v-model="checkValue"
-      @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
+      @change="handleInputChange()"
     >
     <label
       tabindex="-1"
@@ -40,7 +44,7 @@
         {{ screenReaderOnlyText }}
       </span>
       <loader
-        v-if="isLoaderDisplayed && !isMultiSelect"
+        v-if="isLoaderDisplayed && selectingInitiatesLoad"
         :class="[this.loaderColor, this.loaderPosition]"
       />
     </label>
@@ -80,33 +84,47 @@ export default {
       checkValue: Boolean,
     };
   },
-  created(){
-    if(Array.isArray(this.selectedValues)){
-      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
+  created() {
+    if (Array.isArray(this.selectedValues)) {
+      this.checkValue = this.isMultiSelect
+        ? this.selectedValues.includes(this.value)
+        : this.selectedValues[0];
     }
   },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
-    handleClick(value) {
+    handleInputChange() {
+        if(!this.selectingInitiatesLoad) {
+          this.handleCheckChange();
+        }
+    },
+    handleKeyupArrow() {
+      if (this.isMultiSelect) {
+        return; // Prevent arrow keys from doing anything if element is a checkbox
+      }
+
+      if(!this.selectingInitiatesLoad) {
+        this.handleCheckChange();
+      }
+      this.handleChange(this.value);
+    },
+    triggerButton() {
       if(this.selectingInitiatesLoad) {
         this.displayLoader();
         this.handleCheckChange();
       }
-      this.handleChange(value);
+      this.handleChange(this.value);
     },
-    handleCheckChange(value, oldValue){
-      const isInitialization = typeof(oldValue) === 'function';
-      if (!isInitialization) {
-        const emitEvent = {
-          checkValue: this.checkValue,
-          value: this.value.toString(),
-          buttonId: this.buttonID.toString(),
-        };
-        this.$emit('isCheckedChanged', emitEvent);
-        this.$emit("update:modelValue", emitEvent);
-      }
+    handleCheckChange() {
+      const emitEvent = {
+        checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
+        value: this.value.toString(),
+        buttonId: this.buttonID && this.buttonID.toString(),
+      };
+      this.$emit("isCheckedChanged", emitEvent);
+      this.$emit("update:modelValue", emitEvent);
     },
   },
   components: {
@@ -128,13 +146,11 @@ export default {
     }
 
     const {
-      checked,
       handleChange,
       errors,
     } = useField(props.groupName, props.validationRules, fieldOptions);
 
     return {
-      checked,
       handleChange,
       errors,
       fieldOptions, // only need to expose this for unit test purposes

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

@@ -6,8 +6,12 @@
         isWide ? 'horizontal' : '',
         (errors.length > 0 || hasError) ? 'has-error' : '',
       ]"
-      @mouseup="handleChange(value)"
-      @keyup.space="handleChange(value)"
+      @mouseup="triggerButton()"
+      @keyup.space="triggerButton()"
+      @keyup.up="handleKeyupArrow()"
+      @keyup.down="handleKeyupArrow()"
+      @keyup.left="handleKeyupArrow()"
+      @keyup.right="handleKeyupArrow()"
     >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -16,13 +20,14 @@
         :value="value"
         :aria-required="isRequired"
         v-model="checkValue"
-        @change="handleCheckChange(value)"
+        @change="handleInputChange()"
       />
       <label
+        tabindex="-1"
         :for="buttonID"
+        :aria-labelledby="buttonID"
         class="d-flex w-100 align-items-center px-2 h-100"
         :class="getLabelClasses"
-        tabindex="-1"
       >
         <img
           :id="buttonImageId"
@@ -93,15 +98,6 @@ export default {
         : this.selectedValues[0];
     }
   },
-  watch: {
-    // Changing this will impact pre-selection data loads on vehicle-parts.
-    // If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
-    modelValue(newVal) {
-      if (newVal !== undefined) {
-        this.checkValue = newVal.value;
-      }
-    },
-  },
   computed: {
     getLabelClasses() {
       if (this.isWide) {
@@ -116,16 +112,44 @@ export default {
     },
   },
   methods: {
-    handleCheckChange(newValue, oldValue) {
-      const isInitialization = typeof oldValue === "function";
-      if (!isInitialization) {
-        const emitEvent = {
-          checkValue: this.checkValue,
-          value: this.value.toString(),
-          buttonId: this.buttonID.toString(),
-        };
-        this.$emit("isCheckedChanged", emitEvent);
-        this.$emit("update:modelValue", emitEvent);
+    handleInputChange() {
+        if(!this.selectingInitiatesLoad) {
+          this.handleCheckChange();
+        }
+    },
+    handleKeyupArrow() {
+      if (this.isMultiSelect) {
+        return; // Prevent arrow keys from doing anything if element is a checkbox
+      }
+
+      if(!this.selectingInitiatesLoad) {
+        this.handleCheckChange();
+      }
+      this.handleChange(this.value);
+    },
+    triggerButton() {
+      if(this.selectingInitiatesLoad) {
+        this.displayLoader();
+        this.handleCheckChange();
+      }
+      this.handleChange(this.value);
+    },
+    handleCheckChange() {
+      const emitEvent = {
+        checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
+        value: this.value.toString(),
+        buttonId: this.buttonID && this.buttonID.toString(),
+      };
+      this.$emit("isCheckedChanged", emitEvent);
+      this.$emit("update:modelValue", emitEvent);
+    },
+  },
+  watch: {
+    // Changing this will impact pre-selection data loads on vehicle-parts.
+    // If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
+    modelValue(newVal) {
+      if (newVal !== undefined) {
+        this.checkValue = newVal.value;
       }
     },
   },

src/ux-components/radio/radio.vue

@@ -56,19 +56,15 @@ export default {
     handleClick(value) {
       this.handleChange(value);
     },
-    handleCheckChange(newValue, oldValue) {
-      const isInitialization = typeof oldValue === "function";
-      if (!isInitialization) {
+    handleCheckChange() {
+      const emitEvent = {
+        checkValue: this.checkValue,
+        value: this.value.toString(),
+        buttonID: this.buttonID && this.buttonID.toString(),
+      };
 
-        const emitEvent = {
-          checkValue: this.checkValue,
-          value: this.value.toString(),
-          buttonID: this.buttonID.toString(),
-        };
-
-        this.$emit("isCheckedChanged", emitEvent);
-        this.$emit("update:modelValue", emitEvent);
-      }
+      this.$emit("isCheckedChanged", emitEvent);
+      this.$emit("update:modelValue", emitEvent);
     },
   },
   setup(props) {