From 37ce8d1bdd95b0572ff55e091fea5e856586b350 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: Tue, 5 Jul 2022 15:36:11 +0300
Subject: [PATCH] Accessibility for RadioButton

---
 src/components/radiobutton/RadioButton.vue | 35 ++++++++++++++--------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/radiobutton/RadioButton.vue b/src/components/radiobutton/RadioButton.vue
index 2a3ff17f0..48fea5c23 100755
--- a/src/components/radiobutton/RadioButton.vue
+++ b/src/components/radiobutton/RadioButton.vue
@@ -1,9 +1,9 @@
 <template>
-    <div :class="containerClass" @click="onClick($event)" :style="style">
+    <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="input" type="radio" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus" @blur="onBlur">
+            <input ref="input" type="radio" :id="inputId" :checked="checked" :value="value" @focus="onFocus" @blur="onBlur" v-bind="inputProps">
         </div>
-        <div ref="box" :class="['p-radiobutton-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]">
+        <div ref="box" :class="['p-radiobutton-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
             <div class="p-radiobutton-icon"></div>
         </div>
     </div>
@@ -14,13 +14,22 @@ import {ObjectUtils} from 'primevue/utils';
 
 export default {
     name: 'RadioButton',
-    inheritAttrs: false,
-    emits: ['click', 'update:modelValue', 'change'],
+    emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
     props: {
 		value: null,
         modelValue: null,
-        class: null,
-        style: null
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputProps: {
+            type: Object,
+            default: null
+        }
     },
     data() {
         return {
@@ -29,7 +38,7 @@ export default {
     },
     methods: {
         onClick(event) {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.$emit('click', event);
                 this.$emit('update:modelValue', this.value);
                 this.$refs.input.focus();
@@ -39,11 +48,13 @@ export default {
                 }
             }
         },
-        onFocus() {
+        onFocus(event) {
             this.focused = true;
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
+            this.$emit('blur', event);
         }
     },
     computed: {
@@ -52,9 +63,9 @@ export default {
         },
         containerClass() {
             return [
-                'p-radiobutton p-component', this.class, {
+                'p-radiobutton p-component', {
                     'p-radiobutton-checked': this.checked,
-                    'p-radiobutton-disabled': this.$attrs.disabled,
+                    'p-radiobutton-disabled': this.disabled,
                     'p-radiobutton-focused': this.focused
                 }];
         }