From 82924a69b977b3a5096807131526bd250d2a769d Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 22 Dec 2021 16:48:39 -0500
Subject: [PATCH 1/6] CSR-174: restore aria-label prop to back button

---
 src/common-components/funnel-sub-header/funnel-sub-header.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 444674440..630dd9cbe 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -8,6 +8,7 @@
         <buttonBack
         v-if="hasBackButton"
         :backButtonAction="backButtonAction"
+        :backButtonAccessibleText="backButtonAccessibleText"
       />
       </h2>
     </div>

From c5ceb36cfd040c342cc94c61b4dbaf5dc70b3aef Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 28 Dec 2021 09:50:58 -0500
Subject: [PATCH 2/6] CSR-174: remove no longer needed prop

---
 src/common-components/funnel-sub-header/funnel-sub-header.vue | 1 -
 src/layouts/component-test/component-test.vue                 | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 630dd9cbe..81c741647 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -23,7 +23,6 @@ export default {
   props: {
     text: String,
     hasBackButton: Boolean,
-    backButtonUrl: String,
     backButtonAccessibleText: String,
     backButtonAction: Function,
   },
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 6c3af4720..e0ef3ecca 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -40,7 +40,6 @@
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonBack
-          backButtonUrl="#"
           backButtonAccessibleText="Back button label"
         />
       </div>

From acb3481e01c559fa0e2af541882936a79491b650 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 30 Dec 2021 13:22:56 -0500
Subject: [PATCH 3/6] CSR-174: add aria-hidden=true to list-button label
 elements to fix jaws bug

---
 .../list-button-horizontal/list-button-horizontal.vue         | 4 ++--
 src/ux-components/list-button/list-button.vue                 | 4 ++--
 2 files changed, 4 insertions(+), 4 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 5df8261ec..88fbf491e 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -3,7 +3,7 @@
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@@ -12,7 +12,7 @@
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
-    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
+    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 6d97cd236..5e8931c61 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -2,7 +2,7 @@
   <!-- See the component-test.vue page for example implementation -->
   <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@@ -10,7 +10,7 @@
   </div>
   <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
-    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
+    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>

From 6f27196c471a41664b8e3a84cafdd04a10f59a68 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 30 Dec 2021 13:25:35 -0500
Subject: [PATCH 4/6] CSR-174: remove unneeded parentheses in sr-only
 list-button text

---
 .../button-question/button-question.vue       |  2 +-
 src/layouts/component-test/component-test.vue | 48 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index d86dcd2ce..9afd36c1f 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -20,7 +20,7 @@
             textPosition="text-start"
             :isRequired="true"
             :value="modelValue"
-            screenReaderOnlyText="(opens new window)"
+            screenReaderOnlyText=" opens new window"
           />
       </fieldset>
     </div>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index f8871f161..bbbf589f7 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -226,7 +226,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         hasError
         errorMessage="Error"
         />
@@ -240,7 +240,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         isMultiSelect
@@ -252,7 +252,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -271,7 +271,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-1-checkbox"
@@ -282,7 +282,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-1-checkbox"
@@ -293,7 +293,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -318,7 +318,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         isMultiSelect
@@ -330,7 +330,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         isMultiSelect
@@ -342,7 +342,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -361,7 +361,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-2-checkbox"
@@ -372,7 +372,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-2-checkbox"
@@ -383,7 +383,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -408,7 +408,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         isMultiSelect
@@ -420,7 +420,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         isMultiSelect
@@ -432,7 +432,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -451,7 +451,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-3-checkbox"
@@ -462,7 +462,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-3-checkbox"
@@ -473,7 +473,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -502,7 +502,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
         isMultiSelect
@@ -516,7 +516,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="2"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
         isMultiSelect
@@ -530,7 +530,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="3"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -553,7 +553,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
         groupName="demo-4-checkbox"
@@ -566,7 +566,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="2"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
         groupName="demo-4-checkbox"
@@ -579,7 +579,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="3"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>

From 4b3d8ba33140d1ada766d62e34b84083159c049d Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 30 Dec 2021 16:32:51 -0500
Subject: [PATCH 5/6] CSR-174: remove aria-hidden / add additional
 aria-describedby instead

---
 .../list-button-horizontal/list-button-horizontal.vue         | 4 ++--
 src/ux-components/list-button/list-button.vue                 | 4 ++--
 2 files changed, 4 insertions(+), 4 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 88fbf491e..7721917c2 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -3,7 +3,7 @@
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@@ -12,7 +12,7 @@
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
-    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 5e8931c61..7697c0042 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -2,7 +2,7 @@
   <!-- See the component-test.vue page for example implementation -->
   <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@@ -10,7 +10,7 @@
   </div>
   <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
-    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
+    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>

From 04fd2d574563389fd6553489e1bb83d2b9ca371d Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 30 Dec 2021 16:38:52 -0500
Subject: [PATCH 6/6] CSR-174: fix unit tests

---
 .../list-button-horizontal/list-button-horizontal.spec.js       | 1 +
 src/ux-components/list-button/list-button.spec.js               | 1 +
 src/ux-components/list-button/list-button.vue                   | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index b7ae7ef49..8d5f3d8b7 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -33,6 +33,7 @@ describe("list-button.vue", () => {
     expect(label.attributes()).toEqual({
       tabindex: "-1",
       for: "2023",
+      "aria-labelledby": "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
       "aria-checked": "false",
     });
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index fbb492222..61f1e7ed9 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -33,6 +33,7 @@ describe("list-button.vue", () => {
     expect(label.attributes()).toEqual({
       tabindex: "-1",
       for: "2023",
+      "aria-labelledby": "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4",
       "aria-checked": "false",
     });
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 7697c0042..0547f0787 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -10,7 +10,7 @@
   </div>
   <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
-    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>