From a5e89a81f902c457c4580bd4700e8e8a4df0a2d8 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 10 Dec 2021 10:54:24 -0500
Subject: [PATCH 1/2] Adding new class for sr-only and adjusting spacing on
 radio question

---
 src/common-components/radio-question/radio-question.vue | 4 ++--
 src/layouts/component-test/component-test.vue           | 8 ++++----
 src/styles/common-radio-styles.scss                     | 1 -
 src/styles/common-styles.scss                           | 9 +++++++++
 src/ux-components/radio-horizontal/radio-horizontal.vue | 2 +-
 src/ux-components/radio/radio.vue                       | 2 +-
 6 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index 3621c636b..bdb15c7d5 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="radio_question">
-    <div class="needed_car_info mt-5 mb-2 d-flex">
+    <div class="needed_car_info mt-5 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
         questionText
       }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
-        <legend class="visually-hidden">{{groupName}}</legend>
+        <legend class="sr-only">{{groupName}}</legend>
           <radio v-for="answer in answers" :key="answer"
             :radioID="answer"
             @click="chooseAnswer(answer)"
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index f8babdf75..f8d5006ef 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -76,7 +76,7 @@
         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-1-radio-group">
+        <h3 class="sr-only" id="demo-1-radio-group">
           Select Vehicle Year
         </h3>
         <radio
@@ -127,7 +127,7 @@
         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-2-radio-group">
+        <h3 class="sr-only" id="demo-2-radio-group">
           Select Vehicle Year
         </h3>
         <radio
@@ -178,7 +178,7 @@
         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-3-radio-group">
+        <h3 class="sr-only" id="demo-3-radio-group">
           Multi-Line Centered
         </h3>
         <radio
@@ -229,7 +229,7 @@
         class="d-flex flex-row p-0"
       >
         <!-- 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">
+        <h3 class="sr-only" id="demo-4-radio-group">
           Select Vehicle Year
         </h3>
         <radioHorizontal
diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-radio-styles.scss
index 4ea1da553..2bee198bf 100644
--- a/src/styles/common-radio-styles.scss
+++ b/src/styles/common-radio-styles.scss
@@ -4,7 +4,6 @@
       opacity: 0;
       position: fixed;
       width: 0;
-      -webkit-tap-highlight-color: rgba(0,0,0,0);
       &:focus-visible + label {
         box-shadow: 0 0 0 2px $blue;
       }
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 768dd8d6f..5e1993716 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -25,5 +25,14 @@ body {
   .container-fluid {
     overflow-x: hidden;
   }
+
+  .sr-only {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
 }
 // Hide horizontal scrollbar
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.vue b/src/ux-components/radio-horizontal/radio-horizontal.vue
index d52678ac0..9f04efe04 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/src/ux-components/radio-horizontal/radio-horizontal.vue
@@ -6,7 +6,7 @@
     <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>
-      <span v-if="screenReaderOnlyText" class="visually-hidden">{{screenReaderOnlyText}}</span>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
       <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
     </label>
     <p class="small">{{ errorMessage }}</p>
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index d38dcab37..1275eb8b1 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -5,7 +5,7 @@
     <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 v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="visually-hidden">{{screenReaderOnlyText}}</span>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
     <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
   </label>
   <p class="small">{{errorMessage}}</p>

From 5f14238eacb8b580183dfb5a550626fe4047e52e Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 10 Dec 2021 10:59:24 -0500
Subject: [PATCH 2/2] Adjusting margin between radio question and page title

---
 src/common-components/radio-question/radio-question.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index bdb15c7d5..36f130e9f 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="radio_question">
-    <div class="needed_car_info mt-5 mb-4 d-flex">
+    <div class="needed_car_info mt-6 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
         questionText
       }}</span>