primevue 3.15.0 → 3.16.2

package/calendar/calendar.cjs.js

@@ -16,7 +16,6 @@ var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 
 var script = {
     name: 'Calendar',
-    inheritAttrs: false,
     emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
     props: {
         modelValue: null,
@@ -73,10 +72,6 @@ var script = {
             type: String,
             default: null
         },
-        panelClass: {
-            type: String,
-            default: null
-        },
         minDate: {
             type: Date,
             value: null
@@ -149,6 +144,10 @@ var script = {
             type: Boolean,
             default: false
         },
+        hideOnRangeSelection: {
+            type: Boolean,
+            default: false
+        },
         timeSeparator: {
             type: String,
             default: ':'
@@ -165,10 +164,34 @@ var script = {
             type: String,
             default: 'body'
         },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        id: null,
+        inputId: null,
         inputClass: null,
         inputStyle: null,
-        class: null,
-        style: null
+        inputProps: null,
+        panelClass: null,
+        panelStyle: null,
+        panelProps: null,
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     navigationState: null,
     timePickerChange: false,
@@ -191,7 +214,7 @@ var script = {
         if (this.inline) {
             this.overlay && this.overlay.setAttribute(this.attributeSelector, '');
 
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 this.preventFocus = true;
                 this.initFocusableCell();
 
@@ -522,15 +545,20 @@ var script = {
                 this.decrementDecade();
             }
             else {
-                if (this.currentMonth === 0) {
-                    this.currentMonth = 11;
+                if (event.shiftKey) {
                     this.decrementYear();
                 }
                 else {
-                    this.currentMonth--;
-                }
+                    if (this.currentMonth === 0) {
+                        this.currentMonth = 11;
+                        this.decrementYear();
+                    }
+                    else {
+                        this.currentMonth--;
+                    }
 
-                this.$emit('month-change', {month: this.currentMonth, year: this.currentYear});
+                    this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear});
+                }
             }
         },
         navForward(event) {
@@ -547,15 +575,20 @@ var script = {
                 this.incrementDecade();
             }
             else {
-                if (this.currentMonth === 11) {
-                    this.currentMonth = 0;
+                if (event.shiftKey) {
                     this.incrementYear();
                 }
                 else {
-                    this.currentMonth++;
-                }
+                    if (this.currentMonth === 11) {
+                        this.currentMonth = 0;
+                        this.incrementYear();
+                    }
+                    else {
+                        this.currentMonth++;
+                    }
 
-                this.$emit('month-change', {month: this.currentMonth , year: this.currentYear});
+                    this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear});
+                }
             }
         },
         decrementYear() {
@@ -581,7 +614,7 @@ var script = {
             event.preventDefault();
         },
         isEnabled() {
-            return !this.$attrs.disabled && !this.$attrs.readonly;
+            return !this.disabled && !this.readonly;
         },
         updateCurrentTimeMeta(date) {
             let currentHour = date.getHours();
@@ -715,7 +748,7 @@ var script = {
             this.$emit('year-change', {month: this.currentMonth + 1, year: this.currentYear});
         },
         onDateSelect(event, dateMeta) {
-            if (this.$attrs.disabled || !dateMeta.selectable) {
+            if (this.disabled || !dateMeta.selectable) {
                 return;
             }
 
@@ -744,6 +777,7 @@ var script = {
 
             if (this.isSingleSelection() && (!this.showTime || this.hideOnDateTimeSelect)) {
                 setTimeout(() => {
+                    this.input.focus();
                     this.overlayVisible = false;
                 }, 150);
             }
@@ -805,6 +839,12 @@ var script = {
             if (modelVal !== null) {
                 this.updateModel(modelVal);
             }
+
+            if (this.isRangeSelection() && this.hideOnRangeSelection && modelVal[1] !== null) {
+                setTimeout(() => {
+                    this.overlayVisible = false;
+                }, 150);
+            }
             this.$emit('date-select', date);
         },
         updateModel(value) {
@@ -1592,9 +1632,8 @@ var script = {
             const cellContent = event.currentTarget;
             const cell = cellContent.parentElement;
 
-            switch (event.which) {
-                //down arrow
-                case 40: {
+            switch (event.code) {
+                case 'ArrowDown': {
                     cellContent.tabIndex = '-1';
                     let cellIndex = utils.DomHandler.index(cell);
                     let nextRow = cell.parentElement.nextElementSibling;
@@ -1617,8 +1656,7 @@ var script = {
                     break;
                 }
 
-                //up arrow
-                case 38: {
+                case 'ArrowUp': {
                     cellContent.tabIndex = '-1';
                     let cellIndex = utils.DomHandler.index(cell);
                     let prevRow = cell.parentElement.previousElementSibling;
@@ -1641,14 +1679,13 @@ var script = {
                     break;
                 }
 
-                //left arrow
-                case 37: {
+                case 'ArrowLeft': {
                     cellContent.tabIndex = '-1';
                     let prevCell = cell.previousElementSibling;
                     if (prevCell) {
                         let focusCell = prevCell.children[0];
                         if (utils.DomHandler.hasClass(focusCell, 'p-disabled')) {
-                            this.navigateToMonth(true, groupIndex);
+                            this.navigateToMonth(event, true, groupIndex);
                         }
                         else {
                             focusCell.tabIndex = '0';
@@ -1656,20 +1693,19 @@ var script = {
                         }
                     }
                     else {
-                        this.navigateToMonth(true, groupIndex);
+                        this.navigateToMonth(event, true, groupIndex);
                     }
                     event.preventDefault();
                     break;
                 }
 
-                //right arrow
-                case 39: {
+                case 'ArrowRight': {
                     cellContent.tabIndex = '-1';
                     let nextCell = cell.nextElementSibling;
                     if (nextCell) {
                         let focusCell = nextCell.children[0];
                         if (utils.DomHandler.hasClass(focusCell, 'p-disabled')) {
-                            this.navigateToMonth(false, groupIndex);
+                            this.navigateToMonth(event, false, groupIndex);
                         }
                         else {
                             focusCell.tabIndex = '0';
@@ -1677,38 +1713,90 @@ var script = {
                         }
                     }
                     else {
-                        this.navigateToMonth(false, groupIndex);
+                        this.navigateToMonth(event, false, groupIndex);
                     }
                     event.preventDefault();
                     break;
                 }
 
-                //enter
-                //space
-                case 13:
-                case 32: {
+                case 'Enter':
+                case 'Space': {
                     this.onDateSelect(event, date);
                     event.preventDefault();
                     break;
                 }
 
-                //escape
-                case 27: {
+                case 'Escape': {
                     this.overlayVisible = false;
                     event.preventDefault();
                     break;
                 }
 
-                //tab
-                case 9: {
+                case 'Tab': {
                     if (!this.inline) {
                         this.trapFocus(event);
                     }
                     break;
                 }
+
+                case 'Home': {
+                    cellContent.tabIndex = '-1';
+                    let currentRow = cell.parentElement;
+                    let focusCell = currentRow.children[0].children[0];
+                    if (utils.DomHandler.hasClass(focusCell, 'p-disabled')) {
+                        this.navigateToMonth(event, true, groupIndex);
+                    }
+                    else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'End': {
+                    cellContent.tabIndex = '-1';
+                    let currentRow = cell.parentElement;
+                    let focusCell = currentRow.children[currentRow.children.length -1].children[0];
+                    if (utils.DomHandler.hasClass(focusCell, 'p-disabled')) {
+                        this.navigateToMonth(event, false, groupIndex);
+                    }
+                    else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageUp': {
+                    cellContent.tabIndex = '-1';
+                    if (event.shiftKey) {
+                        this.navigationState = {backward: true};
+                        this.navBackward(event);
+                    }
+                    else this.navigateToMonth(event, true, groupIndex);
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageDown': {
+                    cellContent.tabIndex = '-1';
+                    if (event.shiftKey) {
+                        this.navigationState = {backward: false};
+                        this.navForward(event);
+                    }
+                    else this.navigateToMonth(event, false, groupIndex);
+
+                    event.preventDefault();
+                    break;
+                }
             }
         },
-        navigateToMonth(prev, groupIndex) {
+        navigateToMonth(event, prev, groupIndex) {
             if (prev) {
                 if (this.numberOfMonths === 1 || (groupIndex === 0)) {
                     this.navigationState = {backward: true};
@@ -1738,14 +1826,13 @@ var script = {
         onMonthCellKeydown(event, index) {
             const cell = event.currentTarget;
 
-            switch (event.which) {
-                //arrows
-                case 38:
-                case 40: {
+            switch (event.code) {
+                case 'ArrowUp':
+                case 'ArrowDown': {
                     cell.tabIndex = '-1';
                     var cells = cell.parentElement.children;
                     var cellIndex = utils.DomHandler.index(cell);
-                    let nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex -3];
+                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 3 : cellIndex -3];
                     if (nextCell) {
                         nextCell.tabIndex = '0';
                         nextCell.focus();
@@ -1754,8 +1841,7 @@ var script = {
                     break;
                 }
 
-                //left arrow
-                case 37: {
+                case 'ArrowLeft': {
                     cell.tabIndex = '-1';
                     let prevCell = cell.previousElementSibling;
                     if (prevCell) {
@@ -1770,8 +1856,7 @@ var script = {
                     break;
                 }
 
-                //right arrow
-                case 39: {
+                case 'ArrowRight': {
                     cell.tabIndex = '-1';
                     let nextCell = cell.nextElementSibling;
                     if (nextCell) {
@@ -1786,24 +1871,36 @@ var script = {
                     break;
                 }
 
-                //enter
-                //space
-                case 13:
-                case 32: {
+                case 'PageUp': {
+                    if (event.shiftKey) return;
+                    this.navigationState = {backward: true};
+                    this.navBackward(event);
+
+                    break;
+                }
+
+                case 'PageDown': {
+                    if (event.shiftKey) return;
+                    this.navigationState = {backward: false};
+                    this.navForward(event);
+
+                    break;
+                }
+
+                case 'Enter':
+                case 'Space': {
                     this.onMonthSelect(event, index);
                     event.preventDefault();
                     break;
                 }
 
-                //escape
-                case 27: {
+                case 'Escape': {
                     this.overlayVisible = false;
                     event.preventDefault();
                     break;
                 }
 
-                //tab
-                case 9: {
+                case 'Tab': {
                     this.trapFocus(event);
                     break;
                 }
@@ -1812,14 +1909,13 @@ var script = {
         onYearCellKeydown(event, index) {
             const cell = event.currentTarget;
 
-            switch (event.which) {
-                //arrows
-                case 38:
-                case 40: {
+            switch (event.code) {
+                case 'ArrowUp':
+                case 'ArrowDown':  {
                     cell.tabIndex = '-1';
                     var cells = cell.parentElement.children;
                     var cellIndex = utils.DomHandler.index(cell);
-                    let nextCell = cells[event.which === 40 ? cellIndex + 2 : cellIndex - 2];
+                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
                     if (nextCell) {
                         nextCell.tabIndex = '0';
                         nextCell.focus();
@@ -1828,8 +1924,7 @@ var script = {
                     break;
                 }
 
-                //left arrow
-                case 37: {
+                case 'ArrowLeft': {
                     cell.tabIndex = '-1';
                     let prevCell = cell.previousElementSibling;
                     if (prevCell) {
@@ -1844,8 +1939,7 @@ var script = {
                     break;
                 }
 
-                //right arrow
-                case 39: {
+                case 'ArrowRight': {
                     cell.tabIndex = '-1';
                     let nextCell = cell.nextElementSibling;
                     if (nextCell) {
@@ -1860,24 +1954,36 @@ var script = {
                     break;
                 }
 
-                //enter
-                //space
-                case 13:
-                case 32: {
+                case 'PageUp': {
+                    if (event.shiftKey) return;
+                    this.navigationState = {backward: true};
+                    this.navBackward(event);
+
+                    break;
+                }
+
+                case 'PageDown': {
+                    if (event.shiftKey) return;
+                    this.navigationState = {backward: false};
+                    this.navForward(event);
+
+                    break;
+                }
+
+                case 'Enter':
+                case 'Space': {
                     this.onYearSelect(event, index);
                     event.preventDefault();
                     break;
                 }
 
-                //escape
-                case 27: {
+                case 'Escape': {
                     this.overlayVisible = false;
                     event.preventDefault();
                     break;
                 }
 
-                //tab
-                case 9: {
+                case 'Tab': {
                     this.trapFocus(event);
                     break;
                 }
@@ -1985,13 +2091,26 @@ var script = {
                     let focusedIndex = focusableElements.indexOf(document.activeElement);
 
                     if (event.shiftKey) {
-                        if (focusedIndex == -1 || focusedIndex === 0)
+                        if (focusedIndex === -1 || focusedIndex === 0)
                             focusableElements[focusableElements.length - 1].focus();
                         else
                             focusableElements[focusedIndex - 1].focus();
                     }
                     else {
-                        if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1))
+                        if (focusedIndex === -1) {
+                            if (this.timeOnly) {
+                                focusableElements[0].focus();
+                            }
+                            else {
+                                let spanIndex = null;
+                                for (let i = 0; i < focusableElements.length; i++){
+                                    if (focusableElements[i].tagName === 'SPAN')
+                                        spanIndex = i;
+                                }
+                                focusableElements[spanIndex].focus();
+                            }
+                        }
+                        else if (focusedIndex === (focusableElements.length - 1))
                             focusableElements[0].focus();
                         else
                             focusableElements[focusedIndex + 1].focus();
@@ -2000,14 +2119,12 @@ var script = {
             }
         },
         onContainerButtonKeydown(event) {
-            switch (event.which) {
-                //tab
-                case 9:
+            switch (event.code) {
+                case 'Tab':
                     this.trapFocus(event);
                 break;
 
-                //escape
-                case 27:
+                case 'Escape':
                     this.overlayVisible = false;
                     event.preventDefault();
                 break;
@@ -2040,22 +2157,25 @@ var script = {
             this.$emit('focus', event);
         },
         onBlur(event) {
-            this.$emit('blur', {originalEvent: event, value: this.input.value});
+            this.$emit('blur', {originalEvent: event, value: event.target.value});
 
             this.focused = false;
-            this.input.value = this.formatValue(this.modelValue);
+            event.target.value = this.formatValue(this.modelValue);
         },
         onKeyDown(event) {
-            if (event.keyCode === 40 && this.overlay) {
+            if (event.code === 'ArrowDown' && this.overlay) {
                 this.trapFocus(event);
             }
-            else if (event.keyCode === 27) {
+            else if (event.code === 'ArrowDown' && !this.overlay) {
+                this.overlayVisible = true;
+            }
+            else if (event.code === 'Escape') {
                 if (this.overlayVisible) {
                     this.overlayVisible = false;
                     event.preventDefault();
                 }
             }
-            else if (event.keyCode === 9) {
+            else if (event.code === 'Tab') {
                 if (this.overlay) {
                     utils.DomHandler.getFocusableElements(this.overlay).forEach(el => el.tabIndex = '-1');
                 }
@@ -2085,6 +2205,14 @@ var script = {
                 });
             }
         },
+        onOverlayKeyDown(event) {
+            switch (event.code) {
+                case 'Escape':
+                    this.input.focus();
+                    this.overlayVisible = false;
+                    break;
+            }
+        },
         onOverlayMouseUp(event) {
             this.onOverlayClick(event);
         },
@@ -2170,11 +2298,11 @@ var script = {
         },
         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,
-                    'p-calendar-disabled': this.$attrs.disabled,
+                    'p-calendar-disabled': this.disabled,
                     'p-inputwrapper-filled': this.modelValue,
                     'p-inputwrapper-focus': this.focused
                 }
@@ -2183,7 +2311,7 @@ var script = {
         panelStyleClass() {
             return ['p-datepicker p-component', this.panelClass, {
                 'p-datepicker-inline': this.inline,
-                'p-disabled': this.$attrs.disabled,
+                'p-disabled': this.disabled,
                 'p-datepicker-timeonly': this.timeOnly,
                 'p-datepicker-multiple-month': this.numberOfMonths > 1,
                 'p-datepicker-monthpicker': (this.currentView === 'month'),
@@ -2349,7 +2477,10 @@ var script = {
             return utils.UniqueComponentId();
         },
         switchViewButtonDisabled() {
-            return this.numberOfMonths > 1 || this.$attrs.disabled;
+            return this.numberOfMonths > 1 || this.disabled;
+        },
+        panelId() {
+            return utils.UniqueComponentId() + '_panel';
         }
     },
     components: {
@@ -2361,119 +2492,142 @@ var script = {
     }
 };
 
-const _hoisted_1 = ["readonly"];
-const _hoisted_2 = ["role"];
-const _hoisted_3 = { class: "p-datepicker-group-container" };
-const _hoisted_4 = { class: "p-datepicker-header" };
-const _hoisted_5 = ["disabled"];
-const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-datepicker-prev-icon pi pi-chevron-left" }, null, -1);
-const _hoisted_7 = [
-  _hoisted_6
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id", "placeholder", "aria-expanded", "aria-controls", "aria-labelledby", "aria-label", "readonly"];
+const _hoisted_3 = ["id", "role", "aria-modal", "aria-label"];
+const _hoisted_4 = { class: "p-datepicker-group-container" };
+const _hoisted_5 = { class: "p-datepicker-header" };
+const _hoisted_6 = ["disabled", "aria-label"];
+const _hoisted_7 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-datepicker-prev-icon pi pi-chevron-left" }, null, -1);
+const _hoisted_8 = [
+  _hoisted_7
 ];
-const _hoisted_8 = { class: "p-datepicker-title" };
-const _hoisted_9 = ["disabled"];
-const _hoisted_10 = ["disabled"];
-const _hoisted_11 = {
+const _hoisted_9 = { class: "p-datepicker-title" };
+const _hoisted_10 = ["disabled", "aria-label"];
+const _hoisted_11 = ["disabled", "aria-label"];
+const _hoisted_12 = {
   key: 2,
   class: "p-datepicker-decade"
 };
-const _hoisted_12 = ["disabled"];
-const _hoisted_13 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-datepicker-next-icon pi pi-chevron-right" }, null, -1);
-const _hoisted_14 = [
-  _hoisted_13
+const _hoisted_13 = ["disabled", "aria-label"];
+const _hoisted_14 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-datepicker-next-icon pi pi-chevron-right" }, null, -1);
+const _hoisted_15 = [
+  _hoisted_14
 ];
-const _hoisted_15 = {
+const _hoisted_16 = {
   key: 0,
   class: "p-datepicker-calendar-container"
 };
-const _hoisted_16 = { class: "p-datepicker-calendar" };
 const _hoisted_17 = {
+  class: "p-datepicker-calendar",
+  role: "grid"
+};
+const _hoisted_18 = {
   key: 0,
   scope: "col",
   class: "p-datepicker-weekheader p-disabled"
 };
-const _hoisted_18 = {
+const _hoisted_19 = ["abbr"];
+const _hoisted_20 = {
   key: 0,
   class: "p-datepicker-weeknumber"
 };
-const _hoisted_19 = { class: "p-disabled" };
-const _hoisted_20 = {
+const _hoisted_21 = { class: "p-disabled" };
+const _hoisted_22 = {
   key: 0,
   style: {"visibility":"hidden"}
 };
-const _hoisted_21 = ["onClick", "onKeydown"];
-const _hoisted_22 = {
+const _hoisted_23 = ["aria-label"];
+const _hoisted_24 = ["onClick", "onKeydown", "aria-selected"];
+const _hoisted_25 = {
+  key: 0,
+  class: "p-hidden-accessible",
+  "aria-live": "polite"
+};
+const _hoisted_26 = {
   key: 0,
   class: "p-monthpicker"
 };
-const _hoisted_23 = ["onClick", "onKeydown"];
-const _hoisted_24 = {
+const _hoisted_27 = ["onClick", "onKeydown"];
+const _hoisted_28 = {
+  key: 0,
+  class: "p-hidden-accessible",
+  "aria-live": "polite"
+};
+const _hoisted_29 = {
   key: 1,
   class: "p-yearpicker"
 };
-const _hoisted_25 = ["onClick", "onKeydown"];
-const _hoisted_26 = {
+const _hoisted_30 = ["onClick", "onKeydown"];
+const _hoisted_31 = {
+  key: 0,
+  class: "p-hidden-accessible",
+  "aria-live": "polite"
+};
+const _hoisted_32 = {
   key: 1,
   class: "p-timepicker"
 };
-const _hoisted_27 = { class: "p-hour-picker" };
-const _hoisted_28 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-up" }, null, -1);
-const _hoisted_29 = [
-  _hoisted_28
-];
-const _hoisted_30 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-down" }, null, -1);
-const _hoisted_31 = [
-  _hoisted_30
-];
-const _hoisted_32 = { class: "p-separator" };
-const _hoisted_33 = { class: "p-minute-picker" };
-const _hoisted_34 = ["disabled"];
+const _hoisted_33 = { class: "p-hour-picker" };
+const _hoisted_34 = ["aria-label"];
 const _hoisted_35 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-up" }, null, -1);
 const _hoisted_36 = [
   _hoisted_35
 ];
-const _hoisted_37 = ["disabled"];
+const _hoisted_37 = ["aria-label"];
 const _hoisted_38 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-down" }, null, -1);
 const _hoisted_39 = [
   _hoisted_38
 ];
-const _hoisted_40 = {
-  key: 0,
-  class: "p-separator"
-};
-const _hoisted_41 = {
-  key: 1,
-  class: "p-second-picker"
-};
-const _hoisted_42 = ["disabled"];
+const _hoisted_40 = { class: "p-separator" };
+const _hoisted_41 = { class: "p-minute-picker" };
+const _hoisted_42 = ["aria-label", "disabled"];
 const _hoisted_43 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-up" }, null, -1);
 const _hoisted_44 = [
   _hoisted_43
 ];
-const _hoisted_45 = ["disabled"];
+const _hoisted_45 = ["aria-label", "disabled"];
 const _hoisted_46 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-down" }, null, -1);
 const _hoisted_47 = [
   _hoisted_46
 ];
 const _hoisted_48 = {
-  key: 2,
+  key: 0,
   class: "p-separator"
 };
 const _hoisted_49 = {
-  key: 3,
-  class: "p-ampm-picker"
+  key: 1,
+  class: "p-second-picker"
 };
-const _hoisted_50 = ["disabled"];
+const _hoisted_50 = ["aria-label", "disabled"];
 const _hoisted_51 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-up" }, null, -1);
 const _hoisted_52 = [
   _hoisted_51
 ];
-const _hoisted_53 = ["disabled"];
+const _hoisted_53 = ["aria-label", "disabled"];
 const _hoisted_54 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-down" }, null, -1);
 const _hoisted_55 = [
   _hoisted_54
 ];
 const _hoisted_56 = {
+  key: 2,
+  class: "p-separator"
+};
+const _hoisted_57 = {
+  key: 3,
+  class: "p-ampm-picker"
+};
+const _hoisted_58 = ["aria-label", "disabled"];
+const _hoisted_59 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-up" }, null, -1);
+const _hoisted_60 = [
+  _hoisted_59
+];
+const _hoisted_61 = ["aria-label", "disabled"];
+const _hoisted_62 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-down" }, null, -1);
+const _hoisted_63 = [
+  _hoisted_62
+];
+const _hoisted_64 = {
   key: 2,
   class: "p-datepicker-buttonbar"
 };
@@ -2485,36 +2639,47 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (vue.openBlock(), vue.createElementBlock("span", {
     ref: "container",
-    class: vue.normalizeClass($options.containerClass),
-    style: vue.normalizeStyle($props.style)
+    id: $props.id,
+    class: vue.normalizeClass($options.containerClass)
   }, [
     (!$props.inline)
       ? (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
           key: 0,
           ref: $options.inputRef,
           type: "text",
+          role: "combobox",
+          id: $props.inputId,
           class: ['p-inputtext p-component', $props.inputClass],
           style: $props.inputStyle,
-          onInput: _cache[0] || (_cache[0] = (...args) => ($options.onInput && $options.onInput(...args)))
-        }, _ctx.$attrs, {
+          placeholder: $props.placeholder,
+          "aria-autocomplete": "none",
+          "aria-haspopup": "dialog",
+          "aria-expanded": $data.overlayVisible,
+          "aria-controls": $options.panelId,
+          "aria-labelledby": _ctx.ariaLabelledby,
+          "aria-label": _ctx.ariaLabel,
+          inputmode: "none",
+          onInput: _cache[0] || (_cache[0] = (...args) => ($options.onInput && $options.onInput(...args))),
           onFocus: _cache[1] || (_cache[1] = (...args) => ($options.onFocus && $options.onFocus(...args))),
           onBlur: _cache[2] || (_cache[2] = (...args) => ($options.onBlur && $options.onBlur(...args))),
           onKeydown: _cache[3] || (_cache[3] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
           readonly: !$props.manualInput,
-          inputmode: "none"
-        }), null, 16, _hoisted_1))
+          tabindex: 0
+        }, $props.inputProps), null, 16, _hoisted_2))
       : vue.createCommentVNode("", true),
     ($props.showIcon)
       ? (vue.openBlock(), vue.createBlock(_component_CalendarButton, {
           key: 1,
           icon: $props.icon,
-          tabindex: "-1",
           class: "p-datepicker-trigger",
-          disabled: _ctx.$attrs.disabled,
+          disabled: $props.disabled,
           onClick: $options.onButtonClick,
           type: "button",
-          "aria-label": $options.inputFieldValue
-        }, null, 8, ["icon", "disabled", "onClick", "aria-label"]))
+          "aria-label": _ctx.$primevue.config.locale.chooseDate,
+          "aria-haspopup": "dialog",
+          "aria-expanded": $data.overlayVisible,
+          "aria-controls": $options.panelId
+        }, null, 8, ["icon", "disabled", "onClick", "aria-label", "aria-expanded", "aria-controls"]))
       : vue.createCommentVNode("", true),
     vue.createVNode(_component_Portal, {
       appendTo: $props.appendTo,
@@ -2523,42 +2688,48 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       default: vue.withCtx(() => [
         vue.createVNode(vue.Transition, {
           name: "p-connected-overlay",
-          onEnter: _cache[66] || (_cache[66] = $event => ($options.onOverlayEnter($event))),
+          onEnter: _cache[67] || (_cache[67] = $event => ($options.onOverlayEnter($event))),
           onAfterEnter: $options.onOverlayEnterComplete,
           onAfterLeave: $options.onOverlayAfterLeave,
           onLeave: $options.onOverlayLeave
         }, {
           default: vue.withCtx(() => [
-            ($props.inline ? true : $data.overlayVisible)
-              ? (vue.openBlock(), vue.createElementBlock("div", {
+            ($props.inline || $data.overlayVisible)
+              ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                   key: 0,
                   ref: $options.overlayRef,
-                  class: vue.normalizeClass($options.panelStyleClass),
+                  id: $options.panelId,
+                  class: $options.panelStyleClass,
+                  style: $props.panelStyle,
                   role: $props.inline ? null : 'dialog',
+                  "aria-modal": $props.inline ? null : 'true',
+                  "aria-label": _ctx.$primevue.config.locale.chooseDate,
                   onClick: _cache[64] || (_cache[64] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
-                  onMouseup: _cache[65] || (_cache[65] = (...args) => ($options.onOverlayMouseUp && $options.onOverlayMouseUp(...args)))
-                }, [
+                  onKeydown: _cache[65] || (_cache[65] = (...args) => ($options.onOverlayKeyDown && $options.onOverlayKeyDown(...args))),
+                  onMouseup: _cache[66] || (_cache[66] = (...args) => ($options.onOverlayMouseUp && $options.onOverlayMouseUp(...args)))
+                }, $props.panelProps), [
                   (!$props.timeOnly)
                     ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                        vue.createElementVNode("div", _hoisted_3, [
+                        vue.createElementVNode("div", _hoisted_4, [
                           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.months, (month, groupIndex) => {
                             return (vue.openBlock(), vue.createElementBlock("div", {
                               class: "p-datepicker-group",
                               key: month.month + month.year
                             }, [
-                              vue.createElementVNode("div", _hoisted_4, [
+                              vue.createElementVNode("div", _hoisted_5, [
                                 vue.renderSlot(_ctx.$slots, "header"),
                                 vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                                   class: "p-datepicker-prev p-link",
                                   onClick: _cache[4] || (_cache[4] = (...args) => ($options.onPrevButtonClick && $options.onPrevButtonClick(...args))),
                                   type: "button",
                                   onKeydown: _cache[5] || (_cache[5] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                                  disabled: _ctx.$attrs.disabled
-                                }, _hoisted_7, 40, _hoisted_5)), [
-                                  [vue.vShow, groupIndex === 0],
+                                  disabled: $props.disabled,
+                                  "aria-label":  $data.currentView === 'year' ? _ctx.$primevue.config.locale.prevDecade: $data.currentView === 'month' ? _ctx.$primevue.config.locale.prevYear : _ctx.$primevue.config.locale.prevMonth
+                                }, _hoisted_8, 40, _hoisted_6)), [
+                                  [vue.vShow, $props.showOtherMonths ? groupIndex === 0 : false],
                                   [_directive_ripple]
                                 ]),
-                                vue.createElementVNode("div", _hoisted_8, [
+                                vue.createElementVNode("div", _hoisted_9, [
                                   ($data.currentView === 'date')
                                     ? (vue.openBlock(), vue.createElementBlock("button", {
                                         key: 0,
@@ -2566,8 +2737,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                         onClick: _cache[6] || (_cache[6] = (...args) => ($options.switchToMonthView && $options.switchToMonthView(...args))),
                                         onKeydown: _cache[7] || (_cache[7] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
                                         class: "p-datepicker-month p-link",
-                                        disabled: $options.switchViewButtonDisabled
-                                      }, vue.toDisplayString($options.getMonthName(month.month)), 41, _hoisted_9))
+                                        disabled: $options.switchViewButtonDisabled,
+                                        "aria-label": _ctx.$primevue.config.locale.chooseMonth
+                                      }, vue.toDisplayString($options.getMonthName(month.month)), 41, _hoisted_10))
                                     : vue.createCommentVNode("", true),
                                   ($data.currentView !== 'year')
                                     ? (vue.openBlock(), vue.createElementBlock("button", {
@@ -2576,11 +2748,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                         onClick: _cache[8] || (_cache[8] = (...args) => ($options.switchToYearView && $options.switchToYearView(...args))),
                                         onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
                                         class: "p-datepicker-year p-link",
-                                        disabled: $options.switchViewButtonDisabled
-                                      }, vue.toDisplayString($options.getYear(month)), 41, _hoisted_10))
+                                        disabled: $options.switchViewButtonDisabled,
+                                        "aria-label": _ctx.$primevue.config.locale.chooseYear
+                                      }, vue.toDisplayString($options.getYear(month)), 41, _hoisted_11))
                                     : vue.createCommentVNode("", true),
                                   ($data.currentView === 'year')
-                                    ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11, [
+                                    ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12, [
                                         vue.renderSlot(_ctx.$slots, "decade", { years: $options.yearPickerValues }, () => [
                                           vue.createTextVNode(vue.toDisplayString($options.yearPickerValues[0]) + " - " + vue.toDisplayString($options.yearPickerValues[$options.yearPickerValues.length - 1]), 1)
                                         ])
@@ -2592,29 +2765,31 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   onClick: _cache[10] || (_cache[10] = (...args) => ($options.onNextButtonClick && $options.onNextButtonClick(...args))),
                                   type: "button",
                                   onKeydown: _cache[11] || (_cache[11] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                                  disabled: _ctx.$attrs.disabled
-                                }, _hoisted_14, 40, _hoisted_12)), [
-                                  [vue.vShow, $props.numberOfMonths === 1 ? true : (groupIndex === $props.numberOfMonths - 1)],
+                                  disabled: $props.disabled,
+                                  "aria-label":  $data.currentView === 'year' ? _ctx.$primevue.config.locale.nextDecade : $data.currentView === 'month' ? _ctx.$primevue.config.locale.nextYear : _ctx.$primevue.config.locale.nextMonth
+                                }, _hoisted_15, 40, _hoisted_13)), [
+                                  [vue.vShow, $props.showOtherMonths ? $props.numberOfMonths === 1 ? true : (groupIndex === $props.numberOfMonths - 1) : false],
                                   [_directive_ripple]
                                 ])
                               ]),
                               ($data.currentView ==='date')
-                                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, [
-                                    vue.createElementVNode("table", _hoisted_16, [
+                                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, [
+                                    vue.createElementVNode("table", _hoisted_17, [
                                       vue.createElementVNode("thead", null, [
                                         vue.createElementVNode("tr", null, [
                                           ($props.showWeek)
-                                            ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_17, [
+                                            ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_18, [
                                                 vue.createElementVNode("span", null, vue.toDisplayString($options.weekHeaderLabel), 1)
                                               ]))
                                             : vue.createCommentVNode("", true),
                                           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.weekDays, (weekDay) => {
                                             return (vue.openBlock(), vue.createElementBlock("th", {
                                               scope: "col",
-                                              key: weekDay
+                                              key: weekDay,
+                                              abbr: weekDay
                                             }, [
                                               vue.createElementVNode("span", null, vue.toDisplayString(weekDay), 1)
-                                            ]))
+                                            ], 8, _hoisted_19))
                                           }), 128))
                                         ])
                                       ]),
@@ -2624,10 +2799,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                             key: week[0].day + '' + week[0].month
                                           }, [
                                             ($props.showWeek)
-                                              ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_18, [
-                                                  vue.createElementVNode("span", _hoisted_19, [
+                                              ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_20, [
+                                                  vue.createElementVNode("span", _hoisted_21, [
                                                     (month.weekNumbers[i] < 10)
-                                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_20, "0"))
+                                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_22, "0"))
                                                       : vue.createCommentVNode("", true),
                                                     vue.createTextVNode(" " + vue.toDisplayString(month.weekNumbers[i]), 1)
                                                   ])
@@ -2635,6 +2810,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                               : vue.createCommentVNode("", true),
                                             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week, (date) => {
                                               return (vue.openBlock(), vue.createElementBlock("td", {
+                                                "aria-label": date.day,
                                                 key: date.day + '' + date.month,
                                                 class: vue.normalizeClass({'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today})
                                               }, [
@@ -2642,15 +2818,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                                   class: vue.normalizeClass({'p-highlight': $options.isSelected(date), 'p-disabled': !date.selectable}),
                                                   onClick: $event => ($options.onDateSelect($event, date)),
                                                   draggable: "false",
-                                                  onKeydown: $event => ($options.onDateCellKeydown($event,date,groupIndex))
+                                                  onKeydown: $event => ($options.onDateCellKeydown($event,date,groupIndex)),
+                                                  "aria-selected": $options.isSelected(date)
                                                 }, [
                                                   vue.renderSlot(_ctx.$slots, "date", { date: date }, () => [
                                                     vue.createTextVNode(vue.toDisplayString(date.day), 1)
                                                   ])
-                                                ], 42, _hoisted_21)), [
+                                                ], 42, _hoisted_24)), [
                                                   [_directive_ripple]
-                                                ])
-                                              ], 2))
+                                                ]),
+                                                ($options.isSelected(date))
+                                                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_25, vue.toDisplayString(date.day), 1))
+                                                  : vue.createCommentVNode("", true)
+                                              ], 10, _hoisted_23))
                                             }), 128))
                                           ]))
                                         }), 128))
@@ -2662,7 +2842,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           }), 128))
                         ]),
                         ($data.currentView === 'month')
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_22, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.monthPickerValues, (m, i) => {
                                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
                                   key: m,
@@ -2670,15 +2850,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   onKeydown: $event => ($options.onMonthCellKeydown($event,i)),
                                   class: vue.normalizeClass(["p-monthpicker-month", {'p-highlight': $options.isMonthSelected(i)}])
                                 }, [
-                                  vue.createTextVNode(vue.toDisplayString(m), 1)
-                                ], 42, _hoisted_23)), [
+                                  vue.createTextVNode(vue.toDisplayString(m) + " ", 1),
+                                  ($options.isMonthSelected(i))
+                                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_28, vue.toDisplayString(m), 1))
+                                    : vue.createCommentVNode("", true)
+                                ], 42, _hoisted_27)), [
                                   [_directive_ripple]
                                 ])
                               }), 128))
                             ]))
                           : vue.createCommentVNode("", true),
                         ($data.currentView === 'year')
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_24, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_29, [
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.yearPickerValues, (y) => {
                                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
                                   key: y,
@@ -2686,8 +2869,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   onKeydown: $event => ($options.onYearCellKeydown($event,y)),
                                   class: vue.normalizeClass(["p-yearpicker-year", {'p-highlight': $options.isYearSelected(y)}])
                                 }, [
-                                  vue.createTextVNode(vue.toDisplayString(y), 1)
-                                ], 42, _hoisted_25)), [
+                                  vue.createTextVNode(vue.toDisplayString(y) + " ", 1),
+                                  ($options.isYearSelected(y))
+                                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_31, vue.toDisplayString(y), 1))
+                                    : vue.createCommentVNode("", true)
+                                ], 42, _hoisted_30)), [
                                   [_directive_ripple]
                                 ])
                               }), 128))
@@ -2696,10 +2882,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       ], 64))
                     : vue.createCommentVNode("", true),
                   (($props.showTime||$props.timeOnly) && $data.currentView === 'date')
-                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
-                        vue.createElementVNode("div", _hoisted_27, [
+                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_32, [
+                        vue.createElementVNode("div", _hoisted_33, [
                           vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                             class: "p-link",
+                            "aria-label": _ctx.$primevue.config.locale.nextHour,
                             onMousedown: _cache[12] || (_cache[12] = $event => ($options.onTimePickerElementMouseDown($event, 0, 1))),
                             onMouseup: _cache[13] || (_cache[13] = $event => ($options.onTimePickerElementMouseUp($event))),
                             onKeydown: [
@@ -2713,12 +2900,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               _cache[19] || (_cache[19] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                             ],
                             type: "button"
-                          }, _hoisted_29, 32)), [
+                          }, _hoisted_36, 40, _hoisted_34)), [
                             [_directive_ripple]
                           ]),
                           vue.createElementVNode("span", null, vue.toDisplayString($options.formattedCurrentHour), 1),
                           vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                             class: "p-link",
+                            "aria-label": _ctx.$primevue.config.locale.prevHour,
                             onMousedown: _cache[20] || (_cache[20] = $event => ($options.onTimePickerElementMouseDown($event, 0, -1))),
                             onMouseup: _cache[21] || (_cache[21] = $event => ($options.onTimePickerElementMouseUp($event))),
                             onKeydown: [
@@ -2732,16 +2920,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               _cache[27] || (_cache[27] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                             ],
                             type: "button"
-                          }, _hoisted_31, 32)), [
+                          }, _hoisted_39, 40, _hoisted_37)), [
                             [_directive_ripple]
                           ])
                         ]),
-                        vue.createElementVNode("div", _hoisted_32, [
+                        vue.createElementVNode("div", _hoisted_40, [
                           vue.createElementVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
                         ]),
-                        vue.createElementVNode("div", _hoisted_33, [
+                        vue.createElementVNode("div", _hoisted_41, [
                           vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                             class: "p-link",
+                            "aria-label": _ctx.$primevue.config.locale.nextMinute,
                             onMousedown: _cache[28] || (_cache[28] = $event => ($options.onTimePickerElementMouseDown($event, 1, 1))),
                             onMouseup: _cache[29] || (_cache[29] = $event => ($options.onTimePickerElementMouseUp($event))),
                             onKeydown: [
@@ -2749,19 +2938,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               _cache[32] || (_cache[32] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, 1)), ["enter"])),
                               _cache[33] || (_cache[33] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, 1)), ["space"]))
                             ],
-                            disabled: _ctx.$attrs.disabled,
+                            disabled: $props.disabled,
                             onMouseleave: _cache[31] || (_cache[31] = $event => ($options.onTimePickerElementMouseLeave())),
                             onKeyup: [
                               _cache[34] || (_cache[34] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
                               _cache[35] || (_cache[35] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                             ],
                             type: "button"
-                          }, _hoisted_36, 40, _hoisted_34)), [
+                          }, _hoisted_44, 40, _hoisted_42)), [
                             [_directive_ripple]
                           ]),
                           vue.createElementVNode("span", null, vue.toDisplayString($options.formattedCurrentMinute), 1),
                           vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                             class: "p-link",
+                            "aria-label": _ctx.$primevue.config.locale.prevMinute,
                             onMousedown: _cache[36] || (_cache[36] = $event => ($options.onTimePickerElementMouseDown($event, 1, -1))),
                             onMouseup: _cache[37] || (_cache[37] = $event => ($options.onTimePickerElementMouseUp($event))),
                             onKeydown: [
@@ -2769,26 +2959,27 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               _cache[40] || (_cache[40] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, -1)), ["enter"])),
                               _cache[41] || (_cache[41] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, -1)), ["space"]))
                             ],
-                            disabled: _ctx.$attrs.disabled,
+                            disabled: $props.disabled,
                             onMouseleave: _cache[39] || (_cache[39] = $event => ($options.onTimePickerElementMouseLeave())),
                             onKeyup: [
                               _cache[42] || (_cache[42] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
                               _cache[43] || (_cache[43] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                             ],
                             type: "button"
-                          }, _hoisted_39, 40, _hoisted_37)), [
+                          }, _hoisted_47, 40, _hoisted_45)), [
                             [_directive_ripple]
                           ])
                         ]),
                         ($props.showSeconds)
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_40, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_48, [
                               vue.createElementVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
                             ]))
                           : vue.createCommentVNode("", true),
                         ($props.showSeconds)
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_41, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_49, [
                               vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                                 class: "p-link",
+                                "aria-label": _ctx.$primevue.config.locale.nextSecond,
                                 onMousedown: _cache[44] || (_cache[44] = $event => ($options.onTimePickerElementMouseDown($event, 2, 1))),
                                 onMouseup: _cache[45] || (_cache[45] = $event => ($options.onTimePickerElementMouseUp($event))),
                                 onKeydown: [
@@ -2796,19 +2987,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   _cache[48] || (_cache[48] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, 1)), ["enter"])),
                                   _cache[49] || (_cache[49] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, 1)), ["space"]))
                                 ],
-                                disabled: _ctx.$attrs.disabled,
+                                disabled: $props.disabled,
                                 onMouseleave: _cache[47] || (_cache[47] = $event => ($options.onTimePickerElementMouseLeave())),
                                 onKeyup: [
                                   _cache[50] || (_cache[50] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
                                   _cache[51] || (_cache[51] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                                 ],
                                 type: "button"
-                              }, _hoisted_44, 40, _hoisted_42)), [
+                              }, _hoisted_52, 40, _hoisted_50)), [
                                 [_directive_ripple]
                               ]),
                               vue.createElementVNode("span", null, vue.toDisplayString($options.formattedCurrentSecond), 1),
                               vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                                 class: "p-link",
+                                "aria-label": _ctx.$primevue.config.locale.prevSecond,
                                 onMousedown: _cache[52] || (_cache[52] = $event => ($options.onTimePickerElementMouseDown($event, 2, -1))),
                                 onMouseup: _cache[53] || (_cache[53] = $event => ($options.onTimePickerElementMouseUp($event))),
                                 onKeydown: [
@@ -2816,40 +3008,42 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   _cache[56] || (_cache[56] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, -1)), ["enter"])),
                                   _cache[57] || (_cache[57] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, -1)), ["space"]))
                                 ],
-                                disabled: _ctx.$attrs.disabled,
+                                disabled: $props.disabled,
                                 onMouseleave: _cache[55] || (_cache[55] = $event => ($options.onTimePickerElementMouseLeave())),
                                 onKeyup: [
                                   _cache[58] || (_cache[58] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
                                   _cache[59] || (_cache[59] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
                                 ],
                                 type: "button"
-                              }, _hoisted_47, 40, _hoisted_45)), [
+                              }, _hoisted_55, 40, _hoisted_53)), [
                                 [_directive_ripple]
                               ])
                             ]))
                           : vue.createCommentVNode("", true),
                         ($props.hourFormat=='12')
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_48, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_56, [
                               vue.createElementVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
                             ]))
                           : vue.createCommentVNode("", true),
                         ($props.hourFormat=='12')
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_49, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_57, [
                               vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                                 class: "p-link",
+                                "aria-label": _ctx.$primevue.config.locale.am,
                                 onClick: _cache[60] || (_cache[60] = $event => ($options.toggleAMPM($event))),
                                 type: "button",
-                                disabled: _ctx.$attrs.disabled
-                              }, _hoisted_52, 8, _hoisted_50)), [
+                                disabled: $props.disabled
+                              }, _hoisted_60, 8, _hoisted_58)), [
                                 [_directive_ripple]
                               ]),
                               vue.createElementVNode("span", null, vue.toDisplayString($data.pm ? 'PM' : 'AM'), 1),
                               vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                                 class: "p-link",
+                                "aria-label": _ctx.$primevue.config.locale.pm,
                                 onClick: _cache[61] || (_cache[61] = $event => ($options.toggleAMPM($event))),
                                 type: "button",
-                                disabled: _ctx.$attrs.disabled
-                              }, _hoisted_55, 8, _hoisted_53)), [
+                                disabled: $props.disabled
+                              }, _hoisted_63, 8, _hoisted_61)), [
                                 [_directive_ripple]
                               ])
                             ]))
@@ -2857,7 +3051,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       ]))
                     : vue.createCommentVNode("", true),
                   ($props.showButtonBar)
-                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_56, [
+                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_64, [
                         vue.createVNode(_component_CalendarButton, {
                           type: "button",
                           label: $options.todayLabel,
@@ -2875,7 +3069,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       ]))
                     : vue.createCommentVNode("", true),
                   vue.renderSlot(_ctx.$slots, "footer")
-                ], 42, _hoisted_2))
+                ], 16, _hoisted_3))
               : vue.createCommentVNode("", true)
           ]),
           _: 3
@@ -2883,7 +3077,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 3
     }, 8, ["appendTo", "disabled"])
-  ], 6))
+  ], 10, _hoisted_1))
 }
 
 function styleInject(css, ref) {