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

CSR-612 Use role='application' to fix issue in JAWS

Browse source
This commit is contained in:
Katie 2022-07-13 16:28:22 -04:00
parent 8aa1de12c7
commit d1e9d81242
2 changed files with 8 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@
<legend class="sr-only" :data-focus-target="formattedGroupName" :id="formattedGroupName" tabindex="-1"> <legend class="sr-only" :data-focus-target="formattedGroupName" :id="formattedGroupName" tabindex="-1">
{{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }} {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
</legend> </legend>
<div :class="getComponentLoopWrapperClasses"> <div :class="getComponentLoopWrapperClasses" role="application">
<div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer"> <div :class="getComponentWrapperClasses" v-for="answer in answers" :key="answer.Name ? answer.Name : answer">
<component <component
:is="buttonType" :is="buttonType"

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

@ -2,11 +2,11 @@
<div <div
class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2" class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
@keyup.space="triggerButton()" @keyup.space="triggerButton"
@keyup.up="handleKeyupArrow()" @keyup.up="handleKeyupArrow"
@keyup.down="handleKeyupArrow()" @keyup.down="handleKeyupArrow"
@keyup.left="handleKeyupArrow()" @keyup.left="handleKeyupArrow"
@keyup.right="handleKeyupArrow()"> @keyup.right="handleKeyupArrow">
<input <input
:type="isMultiSelect ? 'checkbox' : 'radio'" :type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID" :id="buttonID"
@ -14,14 +14,14 @@
:value="value" :value="value"
:aria-required="isRequired" :aria-required="isRequired"
v-model="checkValue" v-model="checkValue"
@change="handleInputChange()" @change="handleInputChange"
> >
<label <label
tabindex="-1" tabindex="-1"
:for="buttonID" :for="buttonID"
:aria-labelledby="buttonID" :aria-labelledby="buttonID"
class="d-flex flex-column justify-content-center py-3 px-4" class="d-flex flex-column justify-content-center py-3 px-4"
@mouseup="triggerButton()" @mouseup="triggerButton"
> >
<span <span
class="m-0" class="m-0"
@ -106,25 +106,16 @@ export default {
this.isLoaderDisplayed = true; this.isLoaderDisplayed = true;
}, },
handleInputChange() { handleInputChange() {
console.log("A")
if(!this.selectingInitiatesLoad) { if(!this.selectingInitiatesLoad) {
// this.triggerButton();
this.handleCheckChange(); this.handleCheckChange();
} }
// else {
// this.handleCheckChange();
// }
}, },
handleKeyupArrow() { handleKeyupArrow() {
console.log("B")
if (this.isMultiSelect) { if (this.isMultiSelect) {
return; // Prevent arrow keys from doing anything if element is a checkbox return; // Prevent arrow keys from doing anything if element is a checkbox
} }
this.handleInputChange();
}, },
triggerButton() { triggerButton() {
console.log("C")
if(this.selectingInitiatesLoad) { if(this.selectingInitiatesLoad) {
this.displayLoader(); this.displayLoader();
this.handleCheckChange(); this.handleCheckChange();