CSR-186 Add radio/checkbox toggle to existing list-buttons.
This commit is contained in:
bmauger
parent
20fbdb588c
commit
db3cd7ea18
4 changed files with 232 additions and 42 deletions
|
|
@ -58,20 +58,18 @@
|
|||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
|
||||
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-labelledby="demo-1-radio-group"
|
||||
class="col my-3 d-flex align-items-center flex-column"
|
||||
>
|
||||
<div role="radiogroup" aria-labelledby="demo-1-radio-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-1-radio-group">
|
||||
Select Vehicle Year
|
||||
</h3>
|
||||
<listButton
|
||||
radioButton
|
||||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2021"
|
||||
|
|
@ -83,6 +81,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
radioButton
|
||||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2020"
|
||||
|
|
@ -94,6 +93,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
radioButton
|
||||
groupName="demo-1"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2019"
|
||||
|
|
@ -106,23 +106,60 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<div role="checkbox" aria-labelledby="demo-1-checkbox-group" class="col my-3 d-flex flex-column">
|
||||
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
|
||||
<listButton
|
||||
groupName="demo-1-checkbox"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2018"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
groupName="demo-1-checkbox"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2017"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
groupName="demo-1-checkbox"
|
||||
ariaLabelBy="vehicle-year"
|
||||
buttonID="2016"
|
||||
isRequired=true
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
|
||||
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-labelledby="demo-2-radio-group"
|
||||
class="col my-3 d-flex align-items-center flex-column"
|
||||
>
|
||||
<div role="radiogroup" aria-labelledby="demo-2-radio-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-2-radio-group">
|
||||
Select Vehicle Year
|
||||
</h3>
|
||||
<h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
|
||||
<listButton
|
||||
radioButton
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Chevrolet"
|
||||
|
|
@ -134,6 +171,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
radioButton
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Dodge"
|
||||
|
|
@ -145,6 +183,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
radioButton
|
||||
groupName="demo-2"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Ford"
|
||||
|
|
@ -157,23 +196,60 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
|
||||
<div role="radiogroup" aria-labelledby="demo-2-checkbox-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-2-checkbox-group">Select Vehicle Year</h3>
|
||||
<listButton
|
||||
groupName="demo-2-checkbox"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Honda"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
groupName="demo-2-checkbox"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Acura"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
groupName="demo-2-checkbox"
|
||||
ariaLabelBy="vehicle-make"
|
||||
buttonID="Infiniti"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-start"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
|
||||
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-labelledby="demo-3-radio-group"
|
||||
class="col my-3 d-flex align-items-center flex-column"
|
||||
>
|
||||
<div role="radiogroup" aria-labelledby="demo-3-radio-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-3-radio-group">
|
||||
Multi-Line Centered
|
||||
</h3>
|
||||
<h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
|
||||
<listButton
|
||||
radioButton
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Corvette"
|
||||
|
|
@ -185,6 +261,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
radioButton
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Testarosa"
|
||||
|
|
@ -196,6 +273,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
radioButton
|
||||
groupName="demo-3"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="S600"
|
||||
|
|
@ -208,23 +286,62 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
|
||||
<div role="radiogroup" aria-labelledby="demo-3-checkbox-group" class="col my-3 d-flex align-items-center flex-column">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-3-checkbox-group">Multi-Line Centered</h3>
|
||||
<listButton
|
||||
groupName="demo-3-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Accord"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
groupName="demo-3-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Civic"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButton
|
||||
groupName="demo-3-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="Ridgeline"
|
||||
buttonLabelSubCopy="Test sub-headline"
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
|
||||
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row px-3">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-labelledby="demo-4-radio-group"
|
||||
class="d-flex flex-row p-0"
|
||||
>
|
||||
<div role="radiogroup" aria-labelledby="demo-4-radio-group" class="d-flex flex-row p-0">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-4-radio-group">
|
||||
Select Vehicle Year
|
||||
</h3>
|
||||
<listButtonHorizontal
|
||||
radioButton
|
||||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="1"
|
||||
|
|
@ -238,6 +355,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
radioButton
|
||||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="2"
|
||||
|
|
@ -251,6 +369,7 @@
|
|||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
radioButton
|
||||
groupName="demo-4"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="3"
|
||||
|
|
@ -265,6 +384,55 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row px-3">
|
||||
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
|
||||
<h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
|
||||
<div role="radiogroup" aria-labelledby="demo-4-checkbox-group" class="d-flex flex-row p-0">
|
||||
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
|
||||
<h3 class="sr-only" id="demo-4-checkbox-group">
|
||||
Select Vehicle Year
|
||||
</h3>
|
||||
<listButtonHorizontal
|
||||
groupName="demo-4-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="4"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="1"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
groupName="demo-4-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="5"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="2"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
<listButtonHorizontal
|
||||
groupName="demo-4-checkbox"
|
||||
ariaLabelBy="vehicle-model"
|
||||
buttonID="6"
|
||||
buttonLabelSubCopy=""
|
||||
textPosition="text-center"
|
||||
loaderColor="blue"
|
||||
loaderPosition="right"
|
||||
sizeInRem="1"
|
||||
v-bind:totalInGroup="3"
|
||||
v-bind:positionInGroup="3"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.list-group {
|
||||
&.list-button {
|
||||
input[type="radio"] {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,25 @@
|
|||
<!-- See the component-test.vue page for example implementation -->
|
||||
<template>
|
||||
<!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
|
||||
<div 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="displayComponent"/>
|
||||
<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='displayComponent'>
|
||||
<div v-if="radioButton" 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()"/>
|
||||
<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()">
|
||||
<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="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
||||
<loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
||||
<loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
||||
</label>
|
||||
<p class="small">{{ errorMessage }}</p>
|
||||
</div>
|
||||
<div v-else 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">
|
||||
<label role="checkbox" 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 v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
||||
</label>
|
||||
<p class="small">{{errorMessage}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -18,6 +27,7 @@ import loader from "@/ux-components/loader/loader";
|
|||
export default {
|
||||
name: "listButtonHorizontal",
|
||||
props: {
|
||||
radioButton: Boolean,
|
||||
groupName: String, /* Required, unique for each button GROUP */
|
||||
buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
|
||||
buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
|
||||
|
|
@ -33,12 +43,12 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
isError: false,
|
||||
display: false,
|
||||
isLoaderDisplayed: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
displayComponent() {
|
||||
this.display = true;
|
||||
displayLoader() {
|
||||
this.isLoaderDisplayed = true;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
@ -59,7 +69,8 @@ export default {
|
|||
</script>
|
||||
<style lang="scss">
|
||||
.list-button-horizontal {
|
||||
input[type="radio"] {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,24 @@
|
|||
<template>
|
||||
<!-- See the component-test.vue page for example implementation -->
|
||||
<div 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="displayComponent()">
|
||||
<label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
|
||||
<div v-if="radioButton" 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()">
|
||||
<label role="radio" 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 v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
||||
<loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
||||
<loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
|
||||
</label>
|
||||
<p class="small">{{errorMessage}}</p>
|
||||
</div>
|
||||
<div v-else 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">
|
||||
<label role="checkbox" 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 v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
|
||||
</label>
|
||||
<p class="small">{{errorMessage}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -17,6 +26,7 @@ import loader from "@/ux-components/loader/loader";
|
|||
export default {
|
||||
name: "listButton",
|
||||
props: {
|
||||
radioButton: Boolean,
|
||||
groupName: String, /* Required, unique for each button GROUP */
|
||||
buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
|
||||
isRequired: Boolean, /* Optional, default is false */
|
||||
|
|
@ -31,12 +41,12 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
isError: false,
|
||||
display: false,
|
||||
isLoaderDisplayed: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
displayComponent() {
|
||||
this.display = true;
|
||||
displayLoader() {
|
||||
this.isLoaderDisplayed = true;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue