Accessibility for RadioButton
parent
a0e4b8d886
commit
4b8162a341
|
@ -11,6 +11,12 @@ const RadioButtonProps = [
|
|||
default: "null",
|
||||
description: "Value binding of the checkbox."
|
||||
},
|
||||
{
|
||||
name: "tabindex",
|
||||
type: "number",
|
||||
default: "null",
|
||||
description: "Index of the element in tabbing order."
|
||||
},
|
||||
{
|
||||
name: "class",
|
||||
type: "string",
|
||||
|
|
|
@ -9,6 +9,10 @@ export interface RadioButtonProps {
|
|||
* Value binding of the checkbox.
|
||||
*/
|
||||
modelValue?: any;
|
||||
/**
|
||||
* Index of the element in tabbing order.
|
||||
*/
|
||||
tabindex?: number;
|
||||
/**
|
||||
* Style class of the component input field.
|
||||
*/
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div :class="containerClass" @click="onClick($event)" :style="style">
|
||||
<div class="p-hidden-accessible">
|
||||
<input ref="input" type="radio" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus" @blur="onBlur">
|
||||
<input ref="input" type="radio" :checked="checked" :value="value" v-bind="$attrs" :tabindex="tabindex" @focus="onFocus" @blur="onBlur">
|
||||
</div>
|
||||
<div ref="box" :class="['p-radiobutton-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
|
||||
<div ref="box" :class="['p-radiobutton-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
|
||||
<div class="p-radiobutton-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -19,6 +19,7 @@ export default {
|
|||
props: {
|
||||
value: null,
|
||||
modelValue: null,
|
||||
tabindex: null,
|
||||
class: null,
|
||||
style: null
|
||||
},
|
||||
|
@ -51,7 +52,12 @@ export default {
|
|||
return this.modelValue != null && ObjectUtils.equals(this.modelValue, this.value);
|
||||
},
|
||||
containerClass() {
|
||||
return ['p-radiobutton p-component', this.class, {'p-radiobutton-checked': this.checked, 'p-radiobutton-disabled': this.$attrs.disabled, 'p-radiobutton-focused': this.focused}];
|
||||
return [
|
||||
'p-radiobutton p-component', this.class, {
|
||||
'p-radiobutton-checked': this.checked,
|
||||
'p-radiobutton-disabled': this.$attrs.disabled,
|
||||
'p-radiobutton-focused': this.focused
|
||||
}];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
||||
<RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
||||
<RadioButton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
||||
<label :for="category.key">{{category.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -131,15 +131,68 @@ export default {
|
|||
<tr>
|
||||
<td>p-radiobutton-icon</td>
|
||||
<td>Icon element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-radiobutton-label</td>
|
||||
<td>Label element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Accessibility</h5>
|
||||
<DevelopmentSection>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>RadioButton component uses a hidden native radio button 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>
|
||||
<label for="rb1">One</label>
|
||||
<RadioButton id="rb1" />
|
||||
|
||||
<span id="rb2">Two</span>
|
||||
<RadioButton aria-labelledby="rb2" />
|
||||
|
||||
<RadioButton aria-label="Three" />
|
||||
|
||||
</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 checked radio button, if there is none within the group then first radio button receives the focus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="inline-flex flex-column">
|
||||
<i class="mb-1">left arrow</i>
|
||||
<i>up arrow</i>
|
||||
</span>
|
||||
</td>
|
||||
<td>Moves focus to the previous radio button, if there is none then last radio button receives the focus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="inline-flex flex-column">
|
||||
<i class="mb-1">right arrow</i>
|
||||
<i>down arrow</i>
|
||||
</span>
|
||||
</td>
|
||||
<td>Moves focus to the next radio button, if there is none then first radio button receives the focus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>space</i></td>
|
||||
<td>If the focused radio button is unchecked, changes the state to checked.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DevelopmentSection>
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</AppDoc>
|
||||
|
@ -175,7 +228,7 @@ export default {
|
|||
|
||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
||||
<RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
||||
<RadioButton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
||||
<label :for="category.key">{{category.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -227,7 +280,7 @@ export default {
|
|||
|
||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
||||
<RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
||||
<RadioButton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
||||
<label :for="category.key">{{category.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -277,7 +330,7 @@ export default {
|
|||
|
||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
||||
<p-radiobutton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'"></p-radiobutton>
|
||||
<p-radiobutton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'"></p-radiobutton>
|
||||
<label :for="category.key">{{category.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue