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

Merge pull request #120 from Safelite/feature/CSR-174

Browse source 
Feature/CSR-174
This commit is contained in:
bmauger 2022-01-03 09:44:41 -05:00 committed by GitHub
commit 7de8be9bf2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 32 additions and 31 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

@ -20,7 +20,7 @@
textPosition="text-start" textPosition="text-start"
:isRequired="true" :isRequired="true"
:value="modelValue" :value="modelValue"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
</fieldset> </fieldset>
</div> </div>

2
src/common-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -8,6 +8,7 @@
<buttonBack <buttonBack
v-if="hasBackButton" v-if="hasBackButton"
:backButtonAction="backButtonAction" :backButtonAction="backButtonAction"
:backButtonAccessibleText="backButtonAccessibleText"
/> />
</h5> </h5>
</div> </div>
@ -22,7 +23,6 @@ export default {
props: { props: {
text: String, text: String,
hasBackButton: Boolean, hasBackButton: Boolean,
backButtonUrl: String,
backButtonAccessibleText: String, backButtonAccessibleText: String,
backButtonAction: Function, backButtonAction: Function,
}, },

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

@ -40,7 +40,6 @@
<div class="row"> <div class="row">
<div class="col my-3 d-flex align-items-center"> <div class="col my-3 d-flex align-items-center">
<buttonBack <buttonBack
backButtonUrl="#"
backButtonAccessibleText="Back button label" backButtonAccessibleText="Back button label"
/> />
</div> </div>
@ -227,7 +226,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
hasError hasError
errorMessage="Error" errorMessage="Error"
/> />
@ -241,7 +240,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButton <listButton
isMultiSelect isMultiSelect
@ -253,7 +252,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
</div> </div>
</div> </div>
@ -272,7 +271,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButton <listButton
groupName="demo-1-checkbox" groupName="demo-1-checkbox"
@ -283,7 +282,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButton <listButton
groupName="demo-1-checkbox" groupName="demo-1-checkbox"
@ -294,7 +293,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
</div> </div>
</div> </div>
@ -319,7 +318,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButton <listButton
isMultiSelect isMultiSelect
@ -331,7 +330,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButton <listButton
isMultiSelect isMultiSelect
@ -343,7 +342,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
</div> </div>
</div> </div>
@ -362,7 +361,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButton <listButton
groupName="demo-2-checkbox" groupName="demo-2-checkbox"
@ -373,7 +372,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButton <listButton
groupName="demo-2-checkbox" groupName="demo-2-checkbox"
@ -384,7 +383,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
</div> </div>
</div> </div>
@ -409,7 +408,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButton <listButton
isMultiSelect isMultiSelect
@ -421,7 +420,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButton <listButton
isMultiSelect isMultiSelect
@ -433,7 +432,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
</div> </div>
</div> </div>
@ -452,7 +451,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButton <listButton
groupName="demo-3-checkbox" groupName="demo-3-checkbox"
@ -463,7 +462,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButton <listButton
groupName="demo-3-checkbox" groupName="demo-3-checkbox"
@ -474,7 +473,7 @@
loaderColor="blue" loaderColor="blue"
loaderPosition="right" loaderPosition="right"
sizeInRem="1" sizeInRem="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
</div> </div>
</div> </div>
@ -503,7 +502,7 @@
sizeInRem="1" sizeInRem="1"
v-bind:totalInGroup="3" v-bind:totalInGroup="3"
v-bind:positionInGroup="1" v-bind:positionInGroup="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButtonHorizontal <listButtonHorizontal
isMultiSelect isMultiSelect
@ -517,7 +516,7 @@
sizeInRem="1" sizeInRem="1"
v-bind:totalInGroup="3" v-bind:totalInGroup="3"
v-bind:positionInGroup="2" v-bind:positionInGroup="2"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButtonHorizontal <listButtonHorizontal
isMultiSelect isMultiSelect
@ -531,7 +530,7 @@
sizeInRem="1" sizeInRem="1"
v-bind:totalInGroup="3" v-bind:totalInGroup="3"
v-bind:positionInGroup="3" v-bind:positionInGroup="3"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
</div> </div>
</div> </div>
@ -554,7 +553,7 @@
sizeInRem="1" sizeInRem="1"
v-bind:totalInGroup="3" v-bind:totalInGroup="3"
v-bind:positionInGroup="1" v-bind:positionInGroup="1"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButtonHorizontal <listButtonHorizontal
groupName="demo-4-checkbox" groupName="demo-4-checkbox"
@ -567,7 +566,7 @@
sizeInRem="1" sizeInRem="1"
v-bind:totalInGroup="3" v-bind:totalInGroup="3"
v-bind:positionInGroup="2" v-bind:positionInGroup="2"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
<listButtonHorizontal <listButtonHorizontal
groupName="demo-4-checkbox" groupName="demo-4-checkbox"
@ -580,7 +579,7 @@
sizeInRem="1" sizeInRem="1"
v-bind:totalInGroup="3" v-bind:totalInGroup="3"
v-bind:positionInGroup="3" v-bind:positionInGroup="3"
screenReaderOnlyText="(opens new window)" screenReaderOnlyText=" opens new window"
/> />
</div> </div>
</div> </div>

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

@ -33,6 +33,7 @@ describe("list-button.vue", () => {
expect(label.attributes()).toEqual({ expect(label.attributes()).toEqual({
tabindex: "-1", tabindex: "-1",
for: "2023", for: "2023",
"aria-labelledby": "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",
"aria-checked": "false", "aria-checked": "false",
}); });

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="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"> <div v-if="isMultiSelect" 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 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" :aria-labelledby="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 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" :aria-labelledby="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

@ -33,6 +33,7 @@ describe("list-button.vue", () => {
expect(label.attributes()).toEqual({ expect(label.attributes()).toEqual({
tabindex: "-1", tabindex: "-1",
for: "2023", for: "2023",
"aria-labelledby": "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",
"aria-checked": "false", "aria-checked": "false",
}); });

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="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2"> <div v-if="isMultiSelect" 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 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" :aria-labelledby="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>
@ -10,7 +10,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 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" :aria-labelledby="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>