From 96f6fc9d82df399490b1922c3df23cf10e131f1b 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, 27 Jul 2022 11:47:12 +0300
Subject: [PATCH] aria-labelledby and aria-label props added

---
 api-generator/components/chips.js               | 12 ------------
 src/components/calendar/Calendar.d.ts           | 11 ++++++++---
 src/components/calendar/Calendar.vue            | 10 +++++++++-
 src/components/cascadeselect/CascadeSelect.d.ts |  9 +++++++++
 src/components/cascadeselect/CascadeSelect.vue  | 12 ++++++++++--
 src/components/inputnumber/InputNumber.d.ts     |  8 ++++++++
 src/components/inputnumber/InputNumber.vue      | 12 ++++++++++--
 src/components/inputswitch/InputSwitch.d.ts     |  8 ++++++++
 src/components/inputswitch/InputSwitch.vue      | 12 ++++++++++--
 src/components/password/Password.d.ts           |  8 ++++++++
 src/components/password/Password.vue            | 12 ++++++++++--
 src/components/radiobutton/RadioButton.d.ts     |  8 ++++++++
 src/components/radiobutton/RadioButton.vue      | 10 +++++++++-
 13 files changed, 107 insertions(+), 25 deletions(-)

diff --git a/api-generator/components/chips.js b/api-generator/components/chips.js
index ec01f016c..1356ae366 100644
--- a/api-generator/components/chips.js
+++ b/api-generator/components/chips.js
@@ -52,18 +52,6 @@ const ChipsProps = [
         type: "any",
         default: "null",
         description: "Inline style of the input field."
-    },
-    {
-        name: "'aria-labelledby'",
-        type: "string",
-        default: "null",
-        description: "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
-    },
-    {
-        name: "'aria-label'",
-        type: "string",
-        default: "null",
-        description: "Establishes a string value that labels the component."
     }
 ];
 
diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
index 46c4a5cf7..627f3324e 100755
--- a/src/components/calendar/Calendar.d.ts
+++ b/src/components/calendar/Calendar.d.ts
@@ -263,13 +263,18 @@ export interface CalendarProps {
      * 
      */
     inputProps?: object | undefined;
-    /**
-     * Unique identifier of the element.
-     */
     /**
      * 
      */
     panelProps?: object | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    'aria-label'?: string | undefined;
 }
 
 export interface CalendarSlots {
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 3558fa428..83db6d1d0 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -1,7 +1,7 @@
 <template>
     <span ref="container" :id="id" :class="containerClass">
         <input :ref="inputRef" v-if="!inline" type="text" role="combobox" :id="inputId" :class="['p-inputtext p-component', inputClass]" :style="inputStyle"
-            aria-autocomplete="none" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId" inputmode="none" 
+            aria-autocomplete="none" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" inputmode="none" 
             @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" v-bind="inputProps">
         <CalendarButton v-if="showIcon" :icon="icon" class="p-datepicker-trigger" :disabled="disabled" @click="onButtonClick" type="button" :aria-label="$primevue.config.locale.chooseDate" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId"/>
         <Portal :appendTo="appendTo" :disabled="inline">
@@ -325,6 +325,14 @@ export default {
         readonly: {
             type: Boolean,
             default: false
+        },
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
         }
     },
     navigationState: null,
diff --git a/src/components/cascadeselect/CascadeSelect.d.ts b/src/components/cascadeselect/CascadeSelect.d.ts
index f41d69318..162b0e907 100644
--- a/src/components/cascadeselect/CascadeSelect.d.ts
+++ b/src/components/cascadeselect/CascadeSelect.d.ts
@@ -109,6 +109,15 @@ export interface CascadeSelectProps {
      * 
      */
     panelProps?: object | undefined;
+
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    'aria-label'?: string | undefined;
 }
 
 export interface CascadeSelectSlots {
diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 8bb866701..3b586f346 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/src/components/cascadeselect/CascadeSelect.vue
@@ -1,8 +1,8 @@
 <template>
     <div ref="container" :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="focusInput" role="combobox" type="text" :id="inputId" :class="inputClass" :style="inputStyle" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
-                aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-controls="listId" v-bind="inputProps" />
+            <input ref="focusInput" role="combobox" type="text" :id="inputId" :class="inputClass" :style="inputStyle" readonly :disabled="disabled" :tabindex="tabindex" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
+                aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-controls="listId" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" v-bind="inputProps" />
         </div>
         <span :class="labelClass">
             <slot name="value" :value="modelValue" :placeholder="placeholder">
@@ -75,6 +75,14 @@ export default {
         inputProps: null,
         panelClass: null,
         panelProps: null,
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     outsideClickListener: null,
     scrollHandler: null,
diff --git a/src/components/inputnumber/InputNumber.d.ts b/src/components/inputnumber/InputNumber.d.ts
index d57811b96..b2f250d4b 100755
--- a/src/components/inputnumber/InputNumber.d.ts
+++ b/src/components/inputnumber/InputNumber.d.ts
@@ -153,6 +153,14 @@ export interface InputNumberProps {
      * 
      */
     inputProps?: object | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    'aria-label'?: string | undefined;
 }
 
 export interface InputNumberSlots {
diff --git a/src/components/inputnumber/InputNumber.vue b/src/components/inputnumber/InputNumber.vue
index 270e95f67..c44709efe 100755
--- a/src/components/inputnumber/InputNumber.vue
+++ b/src/components/inputnumber/InputNumber.vue
@@ -1,6 +1,6 @@
 <template>
     <span :class="containerClass">
-        <INInputText ref="input" class="p-inputnumber-input" role="spinbutton" :id="inputId" :class="inputClass" :style="inputStyle" :value="formattedValue" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="modelValue" :readonly="readonly"
+        <INInputText ref="input" class="p-inputnumber-input" role="spinbutton" :id="inputId" :class="inputClass" :style="inputStyle" :value="formattedValue" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="modelValue" :readonly="readonly" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
             @input="onUserInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur" v-bind="inputProps"/>
         <span class="p-inputnumber-button-group" v-if="showButtons && buttonLayout === 'stacked'">
             <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" v-bind="incrementButtonProps" />
@@ -120,7 +120,15 @@ export default {
         inputStyle: null,
         inputProps: null,
         incrementButtonProps: null,
-        decrementButtonProps: null
+        decrementButtonProps: null,
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     numberFormat: null,
     _numeral: null,
diff --git a/src/components/inputswitch/InputSwitch.d.ts b/src/components/inputswitch/InputSwitch.d.ts
index 285baf60b..6ed6cf456 100755
--- a/src/components/inputswitch/InputSwitch.d.ts
+++ b/src/components/inputswitch/InputSwitch.d.ts
@@ -29,6 +29,14 @@ export interface InputSwitchProps {
      * 
      */
     inputProps?: object | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    'aria-label'?: string | undefined;
 }
 
 export interface InputSwitchSlots {
diff --git a/src/components/inputswitch/InputSwitch.vue b/src/components/inputswitch/InputSwitch.vue
index b78e3fd02..defa56da1 100755
--- a/src/components/inputswitch/InputSwitch.vue
+++ b/src/components/inputswitch/InputSwitch.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input :id="inputId" ref="input" type="checkbox" role="switch" :class="inputClass" :style="inputStyle" :checked="checked" :disabled="disabled"
+            <input :id="inputId" ref="input" type="checkbox" role="switch" :class="inputClass" :style="inputStyle" :checked="checked" :disabled="disabled" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
                 @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
         </div>
         <span class="p-inputswitch-slider"></span>
@@ -32,7 +32,15 @@ export default {
         inputId: null,
         inputClass: null,
         inputStyle: null,
-        inputProps: null
+        inputProps: null,
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
diff --git a/src/components/password/Password.d.ts b/src/components/password/Password.d.ts
index 458b0938a..8eb70934d 100755
--- a/src/components/password/Password.d.ts
+++ b/src/components/password/Password.d.ts
@@ -75,6 +75,14 @@ export interface PasswordProps extends InputHTMLAttributes {
      * Style class of the overlay panel.
      */
     panelClass?: any | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    'aria-label'?: string | undefined;
 }
 
 export interface PasswordSlots {
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index 703cabb4c..ed821b983 100755
--- a/src/components/password/Password.vue
+++ b/src/components/password/Password.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass">
-        <PInputText ref="input" :id="inputId" :type="inputType" :class="inputClass" :style="inputStyle" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="inputProps" />
+        <PInputText ref="input" :id="inputId" :type="inputType" :class="inputClass" :style="inputStyle" :value="modelValue" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="inputProps" />
         <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
         <span class="p-hidden-accessible" aria-live="polite">
             {{infoText}}
@@ -88,7 +88,15 @@ export default {
         },
         inputClass: null,
         inputStyle: null,
-        inputProps: null
+        inputProps: null,
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
diff --git a/src/components/radiobutton/RadioButton.d.ts b/src/components/radiobutton/RadioButton.d.ts
index 0b14d5dd8..5d56a6f51 100755
--- a/src/components/radiobutton/RadioButton.d.ts
+++ b/src/components/radiobutton/RadioButton.d.ts
@@ -17,6 +17,14 @@ export interface RadioButtonProps {
      * Inline style of the component.
      */
     style?: any;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    'aria-label'?: string | undefined;
 }
 
 export interface RadioButtonSlots {
diff --git a/src/components/radiobutton/RadioButton.vue b/src/components/radiobutton/RadioButton.vue
index 04fefc714..4b195e8c3 100755
--- a/src/components/radiobutton/RadioButton.vue
+++ b/src/components/radiobutton/RadioButton.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="input" type="radio" :id="inputId" :name="name" :checked="checked" :disabled="disabled" :value="value" @focus="onFocus" @blur="onBlur" v-bind="inputProps">
+            <input ref="input" type="radio" :id="inputId" :name="name" :checked="checked" :disabled="disabled" :value="value" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @focus="onFocus" @blur="onBlur" v-bind="inputProps">
         </div>
         <div ref="box" :class="['p-radiobutton-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
             <div class="p-radiobutton-icon"></div>
@@ -34,6 +34,14 @@ export default {
             type: String,
             default: null
         },
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {