Update Accessibility for Checkbox
parent
e46ef630d3
commit
c63ed6850b
|
@ -1,7 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="containerClass" @click="onClick($event)">
|
<div :class="containerClass" @click="onClick($event)">
|
||||||
<div class="p-hidden-accessible">
|
<div class="p-hidden-accessible">
|
||||||
<input :id="inputId" ref="input" type="checkbox" :value="value" :checked="checked" :disabled="disabled" @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
|
<input :id="inputId" ref="input" type="checkbox" :value="value" :checked="checked" :tabindex="tabindex" :disabled="disabled" :readonly="readonly" :required="required" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
|
||||||
|
@focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
|
||||||
</div>
|
</div>
|
||||||
<div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
|
<div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
|
||||||
<span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
|
<span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
|
||||||
|
@ -31,8 +32,28 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
required: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
inputId: null,
|
inputId: null,
|
||||||
inputProps: null
|
inputProps: null,
|
||||||
|
tabindex: {
|
||||||
|
type: Number,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
'aria-labelledby': {
|
||||||
|
type: String,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
'aria-label': {
|
||||||
|
type: String,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
Loading…
Reference in New Issue