From b18b6f0858e62381e02fe682efc2f03066d13623 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, 6 Jul 2022 16:41:58 +0300
Subject: [PATCH] Accessibility for ToggleButton

---
 api-generator/components/togglebutton.js      | 22 +++++++
 src/components/togglebutton/ToggleButton.d.ts | 10 ++++
 src/components/togglebutton/ToggleButton.vue  | 41 +++++++++++--
 src/views/togglebutton/ToggleButtonDemo.vue   |  4 +-
 src/views/togglebutton/ToggleButtonDoc.vue    | 59 +++++++++++++++++--
 5 files changed, 122 insertions(+), 14 deletions(-)

diff --git a/api-generator/components/togglebutton.js b/api-generator/components/togglebutton.js
index 4999ae7cf..7ea83c3d8 100644
--- a/api-generator/components/togglebutton.js
+++ b/api-generator/components/togglebutton.js
@@ -48,6 +48,28 @@ const ToggleButtonEvents = [
                 description: "Browser event"
             }
         ]
+    },
+    {
+        name: "focus",
+        description: "Callback to invoke when the component receives focus.",
+        arguments: [
+            {
+                name: "event",
+                type: "object",
+                description: "Browser event"
+            }
+        ]
+    },
+    {
+        name: "blur",
+        description: "Callback to invoke when the component loses focus.",
+        arguments: [
+            {
+                name: "event",
+                type: "object",
+                description: "Browser event"
+            }
+        ]
     }
 ];
 
diff --git a/src/components/togglebutton/ToggleButton.d.ts b/src/components/togglebutton/ToggleButton.d.ts
index ff934291e..f158ee944 100755
--- a/src/components/togglebutton/ToggleButton.d.ts
+++ b/src/components/togglebutton/ToggleButton.d.ts
@@ -47,6 +47,16 @@ export declare type ToggleButtonEmits = {
      * @param {Event} event - Browser event.
      */
     'change': (event: Event) => void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    'focus': (event: Event) => void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    'blur': (event: Event) => void;
 }
 
 declare class ToggleButton extends ClassComponent<ToggleButtonProps, ToggleButtonSlots, ToggleButtonEmits> { }
diff --git a/src/components/togglebutton/ToggleButton.vue b/src/components/togglebutton/ToggleButton.vue
index 4a2d7c981..609451773 100755
--- a/src/components/togglebutton/ToggleButton.vue
+++ b/src/components/togglebutton/ToggleButton.vue
@@ -1,5 +1,6 @@
 <template>
-    <div :class="buttonClass" @click="onClick($event)" role="checkbox" :aria-checked="modelValue" :tabindex="$attrs.disabled ? null : '0'" v-ripple>
+    <div :class="buttonClass" role="button" :tabindex="tabindex" :aria-pressed="modelValue" v-ripple
+        @click="onClick($event)" @keydown="onKeyDown($event)" @focus="onFocus($event)" @blur="onBlur($event)">
         <span v-if="hasIcon" :class="iconClass"></span>
         <span class="p-button-label">{{label}}</span>
     </div>
@@ -10,24 +11,52 @@ import Ripple from 'primevue/ripple';
 
 export default {
     name: 'ToggleButton',
-    emits: ['update:modelValue', 'change'],
+    emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
     props: {
         modelValue: Boolean,
 		onIcon: String,
 		offIcon: String,
-        onLabel: String,
-        offLabel: String,
+        onLabel: {
+            type: String,
+            default: 'Yes'
+        },
+        offLabel: {
+            type: String,
+            default: 'No'
+        },
         iconPos: {
             type: String,
             default: 'left'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: Number,
+            default: 0
         }
     },
     methods: {
         onClick(event) {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.$emit('update:modelValue', !this.modelValue);
                 this.$emit('change', event);
+                this.$emit('click', event);
             }
+        },
+        onKeyDown(event) {
+            //space
+            if (event.keyCode === 32) {
+                this.onClick(event);
+                event.preventDefault();
+            }
+        },
+        onFocus(event) {
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.$emit('blur', event);
         }
     },
     computed: {
@@ -35,7 +64,7 @@ export default {
             return {
                 'p-button p-togglebutton p-component': true,
                 'p-button-icon-only': this.hasIcon && !this.hasLabel,
-                'p-disabled': this.$attrs.disabled,
+                'p-disabled': this.disabled,
                 'p-highlight': this.modelValue === true
             }
         },
diff --git a/src/views/togglebutton/ToggleButtonDemo.vue b/src/views/togglebutton/ToggleButtonDemo.vue
index 1dce269d0..2174f756a 100755
--- a/src/views/togglebutton/ToggleButtonDemo.vue
+++ b/src/views/togglebutton/ToggleButtonDemo.vue
@@ -11,10 +11,10 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
+                <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-10rem" aria-label="Confirmation" />
 
                 <h5>Customized</h5>
-                <ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
+                <ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-10rem" aria-label="Confirmation"/>
             </div>
         </div>
 
diff --git a/src/views/togglebutton/ToggleButtonDoc.vue b/src/views/togglebutton/ToggleButtonDoc.vue
index 811578a46..f1da94cd1 100755
--- a/src/views/togglebutton/ToggleButtonDoc.vue
+++ b/src/views/togglebutton/ToggleButtonDoc.vue
@@ -107,6 +107,16 @@ export default {
                         <td>change</td>
                         <td>event: Browser event</td>
                         <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -139,6 +149,43 @@ export default {
 			</table>
 		</div>
 
+        <h5>Accessibility</h5>
+        <DevelopmentSection>
+            <h6>Screen Reader</h6>
+            <p>ToggleButton component uses an element with <i>button</i> role and updates <i>aria-pressed</i> state for screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, it is highly suggested to use
+            either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that does not change related to state.</p>
+
+<pre v-code><code>
+&lt;span id="rememberme"&gt;Remember Me&lt;/span&gt;
+&lt;ToggleButton aria-labelledby="rememberme" /&gt;
+
+&lt;ToggleButton 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 button.</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>
@@ -155,10 +202,10 @@ export default {
 <template>
     <div>
         <h5>Basic</h5>
-        <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
+        <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-10rem" aria-label="Confirmation" />
 
         <h5>Customized</h5>
-        <ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
+        <ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-10rem" aria-label="Confirmation" />
     </div>
 </template>
 
@@ -180,10 +227,10 @@ export default {
 <template>
     <div>
         <h5>Basic</h5>
-        <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
+        <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-10rem" aria-label="Confirmation" />
 
         <h5>Customized</h5>
-        <ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
+        <ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-10rem" aria-label="Confirmation" />
     </div>
 </template>
 
@@ -206,10 +253,10 @@ export default {
                     imports: `<script src="https://unpkg.com/primevue@^3/togglebutton/togglebutton.min.js"><\\/script>`,
                     content: `<div id="app">
             <h5>Basic</h5>
-            <p-togglebutton v-model="checked1" on-icon="pi pi-check" off-icon="pi pi-times"></p-togglebutton>
+            <p-togglebutton v-model="checked1" on-icon="pi pi-check" off-icon="pi pi-times" class="w-full sm:w-10rem" aria-label="Confirmation"></p-togglebutton>
 
             <h5>Customized</h5>
-            <p-togglebutton v-model="checked2" on-label="I confirm" off-label="I reject" on-icon="pi pi-check" off-icon="pi pi-times" style="width: 10em"></p-togglebutton>
+            <p-togglebutton v-model="checked2" on-label="I confirm" off-label="I reject" on-icon="pi pi-check" off-icon="pi pi-times" class="w-full sm:w-10rem" aria-label="Confirmation"></p-togglebutton>
         </div>
 
         <script type="module">