Merge pull request #90 from Safelite/feature/CSR-74_testing-changes

Adding new class for sr-only and adjusting spacing on radio question

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-6 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)"

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

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;
       }

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

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>

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>