jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Adding new class for sr-only and adjusting spacing on radio question
This commit is contained in:
max-dempsey 2021-12-10 11:06:40 -05:00 committed by GitHub
commit a9d8143fe1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common-components/radio-question/radio-question.vue
View file

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

8
src/layouts/component-test/component-test.vue
View file

@ -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

1
src/styles/common-radio-styles.scss
View file

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

9
src/styles/common-styles.scss
View file

@ -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

2
src/ux-components/radio-horizontal/radio-horizontal.vue
View file

@ -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>

2
src/ux-components/radio/radio.vue
View file

@ -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>