From d1e9d812420aae1b0d30bc6d0a99fcdd2b20e762 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Wed, 13 Jul 2022 16:28:22 -0400
Subject: [PATCH] CSR-612 Use role='application' to fix issue in JAWS

---
 .../button-question/button-question.vue       |  2 +-
 src/ux-components/list-button/list-button.vue | 23 ++++++-------------
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 2ea6d1c3a..944811780 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -9,7 +9,7 @@
         <legend class="sr-only" :data-focus-target="formattedGroupName" :id="formattedGroupName" tabindex="-1">
           {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
         </legend>
-        <div :class="getComponentLoopWrapperClasses">
+        <div :class="getComponentLoopWrapperClasses" role="application">
           <div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
             <component
               :is="buttonType"
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 980a82b69..a15675d58 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -2,11 +2,11 @@
   <div
     class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
     :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
-    @keyup.space="triggerButton()"
-    @keyup.up="handleKeyupArrow()"
-    @keyup.down="handleKeyupArrow()"
-    @keyup.left="handleKeyupArrow()"
-    @keyup.right="handleKeyupArrow()">
+    @keyup.space="triggerButton"
+    @keyup.up="handleKeyupArrow"
+    @keyup.down="handleKeyupArrow"
+    @keyup.left="handleKeyupArrow"
+    @keyup.right="handleKeyupArrow">
     <input
       :type="isMultiSelect ? 'checkbox' : 'radio'"
       :id="buttonID"
@@ -14,14 +14,14 @@
       :value="value"
       :aria-required="isRequired"
       v-model="checkValue"
-      @change="handleInputChange()"
+      @change="handleInputChange"
     >
     <label
       tabindex="-1"
       :for="buttonID"
       :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
-      @mouseup="triggerButton()"
+      @mouseup="triggerButton"
     >
       <span
         class="m-0"
@@ -106,25 +106,16 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleInputChange() {
-      console.log("A")
       if(!this.selectingInitiatesLoad) {
-        // this.triggerButton();
         this.handleCheckChange();
       }
-      // else {
-      //   this.handleCheckChange();
-      // }
     },
     handleKeyupArrow() {
-      console.log("B")
       if (this.isMultiSelect) {
         return; // Prevent arrow keys from doing anything if element is a checkbox
       }
-
-      this.handleInputChange();
     },
     triggerButton() {
-      console.log("C")
       if(this.selectingInitiatesLoad) {
         this.displayLoader();
         this.handleCheckChange();