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

CSR-437 accessibility fix

Browse source 
Add tabindex to span so that screenreader reads copy.
Add aria-label to list-button so that screenreader reads proper information.
This commit is contained in:
Bryan Mauger 2022-08-05 10:39:17 -04:00
parent 714f863d98
commit 7f81ce0824
2 changed files with 3 additions and 2 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

@ -2,7 +2,7 @@
<template> <template>
<div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'"> <div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex"> <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
<span class="fw-bold w-100">{{ questionText }}</span> <span class="fw-bold w-100" tabindex="0">{{ questionText }}</span>
</div> </div>
<div class="w-100 d-flex justify-content-center"> <div class="w-100 d-flex justify-content-center">
<fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="formattedGroupName"> <fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="formattedGroupName">
@ -38,7 +38,7 @@
:class="[suppressError ? 'alertError' : '']" :class="[suppressError ? 'alertError' : '']"
:valueToLogType="valueToLogType" :valueToLogType="valueToLogType"
/> />
<!-- For nested questions --> <!-- For nested questions -->
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name"> <div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
<slot></slot> <slot></slot>

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

@ -16,6 +16,7 @@
:aria-required="isRequired" :aria-required="isRequired"
v-model="checkValue" v-model="checkValue"
@change="handleInputChange" @change="handleInputChange"
:aria-label="value"
> >
<label <label
tabindex="-1" tabindex="-1"