From 4b8162a341541731b459e70d75fc7032aea49291 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: Mon, 27 Jun 2022 14:50:02 +0300
Subject: [PATCH] Accessibility for RadioButton

---
 api-generator/components/radiobutton.js     |  6 ++
 src/components/radiobutton/RadioButton.d.ts |  4 ++
 src/components/radiobutton/RadioButton.vue  | 12 +++-
 src/views/radiobutton/RadioButtonDemo.vue   |  2 +-
 src/views/radiobutton/RadioButtonDoc.vue    | 67 ++++++++++++++++++---
 5 files changed, 80 insertions(+), 11 deletions(-)

diff --git a/api-generator/components/radiobutton.js b/api-generator/components/radiobutton.js
index 9a4f2aa7c..b68952b81 100644
--- a/api-generator/components/radiobutton.js
+++ b/api-generator/components/radiobutton.js
@@ -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",
diff --git a/src/components/radiobutton/RadioButton.d.ts b/src/components/radiobutton/RadioButton.d.ts
index 0b14d5dd8..5dc6b7af7 100755
--- a/src/components/radiobutton/RadioButton.d.ts
+++ b/src/components/radiobutton/RadioButton.d.ts
@@ -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.
      */
diff --git a/src/components/radiobutton/RadioButton.vue b/src/components/radiobutton/RadioButton.vue
index 00a6d6060..6aa503479 100755
--- a/src/components/radiobutton/RadioButton.vue
+++ b/src/components/radiobutton/RadioButton.vue
@@ -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
+                }];
         }
     }
 }
diff --git a/src/views/radiobutton/RadioButtonDemo.vue b/src/views/radiobutton/RadioButtonDemo.vue
index d39f1c72a..c0234f47f 100755
--- a/src/views/radiobutton/RadioButtonDemo.vue
+++ b/src/views/radiobutton/RadioButtonDemo.vue
@@ -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>
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index 55718b1c1..0d0ddefae 100755
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -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>