From caa02ebdcc49883ae225811e3a89d487b0570720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 29 Jul 2022 16:52:08 +0300
Subject: [PATCH] Update Rating Accessibility

---
 src/components/config/PrimeVue.js |  5 ++---
 src/components/rating/Rating.vue  | 29 ++++++++++++-----------------
 src/views/rating/RatingDoc.vue    |  2 +-
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/components/config/PrimeVue.js b/src/components/config/PrimeVue.js
index 8ed925465..aaaeec1a5 100644
--- a/src/components/config/PrimeVue.js
+++ b/src/components/config/PrimeVue.js
@@ -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'
diff --git a/src/components/rating/Rating.vue b/src/components/rating/Rating.vue
index a97263bcb..871b190ef 100755
--- a/src/components/rating/Rating.vue
+++ b/src/components/rating/Rating.vue
@@ -1,17 +1,16 @@
 <template>
     <div :class="containerClass">
-        <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)">
-        </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-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)">
+        <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">
+                <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>
+        <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">
+                    <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: {
diff --git a/src/views/rating/RatingDoc.vue b/src/views/rating/RatingDoc.vue
index 2f20002c7..eb7cbe365 100755
--- a/src/views/rating/RatingDoc.vue
+++ b/src/views/rating/RatingDoc.vue
@@ -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>