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

Remove role from label. Update unit test.

Browse source
This commit is contained in:
bmauger 2021-12-15 13:32:10 -05:00
parent 99b108b25f
commit 6d7f6fa1ab
4 changed files with 4 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -31,7 +31,6 @@ describe("list-button.vue", () => {
}); });
expect(label.attributes()).toEqual({ expect(label.attributes()).toEqual({
role: "radio",
tabindex: "-1", tabindex: "-1",
for: "2023", for: "2023",
class: "d-flex flex-column justify-content-center py-3 px-4 last-item", class: "d-flex flex-column justify-content-center py-3 px-4 last-item",

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

@ -3,7 +3,7 @@
<!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. --> <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
<div v-if="isCheckbox" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"> <div v-if="isCheckbox" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired"> <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
<label role="checkbox" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton"> <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span> <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span> <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span> <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@ -12,7 +12,7 @@
</div> </div>
<div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2"> <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/> <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
<label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()"> <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span> <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span> <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span> <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>

1
src/ux-components/list-button/list-button.spec.js
View file

@ -31,7 +31,6 @@ describe("list-button.vue", () => {
}); });
expect(label.attributes()).toEqual({ expect(label.attributes()).toEqual({
role: "radio",
tabindex: "-1", tabindex: "-1",
for: "2023", for: "2023",
class: "d-flex flex-column justify-content-center py-3 px-4", class: "d-flex flex-column justify-content-center py-3 px-4",

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

@ -2,7 +2,7 @@
<!-- See the component-test.vue page for example implementation --> <!-- See the component-test.vue page for example implementation -->
<div v-if="isCheckbox" class="list-group list-button d-flex flex-column w-100 mb-2"> <div v-if="isCheckbox" class="list-group list-button d-flex flex-column w-100 mb-2">
<input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired"> <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
<label role="checkbox" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4"> <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span> <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span> <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span> <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
@ -11,7 +11,7 @@
</div> </div>
<div v-else class="list-group list-button d-flex flex-column w-100 mb-2"> <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
<input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()"> <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
<label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()"> <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
<span class="m-0" :class="[this.textPosition]">{{buttonID}}</span> <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span> <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span> <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>