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

Merge pull request #2719 from tugcekucukoglu/accessibility-radiobutton 

Accessibility for RadioButton
pull/2734/head
Tuğçe Küçükoğlu 2022-06-29 16:48:38 +03:00 committed by GitHub
parent 1d3ad96a34 4884a5a825
commit f2bb9dd252
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/radiobutton/RadioButton.vue
View File

@ -3,7 +3,7 @@
<div class="p-hidden-accessible">
<input ref="input" type="radio" :checked="checked" :value="value" v-bind="$attrs" @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>
@ -51,7 +51,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
}];
}
}
}

2
src/views/radiobutton/RadioButtonDemo.vue
View File

@ -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>

67
src/views/radiobutton/RadioButtonDoc.vue
View File

@ -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>
&lt;label for="rb1"&gt;One&lt;/label&gt;
&lt;RadioButton id="rb1" /&gt;
&lt;span id="rb2"&gt;Two&lt;/span&gt;
&lt;RadioButton aria-labelledby="rb2" /&gt;
&lt;RadioButton aria-label="Three" /&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 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>