vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Accessibility for Checkbox

pull/2718/head
Tuğçe Küçükoğlu 2022-06-27 13:55:41 +03:00
parent 7bc41a4639
commit 3b8460df99
5 changed files with 74 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/checkbox.js
View File

@ -17,6 +17,12 @@ const CheckboxProps = [
default: "false",
description: "Allows to select a boolean value instead of multiple values."
},
{
name: "tabindex",
type: "number",
default: "null",
description: "Index of the element in tabbing order."
},
{
name: "class",
type: "string",

4
src/components/checkbox/Checkbox.d.ts vendored
View File

@ -13,6 +13,10 @@ export interface CheckboxProps {
* Allows to select a boolean value instead of multiple values.
*/
binary?: boolean;
/**
* Index of the element in tabbing order.
*/
tabindex?: number;
/**
* Style class of the component input field.
*/

19
src/components/checkbox/Checkbox.vue
View File

@ -1,9 +1,9 @@
<template>
<div :class="containerClass" @click="onClick($event)" :style="style">
<div class="p-hidden-accessible">
<input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus" @blur="onBlur">
<div :class="containerClass" @click="onClick($event)" :style="style">
<div class="p-hidden-accessible">
<input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" :aria-checked="checked" :tabindex="tabindex" @focus="onFocus" @blur="onBlur">
</div>
<div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="checked">
<div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
<span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
</div>
</div>
@ -22,6 +22,10 @@ export default {
binary: Boolean,
class: null,
style: null,
tabindex: {
type: Number,
default: null
},
trueValue: {
type: null,
default: true
@ -70,7 +74,12 @@ export default {
return this.binary ? this.modelValue === this.trueValue : ObjectUtils.contains(this.value, this.modelValue);
},
containerClass() {
return ['p-checkbox p-component', this.class, {'p-checkbox-checked': this.checked, 'p-checkbox-disabled': this.$attrs.disabled, 'p-checkbox-focused': this.focused}];
return [
'p-checkbox p-component', this.class, {
'p-checkbox-checked': this.checked,
'p-checkbox-disabled': this.$attrs.disabled,
'p-checkbox-focused': this.focused
}];
}
}
}

4
src/views/checkbox/CheckboxDemo.vue
View File

@ -13,7 +13,7 @@
<h5>Basic</h5>
<div class="field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label>
<label for="binary">Remember Me</label>
</div>
<h5>Multiple</h5>
@ -36,7 +36,7 @@
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<Checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label>
</div>
</div>

51
src/views/checkbox/CheckboxDoc.vue
View File

@ -75,6 +75,12 @@ export default {
<td>false</td>
<td>Allows to select a boolean value instead of multiple values.</td>
</tr>
<tr>
<td>tabindex</td>
<td>number</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>style</td>
<td>any</td>
@ -161,6 +167,45 @@ export default {
</table>
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
<pre v-code><code>
&lt;label for="chkbox1"&gt;Remember Me&lt;/label&gt;
&lt;Checkbox id="chkbox1" /&gt;
&lt;span id="chkbox2"&gt;Remember Me&lt;/span&gt;
&lt;Checkbox aria-labelledby="chkbox2" /&gt;
&lt;Checkbox aria-label="Remember Me" /&gt;
</code></pre>
<h6>Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the checkbox.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Toggles the checked state.</td>
</tr>
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
@ -202,7 +247,7 @@ export default {
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<Checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label>
</div>
</div>
@ -255,7 +300,7 @@ export default {
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<Checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label>
</div>
</div>
@ -310,7 +355,7 @@ export default {
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="field-checkbox">
<p-checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox>
<p-checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox>
<label :for="category.key">{{category.name}}</label>
</div>
</div>