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

CSR-459: fixes to error focus direction and error styling

Browse source
This commit is contained in:
Adam Caouette 2022-04-11 17:03:37 -04:00
parent fcc9e448ef
commit ac93b8fc60
6 changed files with 13 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,9 @@
</div>
<div class="w-100 d-flex justify-content-center">
<fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
<legend class="sr-only">{{groupName}}</legend>
<legend class="sr-only" :data-focus-target="groupName" tabindex="-1">
{{(isMultiSelect && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
</legend>
<div :class="getComponentWrapperClasses">
<component
:is="buttonType"

2
src/common-components/textbox-question/textbox-question.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="textbox-question" :class="hasError ? 'has-error' : ''">
<div class="textbox-question" :class="(errors.length > 0 || hasError) ? 'has-error' : ''">
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
<input v-model="value"
v-maska="mask"

10
src/styles/common-error-styles.scss
View file

@ -7,21 +7,11 @@
input[type=radio]:focus + label {
box-shadow: 0 0 0 2.5px $red;
}
input[type=checkbox]:focus + label:hover,
input[type=radio]:focus + label {
box-shadow: 0 0 0 1px $red;
}
&:hover {
box-shadow: 0px 0px 0px 4px $red-200;
border-radius: 10px !important;
border: 1px solid $red;
}
}
input[type=checkbox]:checked + label,
input[type=radio]:checked + label {
box-shadow: 0 0 0 2.5px transparent !important;
}
&.list-button-horizontal {
color: $red;
label {

10
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -1,7 +1,7 @@
<template>
<div
class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
:class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
@mouseup="handleClick(value)"
@keyup.space="handleClick(value)"
>
@ -11,7 +11,6 @@
:name="groupName"
:value="value"
:aria-required="isRequired"
:data-focus-target="groupName"
v-model="checkValue"
@change="!selectingInitiatesLoad ? handleCheckChange() : ''"
/>
@ -143,11 +142,11 @@ export default {
height: 0;
position: absolute;
&:focus-visible + label {
box-shadow: 0 0 0 2px $blue;
box-shadow: 0 0 0 2.5px $blue;
z-index: 2;
}
&:focus + label {
box-shadow: 0 0 0 2px $blue;
box-shadow: 0 0 0 2.5px $blue;
z-index: 3;
}
&:checked + label {
@ -156,6 +155,9 @@ export default {
outline: none;
z-index: 2;
}
&:checked:focus + label {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + label p:first-child {
font-weight: 500;
}

5
src/ux-components/list-button/list-button.vue
View file

@ -1,7 +1,7 @@
<template>
<div
class="list-group list-button d-flex flex-column w-100 mb-2"
:class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
@mouseup="handleClick(value)"
@keyup.space="handleClick(value)"
>
@ -11,7 +11,6 @@
:name="groupName"
:value="value"
:aria-required="isRequired"
:data-focus-target="groupName"
v-model="checkValue"
@change="!selectingInitiatesLoad ? handleCheckChange() : ''"
>
@ -97,7 +96,7 @@ export default {
}
this.handleChange(value);
},
handleCheckChange(newValue, oldValue){
handleCheckChange(value, oldValue){
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
const emitEvent = {

4
src/ux-components/list-card/list-card.vue
View file

@ -4,8 +4,7 @@
class="list-card w-100 rounded-3 d-flex align-items-center h-100"
:class="[
isWide ? 'horizontal' : '',
errors.length > 0 ? 'has-error' : '',
hasError ? 'has-error' : '',
(errors.length > 0 || hasError) ? 'has-error' : '',
]"
@mouseup="handleChange(value)"
@keyup.space="handleChange(value)"
@ -16,7 +15,6 @@
:name="groupName"
:value="value"
:aria-required="isRequired"
:data-focus-target="groupName"
v-model="checkValue"
@change="handleCheckChange(value)"
/>