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

Update Rating Accessibility

pull/2817/head
Tuğçe Küçükoğlu 2022-07-29 16:52:08 +03:00
parent c68535196c
commit caa02ebdcc
3 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/config/PrimeVue.js
View File

@ -71,9 +71,8 @@ const defaultOptions = {
trueLabel: 'True',
falseLabel: 'False',
nullLabel: 'Not Selected',
star: 'star',
stars: 'stars',
noneStars: 'No Rating',
star: '1 star',
stars: '{star} stars',
selectAll: 'All items selected',
unselectAll: 'All items unselected',
close: 'Close'

21
src/components/rating/Rating.vue
View File

@ -1,17 +1,16 @@
<template>
<div :class="containerClass">
<span :class="['p-rating-icon p-rating-cancel pi pi-ban', {'p-focus': focusIndex === 0}]" v-if="cancel" @click="onCancelClick" @keydown="onKeyDown">
<span class="p-hidden-accessible" v-if="cancel">
<label :for="labelFor(0)">{{labelText(0)}}</label>
<input type="radio" :id="labelFor(0)" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" @focus="onFocus($event, 0)" @blur="onBlur" @keydown="onKeyDown($event, 0)">
<input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="$primevue.config.locale.clear" @focus="onFocus($event, 0)" @blur="onBlur" @keydown="onKeyDown($event, 0)">
</span>
</span>
<span :class="['p-rating-icon p-rating-cancel pi pi-ban', {'p-focus': focusIndex === 0}]" v-if="cancel" @click="onCancelClick" @keydown="onKeyDown"></span>
<template :key="i" v-for="i in stars">
<span :class="['p-rating-icon', {'pi pi-star': (i > modelValue), 'pi pi-star-fill': (i <= modelValue), 'p-focus': i === focusIndex}]" @click="onStarClick($event,i)">
<span class="p-hidden-accessible">
<label :for="labelFor(i)">{{labelText(i)}}</label>
<input type="radio" :id="labelFor(i)" :value="i" :name="name" :checked="modelValue === i" :disabled="disabled" :readonly="readonly" @focus="onFocus($event, i)" @blur="onBlur" @keydown="onKeyDown($event,i)">
<input type="radio" :value="i" :name="name" :checked="modelValue === i" :disabled="disabled" :readonly="readonly" :aria-label="ariaLabelTemplate(i)" @focus="onFocus($event, i)" @blur="onBlur" @keydown="onKeyDown($event,i)">
</span>
</span>
<span :class="['p-rating-icon', {'pi pi-star': (i > modelValue), 'pi pi-star-fill': (i <= modelValue), 'p-focus': i === focusIndex}]" @click="onStarClick($event,i)"></span>
</template>
</div>
</template>
@ -98,12 +97,8 @@ export default {
value: value
});
},
labelFor(index) {
return this.name + '_' + index;
},
labelText(index) {
return index === 0 ? this.$primevue.config.locale.aria.noneStars : index === 1
? index + ' ' + this.$primevue.config.locale.aria.star : index + ' ' + this.$primevue.config.locale.aria.stars;
ariaLabelTemplate(index) {
return index === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, index);
}
},
computed: {

2
src/views/rating/RatingDoc.vue
View File

@ -142,7 +142,7 @@ import Rating from 'primevue/rating';
<h5>Accessibility</h5>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <router-link to="/locale">locale</router-link> API via <i>star</i>, <i>stars</i> and <i>noneStars</i> of the <i>aria</i> property.</p>
<p>Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <router-link to="/locale">locale</router-link> API via <i>star</i> and <i>stars</i> of the <i>aria</i> property.</p>
<h6>Keyboard Support</h6>
<p>Keyboard interaction is derived from the native browser handling of radio buttons in a group.</p>