From 74093760d5a0905ccc6e234f2ed83b4329dc8329 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 12:05:45 +0300
Subject: [PATCH] Accessibility for InputSwitch

---
 api-generator/components/inputswitch.js     |  6 +++
 src/components/inputswitch/InputSwitch.d.ts |  4 ++
 src/components/inputswitch/InputSwitch.vue  | 10 +++--
 src/views/inputswitch/InputSwitchDoc.vue    | 45 +++++++++++++++++++++
 4 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/api-generator/components/inputswitch.js b/api-generator/components/inputswitch.js
index b05d8b32d..39e95c9a3 100644
--- a/api-generator/components/inputswitch.js
+++ b/api-generator/components/inputswitch.js
@@ -17,6 +17,12 @@ const InputSwitchProps = [
         default: "null",
         description: "Inline of the component."
     },
+    {
+        name: "tabindex",
+        type: "number",
+        default: "null",
+        description: "Index of the element in tabbing order."
+    },
     {
         name: "trueValue",
         type: "any",
diff --git a/src/components/inputswitch/InputSwitch.d.ts b/src/components/inputswitch/InputSwitch.d.ts
index a4723b9ac..546a7b516 100755
--- a/src/components/inputswitch/InputSwitch.d.ts
+++ b/src/components/inputswitch/InputSwitch.d.ts
@@ -13,6 +13,10 @@ export interface InputSwitchProps {
      * Style class of the component input field.
      */
     style?: any;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number;
     /**
      * Value in checked state.
      */
diff --git a/src/components/inputswitch/InputSwitch.vue b/src/components/inputswitch/InputSwitch.vue
index 2eabc20ae..b4e288b95 100755
--- a/src/components/inputswitch/InputSwitch.vue
+++ b/src/components/inputswitch/InputSwitch.vue
@@ -1,8 +1,8 @@
 <template>
-    <div :class="containerClass" @click="onClick($event)" :style="style">
+    <div :class="containerClass" @click="onClick($event)" :style="style" role="checkbox" :aria-checked="checked">
         <div class="p-hidden-accessible">
-            <input ref="input" type="checkbox" :checked="checked" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)"
-                role="switch" :aria-checked="checked">
+            <input ref="input" type="checkbox" :checked="checked" v-bind="$attrs" role="switch" :tabindex="tabindex" :aria-checked="checked"
+                @focus="onFocus($event)" @blur="onBlur($event)">
         </div>
         <span class="p-inputswitch-slider"></span>
     </div>
@@ -20,6 +20,10 @@ export default {
         },
         class: null,
         style: null,
+        tabindex: {
+            type: Number,
+            default: null
+        },
         trueValue: {
             type: null,
             default: true
diff --git a/src/views/inputswitch/InputSwitchDoc.vue b/src/views/inputswitch/InputSwitchDoc.vue
index c870d36c3..1aa3412fb 100755
--- a/src/views/inputswitch/InputSwitchDoc.vue
+++ b/src/views/inputswitch/InputSwitchDoc.vue
@@ -74,6 +74,12 @@ export default {
                         <td>string</td>
                         <td>null</td>
                         <td>Inline style of the component.</td>
+                    </tr>
+					<tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
                     </tr>
 					<tr>
                         <td>trueValue</td>
@@ -149,6 +155,45 @@ export default {
 			</table>
 		</div>
 
+		<h5>Accessibility</h5>
+		<DevelopmentSection>
+			<h6>Screen Reader</h6>
+			<p>InputSwitch component uses a hidden native checkbox element with <i>switch</i> role 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="switch1"&gt;Remember Me&lt;/label&gt;
+&lt;InputSwitch id="switch1" /&gt;
+
+&lt;span id="switch2"&gt;Remember Me&lt;/span&gt;
+&lt;InputSwitch aria-labelledby="switch2" /&gt;
+
+&lt;InputSwitch 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 switch.</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>