From 5df8ea97149cabf8a524fa43e52ae4749b7ecca8 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 21 Jan 2022 13:41:07 -0500
Subject: [PATCH] Accounting for radio buttons triggering click even on arrow
 key press

---
 .../list-button-horizontal/list-button-horizontal.vue         | 4 ++--
 src/ux-components/list-button/list-button.vue                 | 4 ++--
 src/ux-components/list-card/list-card.vue                     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 9bdeee4b8..d03a042d7 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
+  <div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
     <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <span class="m-0" :class="textPosition">{{buttonLabel}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 912403025..5fa285c31 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="list-group list-button d-flex flex-column w-100 mb-2">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName">
+  <div class="list-group list-button d-flex flex-column w-100 mb-2" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName">
     <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <span class="m-0" :class="textPosition">{{ buttonLabel }}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 4e9988446..17c8193f0 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- Heavily documented below -->
   <div class="col">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''">
-      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleChange(value)" :data-focus-target="groupName" />
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
+      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
       <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
         <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
         <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>