Refactor Calendar Accessibility

api-generator/components/calendar.js

@@ -95,7 +95,6 @@ const CalendarProps = [
         default: "null",
         description: "The minimum selectable date."
     },
-
     {
         name: "maxDate",
         type: "Date",
@@ -228,6 +227,12 @@ const CalendarProps = [
         default: "body",
         description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.'
     },
+    {
+        name: "id",
+        type: "string",
+        default: "null",
+        description: "Identifier of the element."
+    },
     {
         name: "inputId",
         type: "string",

src/components/calendar/Calendar.d.ts

@@ -243,15 +243,10 @@ export interface CalendarProps {
      * Default value is 'body'.
      */
     appendTo?: CalendarAppendToType;
+    /**
+     * Identifier of the element.
+     */
     id?: string | undefined;
-    /**
-     * Inline style of the component.
-     */
-    style?: any;
-    /**
-     * Style class of the component.
-     */
-    class?: any;
     /**
      * Identifier of the underlying input element.
      */

src/components/calendar/Calendar.vue

@@ -1,5 +1,5 @@
 <template>
-    <span ref="container" :id="id" :class="containerClass" :style="style">
+    <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" 
             @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" v-bind="inputProps">
@@ -2423,7 +2423,7 @@ export default {
         },
         containerClass() {
             return [
-                'p-calendar p-component p-inputwrapper', this.class,
+                'p-calendar p-component p-inputwrapper',
                 {
                     'p-calendar-w-btn': this.showIcon,
                     'p-calendar-timeonly': this.timeOnly,

src/views/calendar/CalendarDoc.vue

@@ -435,18 +435,6 @@ export default {
                         <td>null</td>
                         <td>Unique identifier of the element.</td>
                     </tr>
-                    <tr>
-                        <td>style</td>
-                        <td>any</td>
-                        <td>null</td>
-                        <td>Inline style of the component.</td>
-                    </tr>
-                    <tr>
-                        <td>class</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Style class of the component.</td>
-                    </tr>
                     <tr>
                         <td>inputStyle</td>
                         <td>any</td>