Accessibility for InputSwitch

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",

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.
      */

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)"
+            <input ref="input" type="checkbox" :checked="checked" v-bind="$attrs" role="switch" :tabindex="tabindex" :aria-checked="checked"
-                role="switch" :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

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>