From 3b8460df99cc31a69ecb53384c6d07819063e11a 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 13:55:41 +0300
Subject: [PATCH 1/3] Accessibility for Checkbox

---
 api-generator/components/checkbox.js  |  6 ++++
 src/components/checkbox/Checkbox.d.ts |  4 +++
 src/components/checkbox/Checkbox.vue  | 19 +++++++---
 src/views/checkbox/CheckboxDemo.vue   |  4 +--
 src/views/checkbox/CheckboxDoc.vue    | 51 +++++++++++++++++++++++++--
 5 files changed, 74 insertions(+), 10 deletions(-)

diff --git a/api-generator/components/checkbox.js b/api-generator/components/checkbox.js
index d98987487..40f547fd4 100644
--- a/api-generator/components/checkbox.js
+++ b/api-generator/components/checkbox.js
@@ -17,6 +17,12 @@ const CheckboxProps = [
         default: "false",
         description: "Allows to select a boolean value instead of multiple values."
     },
+    {
+        name: "tabindex",
+        type: "number",
+        default: "null",
+        description: "Index of the element in tabbing order."
+    },
     {
         name: "class",
         type: "string",
diff --git a/src/components/checkbox/Checkbox.d.ts b/src/components/checkbox/Checkbox.d.ts
index 5129df124..0bc386ed1 100755
--- a/src/components/checkbox/Checkbox.d.ts
+++ b/src/components/checkbox/Checkbox.d.ts
@@ -13,6 +13,10 @@ export interface CheckboxProps {
      * Allows to select a boolean value instead of multiple values.
      */
     binary?: boolean;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number;
     /**
      * Style class of the component input field.
      */
diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
index d7d8f767e..aad396afb 100755
--- a/src/components/checkbox/Checkbox.vue
+++ b/src/components/checkbox/Checkbox.vue
@@ -1,9 +1,9 @@
 <template>
-   <div :class="containerClass" @click="onClick($event)" :style="style">
-       <div class="p-hidden-accessible">
-           <input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus" @blur="onBlur">
+    <div :class="containerClass" @click="onClick($event)" :style="style">
+        <div class="p-hidden-accessible">
+            <input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" :aria-checked="checked" :tabindex="tabindex" @focus="onFocus" @blur="onBlur">
         </div>
-        <div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="checked">
+        <div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
             <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
         </div>
     </div>
@@ -22,6 +22,10 @@ export default {
         binary: Boolean,
         class: null,
         style: null,
+        tabindex: {
+            type: Number,
+            default: null
+        },
         trueValue: {
             type: null,
             default: true
@@ -70,7 +74,12 @@ export default {
             return this.binary ? this.modelValue === this.trueValue : ObjectUtils.contains(this.value, this.modelValue);
         },
         containerClass() {
-            return ['p-checkbox p-component', this.class, {'p-checkbox-checked': this.checked, 'p-checkbox-disabled': this.$attrs.disabled, 'p-checkbox-focused': this.focused}];
+            return [
+                'p-checkbox p-component', this.class, {
+                    'p-checkbox-checked': this.checked,
+                    'p-checkbox-disabled': this.$attrs.disabled,
+                    'p-checkbox-focused': this.focused
+                }];
         }
     }
 }
diff --git a/src/views/checkbox/CheckboxDemo.vue b/src/views/checkbox/CheckboxDemo.vue
index edcfc8f19..d8c47d5ef 100755
--- a/src/views/checkbox/CheckboxDemo.vue
+++ b/src/views/checkbox/CheckboxDemo.vue
@@ -13,7 +13,7 @@
                 <h5>Basic</h5>
                 <div class="field-checkbox">
                     <Checkbox id="binary" v-model="checked" :binary="true" />
-                    <label for="binary">{{checked}}</label>
+                    <label for="binary">Remember Me</label>
                 </div>
 
                 <h5>Multiple</h5>
@@ -36,7 +36,7 @@
 
                 <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
                 <div v-for="category of categories" :key="category.key" class="field-checkbox">
-                    <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
+                    <Checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
                     <label :for="category.key">{{category.name}}</label>
                 </div>
             </div>
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index 0f2c15f46..d1002aafa 100755
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -75,6 +75,12 @@ export default {
                         <td>false</td>
                         <td>Allows to select a boolean value instead of multiple values.</td>
                     </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
                     <tr>
                         <td>style</td>
                         <td>any</td>
@@ -161,6 +167,45 @@ export default {
 			</table>
 		</div>
 
+        <h5>Accessibility</h5>
+        <DevelopmentSection>
+            <h6>Screen Reader</h6>
+            <p>Checkbox component uses a hidden native checkbox 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="chkbox1"&gt;Remember Me&lt;/label&gt;
+&lt;Checkbox id="chkbox1" /&gt;
+
+&lt;span id="chkbox2"&gt;Remember Me&lt;/span&gt;
+&lt;Checkbox aria-labelledby="chkbox2" /&gt;
+
+&lt;Checkbox aria-label="Remember Me" /&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 checkbox.</td>
+                        </tr>
+                        <tr>
+                            <td><i>space</i></td>
+                            <td>Toggles the checked state.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DevelopmentSection>
+
 		<h5>Dependencies</h5>
 		<p>None.</p>
     </AppDoc>
@@ -202,7 +247,7 @@ export default {
 
         <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
         <div v-for="category of categories" :key="category.key" class="field-checkbox">
-            <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
+            <Checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
             <label :for="category.key">{{category.name}}</label>
         </div>
     </div>
@@ -255,7 +300,7 @@ export default {
 
         <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
         <div v-for="category of categories" :key="category.key" class="field-checkbox">
-            <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
+            <Checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
             <label :for="category.key">{{category.name}}</label>
         </div>
     </div>
@@ -310,7 +355,7 @@ export default {
 
         <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
         <div v-for="category of categories" :key="category.key" class="field-checkbox">
-            <p-checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox>
+            <p-checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox>
             <label :for="category.key">{{category.name}}</label>
         </div>
     </div>

From b241870e2f47ec28f23fafd188c501f32fe83419 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:52:05 +0300
Subject: [PATCH 2/3] refactor

---
 src/components/checkbox/Checkbox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
index aad396afb..1c6771ef6 100755
--- a/src/components/checkbox/Checkbox.vue
+++ b/src/components/checkbox/Checkbox.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass" @click="onClick($event)" :style="style">
         <div class="p-hidden-accessible">
-            <input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" :aria-checked="checked" :tabindex="tabindex" @focus="onFocus" @blur="onBlur">
+            <input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" :tabindex="tabindex" @focus="onFocus" @blur="onBlur">
         </div>
         <div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
             <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>

From 07ab17ff6c0cd872e3a5197ae120befd4f67e187 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: Wed, 29 Jun 2022 16:38:41 +0300
Subject: [PATCH 3/3] remove unnecessary tabindex

---
 api-generator/components/checkbox.js  | 6 ------
 src/components/checkbox/Checkbox.d.ts | 4 ----
 src/components/checkbox/Checkbox.vue  | 6 +-----
 src/views/checkbox/CheckboxDoc.vue    | 6 ------
 4 files changed, 1 insertion(+), 21 deletions(-)

diff --git a/api-generator/components/checkbox.js b/api-generator/components/checkbox.js
index 40f547fd4..d98987487 100644
--- a/api-generator/components/checkbox.js
+++ b/api-generator/components/checkbox.js
@@ -17,12 +17,6 @@ const CheckboxProps = [
         default: "false",
         description: "Allows to select a boolean value instead of multiple values."
     },
-    {
-        name: "tabindex",
-        type: "number",
-        default: "null",
-        description: "Index of the element in tabbing order."
-    },
     {
         name: "class",
         type: "string",
diff --git a/src/components/checkbox/Checkbox.d.ts b/src/components/checkbox/Checkbox.d.ts
index 0bc386ed1..5129df124 100755
--- a/src/components/checkbox/Checkbox.d.ts
+++ b/src/components/checkbox/Checkbox.d.ts
@@ -13,10 +13,6 @@ export interface CheckboxProps {
      * Allows to select a boolean value instead of multiple values.
      */
     binary?: boolean;
-    /**
-     * Index of the element in tabbing order.
-     */
-    tabindex?: number;
     /**
      * Style class of the component input field.
      */
diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
index 1c6771ef6..13713eb56 100755
--- a/src/components/checkbox/Checkbox.vue
+++ b/src/components/checkbox/Checkbox.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass" @click="onClick($event)" :style="style">
         <div class="p-hidden-accessible">
-            <input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" :tabindex="tabindex" @focus="onFocus" @blur="onBlur">
+            <input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus" @blur="onBlur">
         </div>
         <div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
             <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
@@ -22,10 +22,6 @@ export default {
         binary: Boolean,
         class: null,
         style: null,
-        tabindex: {
-            type: Number,
-            default: null
-        },
         trueValue: {
             type: null,
             default: true
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index d1002aafa..3155ff01e 100755
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -75,12 +75,6 @@ export default {
                         <td>false</td>
                         <td>Allows to select a boolean value instead of multiple values.</td>
                     </tr>
-                    <tr>
-                        <td>tabindex</td>
-                        <td>number</td>
-                        <td>null</td>
-                        <td>Index of the element in tabbing order.</td>
-                    </tr>
                     <tr>
                         <td>style</td>
                         <td>any</td>