Merge pull request #2717 from tugcekucukoglu/accessibility-inputswitch

Accessibility for InputSwitch

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" :aria-checked="checked"
+                @focus="onFocus($event)" @blur="onBlur($event)">
         </div>
         <span class="p-inputswitch-slider"></span>
     </div>

src/views/inputswitch/InputSwitchDoc.vue

@@ -149,6 +149,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>