primeng 16.7.2 → 16.9.0

package/fesm2022/primeng-calendar.mjs

@@ -76,6 +76,11 @@ class Calendar {
      * @group Props
      */
     ariaLabelledBy;
+    /**
+     * Defines a string that labels the input for accessibility.
+     * @group Props
+     */
+    ariaLabel;
     /**
      * Defines a string that labels the icon button for accessibility.
      * @group Props
@@ -592,6 +597,7 @@ class Calendar {
     _responsiveOptions;
     currentView;
     attributeSelector;
+    panelId;
     _numberOfMonths = 1;
     _firstDayOfWeek;
     _view = 'date';
@@ -601,6 +607,15 @@ class Calendar {
     get locale() {
         return this._locale;
     }
+    get iconButtonAriaLabel() {
+        return this.iconAriaLabel ? this.iconAriaLabel : this.getTranslation('chooseDate');
+    }
+    get prevIconAriaLabel() {
+        return this.currentView === 'year' ? this.getTranslation('prevDecade') : this.currentView === 'month' ? this.getTranslation('prevYear') : this.getTranslation('prevMonth');
+    }
+    get nextIconAriaLabel() {
+        return this.currentView === 'year' ? this.getTranslation('nextDecade') : this.currentView === 'month' ? this.getTranslation('nextYear') : this.getTranslation('nextMonth');
+    }
     constructor(document, el, renderer, cd, zone, config, overlayService) {
         this.document = document;
         this.el = el;
@@ -613,6 +628,7 @@ class Calendar {
     }
     ngOnInit() {
         this.attributeSelector = UniqueComponentId();
+        this.panelId = this.attributeSelector + '_panel';
         const date = this.defaultDate || new Date();
         this.createResponsiveStyle();
         this.currentMonth = date.getMonth();
@@ -1344,6 +1360,7 @@ class Calendar {
                 break;
             //escape
             case 27:
+                this.inputfieldViewChild?.nativeElement.focus();
                 this.overlayVisible = false;
                 event.preventDefault();
                 break;
@@ -1359,6 +1376,7 @@ class Calendar {
         }
         else if (event.keyCode === 27) {
             if (this.overlayVisible) {
+                this.inputfieldViewChild?.nativeElement.focus();
                 this.overlayVisible = false;
                 event.preventDefault();
             }
@@ -1476,6 +1494,7 @@ class Calendar {
             }
             //escape
             case 27: {
+                this.inputfieldViewChild?.nativeElement.focus();
                 this.overlayVisible = false;
                 event.preventDefault();
                 break;
@@ -1549,6 +1568,7 @@ class Calendar {
             }
             //escape
             case 27: {
+                this.inputfieldViewChild?.nativeElement.focus();
                 this.overlayVisible = false;
                 event.preventDefault();
                 break;
@@ -1622,6 +1642,7 @@ class Calendar {
             }
             //escape
             case 27: {
+                this.inputfieldViewChild?.nativeElement.focus();
                 this.overlayVisible = false;
                 event.preventDefault();
                 break;
@@ -1781,11 +1802,23 @@ class Calendar {
                     }
                 }
                 else {
-                    if (focusedIndex == -1 || focusedIndex === focusableElements.length - 1) {
+                    if (focusedIndex == -1) {
+                        if (this.timeOnly) {
+                            focusableElements[0].focus();
+                        }
+                        else {
+                            let spanIndex = 0;
+                            for (let i = 0; i < focusableElements.length; i++) {
+                                if (focusableElements[i].tagName === 'SPAN')
+                                    spanIndex = i;
+                            }
+                            focusableElements[spanIndex].focus();
+                        }
+                    }
+                    else if (focusedIndex === focusableElements.length - 1) {
                         if (!this.focusTrap && focusedIndex != -1)
                             return this.hideOverlay();
-                        else
-                            focusableElements[0].focus();
+                        focusableElements[0].focus();
                     }
                     else {
                         focusableElements[focusedIndex + 1].focus();
@@ -2144,6 +2177,7 @@ class Calendar {
         }
     }
     hideOverlay() {
+        this.inputfieldViewChild?.nativeElement.focus();
         this.overlayVisible = false;
         this.clearTimePickerTimer();
         if (this.touchUI) {
@@ -2245,6 +2279,7 @@ class Calendar {
             DomHandler.addMultipleClasses(this.mask, maskStyleClass);
             this.maskClickListener = this.renderer.listen(this.mask, 'click', (event) => {
                 this.disableModality();
+                this.overlayVisible = false;
             });
             this.renderer.appendChild(this.document.body, this.mask);
             DomHandler.blockBodyScroll();
@@ -2273,7 +2308,7 @@ class Calendar {
             }
         }
         if (!hasBlockerMasks) {
-            DomHandler.blockBodyScroll();
+            DomHandler.unblockBodyScroll();
         }
         this.unbindAnimationEndListener();
         this.unbindMaskClickListener();
@@ -2606,8 +2641,9 @@ class Calendar {
         this.filled = (this.inputFieldValue && this.inputFieldValue != '');
     }
     onTodayButtonClick(event) {
-        let date = new Date();
-        let dateMeta = { day: date.getDate(), month: date.getMonth(), year: date.getFullYear(), otherMonth: date.getMonth() !== this.currentMonth || date.getFullYear() !== this.currentYear, today: true, selectable: true };
+        const date = new Date();
+        const dateMeta = { day: date.getDate(), month: date.getMonth(), year: date.getFullYear(), otherMonth: date.getMonth() !== this.currentMonth || date.getFullYear() !== this.currentYear, today: true, selectable: true };
+        this.createMonths(date.getMonth(), date.getFullYear());
         this.onDateSelect(event, dateMeta);
         this.onTodayClick.emit(event);
     }
@@ -2742,17 +2778,24 @@ class Calendar {
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: Calendar, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: Calendar, selector: "p-calendar", inputs: { style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", iconAriaLabel: "iconAriaLabel", disabled: "disabled", dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: "inline", showOtherMonths: "showOtherMonths", selectOtherMonths: "selectOtherMonths", showIcon: "showIcon", icon: "icon", appendTo: "appendTo", readonlyInput: "readonlyInput", shortYearCutoff: "shortYearCutoff", monthNavigator: "monthNavigator", yearNavigator: "yearNavigator", hourFormat: "hourFormat", timeOnly: "timeOnly", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond", showSeconds: "showSeconds", required: "required", showOnFocus: "showOnFocus", showWeek: "showWeek", showClear: "showClear", dataType: "dataType", selectionMode: "selectionMode", maxDateCount: "maxDateCount", showButtonBar: "showButtonBar", todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: "keepInvalid", hideOnDateTimeSelect: "hideOnDateTimeSelect", touchUI: "touchUI", timeSeparator: "timeSeparator", focusTrap: "focusTrap", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: "tabindex", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", responsiveOptions: "responsiveOptions", numberOfMonths: "numberOfMonths", firstDayOfWeek: "firstDayOfWeek", locale: "locale", view: "view", defaultDate: "defaultDate" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focus", "class.p-calendar-clearable": "showClear && !disabled" }, classAttribute: "p-element p-inputwrapper" }, providers: [CALENDAR_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: `
-        <span #container [ngClass]="{ 'p-calendar': true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled': disabled, 'p-focus': focus }" [ngStyle]="style" [class]="styleClass">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: Calendar, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: Calendar, selector: "p-calendar", inputs: { style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", iconAriaLabel: "iconAriaLabel", disabled: "disabled", dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: "inline", showOtherMonths: "showOtherMonths", selectOtherMonths: "selectOtherMonths", showIcon: "showIcon", icon: "icon", appendTo: "appendTo", readonlyInput: "readonlyInput", shortYearCutoff: "shortYearCutoff", monthNavigator: "monthNavigator", yearNavigator: "yearNavigator", hourFormat: "hourFormat", timeOnly: "timeOnly", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond", showSeconds: "showSeconds", required: "required", showOnFocus: "showOnFocus", showWeek: "showWeek", showClear: "showClear", dataType: "dataType", selectionMode: "selectionMode", maxDateCount: "maxDateCount", showButtonBar: "showButtonBar", todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: "keepInvalid", hideOnDateTimeSelect: "hideOnDateTimeSelect", touchUI: "touchUI", timeSeparator: "timeSeparator", focusTrap: "focusTrap", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: "tabindex", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", responsiveOptions: "responsiveOptions", numberOfMonths: "numberOfMonths", firstDayOfWeek: "firstDayOfWeek", locale: "locale", view: "view", defaultDate: "defaultDate" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focus", "class.p-calendar-clearable": "showClear && !disabled" }, classAttribute: "p-element p-inputwrapper" }, providers: [CALENDAR_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: `
+        <span #container [ngClass]="{ 'p-calendar': true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled': disabled, 'p-focus': focus || overlayVisible }" [ngStyle]="style" [class]="styleClass">
             <ng-template [ngIf]="!inline">
                 <input
                     #inputfield
                     type="text"
+                    role="combobox"
                     [attr.id]="inputId"
                     [attr.name]="name"
                     [attr.required]="required"
                     [attr.aria-required]="required"
+                    aria-autocomplete="none"
+                    aria-haspopup="dialog"
+                    [attr.aria-expanded]="overlayVisible"
+                    [attr.aria-controls]="panelId"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    [attr.aria-label]="ariaLabel"
                     [value]="inputFieldValue"
                     (focus)="onInputFocus($event)"
                     (keydown)="onInputKeydown($event)"
@@ -2768,7 +2811,6 @@ class Calendar {
                     [attr.inputmode]="touchUI ? 'off' : null"
                     [ngClass]="'p-inputtext p-component'"
                     autocomplete="off"
-                    [attr.aria-labelledby]="ariaLabelledBy"
                 />
                 <ng-container *ngIf="showClear && !disabled && value != null">
                     <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-calendar-clear-icon'" (click)="clear()" />
@@ -2776,7 +2818,20 @@ class Calendar {
                         <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
                     </span>
                 </ng-container>
-                <button type="button" [attr.aria-label]="iconAriaLabel" pButton pRipple *ngIf="showIcon" (click)="onButtonClick($event, inputfield)" class="p-datepicker-trigger p-button-icon-only" [disabled]="disabled" tabindex="0">
+                <button
+                    type="button"
+                    [attr.aria-label]="iconButtonAriaLabel"
+                    aria-haspopup="dialog"
+                    [attr.aria-expanded]="overlayVisible"
+                    [attr.aria-controls]="panelId"
+                    pButton
+                    pRipple
+                    *ngIf="showIcon"
+                    (click)="onButtonClick($event, inputfield)"
+                    class="p-datepicker-trigger p-button-icon-only"
+                    [disabled]="disabled"
+                    tabindex="0"
+                >
                     <span *ngIf="icon" [ngClass]="icon"></span>
                     <ng-container *ngIf="!icon">
                         <CalendarIcon *ngIf="!triggerIconTemplate" />
@@ -2802,6 +2857,9 @@ class Calendar {
                         ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }
                         : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }
                 "
+                [attr.aria-label]="getTranslation('chooseDate')"
+                [attr.role]="inline ? null : 'dialog'"
+                [attr.aria-modal]="inline ? null : 'true'"
                 [@.disabled]="inline === true"
                 (@overlayAnimation.start)="onOverlayAnimationStart($event)"
                 (@overlayAnimation.done)="onOverlayAnimationDone($event)"
@@ -2814,17 +2872,33 @@ class Calendar {
                     <div class="p-datepicker-group-container">
                         <div class="p-datepicker-group" *ngFor="let month of months; let i = index">
                             <div class="p-datepicker-header">
-                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-prev p-link" (click)="onPrevButtonClick($event)" *ngIf="i === 0" type="button" pRipple>
+                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-prev p-link" (click)="onPrevButtonClick($event)" *ngIf="i === 0" type="button" [attr.aria-label]="prevIconAriaLabel" pRipple>
                                     <ChevronLeftIcon [styleClass]="'p-datepicker-prev-icon'" *ngIf="!previousIconTemplate" />
                                     <span *ngIf="previousIconTemplate" class="p-datepicker-prev-icon">
                                         <ng-template *ngTemplateOutlet="previousIconTemplate"></ng-template>
                                     </span>
                                 </button>
                                 <div class="p-datepicker-title">
-                                    <button type="button" (click)="switchToMonthView($event)" (keydown)="onContainerButtonKeydown($event)" *ngIf="currentView === 'date'" class="p-datepicker-month p-link" [disabled]="switchViewButtonDisabled()">
+                                    <button
+                                        type="button"
+                                        (click)="switchToMonthView($event)"
+                                        (keydown)="onContainerButtonKeydown($event)"
+                                        *ngIf="currentView === 'date'"
+                                        class="p-datepicker-month p-link"
+                                        [disabled]="switchViewButtonDisabled()"
+                                        [attr.aria-label]="this.getTranslation('chooseMonth')"
+                                    >
                                         {{ getMonthName(month.month) }}
                                     </button>
-                                    <button type="button" (click)="switchToYearView($event)" (keydown)="onContainerButtonKeydown($event)" *ngIf="currentView !== 'year'" class="p-datepicker-year p-link" [disabled]="switchViewButtonDisabled()">
+                                    <button
+                                        type="button"
+                                        (click)="switchToYearView($event)"
+                                        (keydown)="onContainerButtonKeydown($event)"
+                                        *ngIf="currentView !== 'year'"
+                                        class="p-datepicker-year p-link"
+                                        [disabled]="switchViewButtonDisabled()"
+                                        [attr.aria-label]="getTranslation('chooseYear')"
+                                    >
                                         {{ getYear(month) }}
                                     </button>
                                     <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
@@ -2838,6 +2912,7 @@ class Calendar {
                                     (click)="onNextButtonClick($event)"
                                     [style.display]="numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'"
                                     type="button"
+                                    [attr.aria-label]="nextIconAriaLabel"
                                     pRipple
                                 >
                                     <ChevronRightIcon [styleClass]="'p-datepicker-next-icon'" *ngIf="!nextIconTemplate" />
@@ -2847,7 +2922,7 @@ class Calendar {
                                 </button>
                             </div>
                             <div class="p-datepicker-calendar-container" *ngIf="currentView === 'date'">
-                                <table class="p-datepicker-calendar">
+                                <table class="p-datepicker-calendar" role="grid">
                                     <thead>
                                         <tr>
                                             <th *ngIf="showWeek" class="p-datepicker-weekheader p-disabled">
@@ -2865,7 +2940,7 @@ class Calendar {
                                                     {{ month.weekNumbers[j] }}
                                                 </span>
                                             </td>
-                                            <td *ngFor="let date of week" [ngClass]="{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }">
+                                            <td *ngFor="let date of week" [attr.aria-label]="date.day" [ngClass]="{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }">
                                                 <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
                                                     <span
                                                         [ngClass]="{ 'p-highlight': isSelected(date) && date.selectable, 'p-disabled': !date.selectable }"
@@ -2882,6 +2957,9 @@ class Calendar {
                                                             <ng-container *ngTemplateOutlet="disabledDateTemplate; context: { $implicit: date }"></ng-container>
                                                         </ng-container>
                                                     </span>
+                                                    <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
+                                                        {{ date.day }}
+                                                    </div>
                                                 </ng-container>
                                             </td>
                                         </tr>
@@ -2900,6 +2978,9 @@ class Calendar {
                             pRipple
                         >
                             {{ m }}
+                            <div *ngIf="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
+                                {{ m }}
+                            </div>
                         </span>
                     </div>
                     <div class="p-yearpicker" *ngIf="currentView === 'year'">
@@ -2912,6 +2993,9 @@ class Calendar {
                             pRipple
                         >
                             {{ y }}
+                            <div *ngIf="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
+                                {{ y }}
+                            </div>
                         </span>
                     </div>
                 </ng-container>
@@ -2928,6 +3012,7 @@ class Calendar {
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextHour')"
                             pRipple
                         >
                             <ChevronUpIcon *ngIf="!incrementIconTemplate" />
@@ -2945,6 +3030,7 @@ class Calendar {
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevHour')"
                             pRipple
                         >
                             <ChevronDownIcon *ngIf="!decrementIconTemplate" />
@@ -2966,6 +3052,7 @@ class Calendar {
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextMinute')"
                             pRipple
                         >
                             <ChevronUpIcon *ngIf="!incrementIconTemplate" />
@@ -2983,6 +3070,7 @@ class Calendar {
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevMinute')"
                             pRipple
                         >
                             <ChevronDownIcon *ngIf="!decrementIconTemplate" />
@@ -3004,6 +3092,7 @@ class Calendar {
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextSecond')"
                             pRipple
                         >
                             <ChevronUpIcon *ngIf="!incrementIconTemplate" />
@@ -3021,6 +3110,7 @@ class Calendar {
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevSecond')"
                             pRipple
                         >
                             <ChevronDownIcon *ngIf="!decrementIconTemplate" />
@@ -3028,12 +3118,12 @@ class Calendar {
                         </button>
                     </div>
                     <div class="p-ampm-picker" *ngIf="hourFormat == '12'">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('am')" pRipple>
                             <ChevronUpIcon *ngIf="!incrementIconTemplate" />
                             <ng-template *ngTemplateOutlet="incrementIconTemplate"></ng-template>
                         </button>
                         <span>{{ pm ? 'PM' : 'AM' }}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('pm')" pRipple>
                             <ChevronDownIcon *ngIf="!decrementIconTemplate" />
                             <ng-template *ngTemplateOutlet="decrementIconTemplate"></ng-template>
                         </button>
@@ -3065,18 +3155,25 @@ class Calendar {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: Calendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: Calendar, decorators: [{
             type: Component,
             args: [{ selector: 'p-calendar', template: `
-        <span #container [ngClass]="{ 'p-calendar': true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled': disabled, 'p-focus': focus }" [ngStyle]="style" [class]="styleClass">
+        <span #container [ngClass]="{ 'p-calendar': true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled': disabled, 'p-focus': focus || overlayVisible }" [ngStyle]="style" [class]="styleClass">
             <ng-template [ngIf]="!inline">
                 <input
                     #inputfield
                     type="text"
+                    role="combobox"
                     [attr.id]="inputId"
                     [attr.name]="name"
                     [attr.required]="required"
                     [attr.aria-required]="required"
+                    aria-autocomplete="none"
+                    aria-haspopup="dialog"
+                    [attr.aria-expanded]="overlayVisible"
+                    [attr.aria-controls]="panelId"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    [attr.aria-label]="ariaLabel"
                     [value]="inputFieldValue"
                     (focus)="onInputFocus($event)"
                     (keydown)="onInputKeydown($event)"
@@ -3092,7 +3189,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     [attr.inputmode]="touchUI ? 'off' : null"
                     [ngClass]="'p-inputtext p-component'"
                     autocomplete="off"
-                    [attr.aria-labelledby]="ariaLabelledBy"
                 />
                 <ng-container *ngIf="showClear && !disabled && value != null">
                     <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-calendar-clear-icon'" (click)="clear()" />
@@ -3100,7 +3196,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
                     </span>
                 </ng-container>
-                <button type="button" [attr.aria-label]="iconAriaLabel" pButton pRipple *ngIf="showIcon" (click)="onButtonClick($event, inputfield)" class="p-datepicker-trigger p-button-icon-only" [disabled]="disabled" tabindex="0">
+                <button
+                    type="button"
+                    [attr.aria-label]="iconButtonAriaLabel"
+                    aria-haspopup="dialog"
+                    [attr.aria-expanded]="overlayVisible"
+                    [attr.aria-controls]="panelId"
+                    pButton
+                    pRipple
+                    *ngIf="showIcon"
+                    (click)="onButtonClick($event, inputfield)"
+                    class="p-datepicker-trigger p-button-icon-only"
+                    [disabled]="disabled"
+                    tabindex="0"
+                >
                     <span *ngIf="icon" [ngClass]="icon"></span>
                     <ng-container *ngIf="!icon">
                         <CalendarIcon *ngIf="!triggerIconTemplate" />
@@ -3126,6 +3235,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }
                         : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }
                 "
+                [attr.aria-label]="getTranslation('chooseDate')"
+                [attr.role]="inline ? null : 'dialog'"
+                [attr.aria-modal]="inline ? null : 'true'"
                 [@.disabled]="inline === true"
                 (@overlayAnimation.start)="onOverlayAnimationStart($event)"
                 (@overlayAnimation.done)="onOverlayAnimationDone($event)"
@@ -3138,17 +3250,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     <div class="p-datepicker-group-container">
                         <div class="p-datepicker-group" *ngFor="let month of months; let i = index">
                             <div class="p-datepicker-header">
-                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-prev p-link" (click)="onPrevButtonClick($event)" *ngIf="i === 0" type="button" pRipple>
+                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-prev p-link" (click)="onPrevButtonClick($event)" *ngIf="i === 0" type="button" [attr.aria-label]="prevIconAriaLabel" pRipple>
                                     <ChevronLeftIcon [styleClass]="'p-datepicker-prev-icon'" *ngIf="!previousIconTemplate" />
                                     <span *ngIf="previousIconTemplate" class="p-datepicker-prev-icon">
                                         <ng-template *ngTemplateOutlet="previousIconTemplate"></ng-template>
                                     </span>
                                 </button>
                                 <div class="p-datepicker-title">
-                                    <button type="button" (click)="switchToMonthView($event)" (keydown)="onContainerButtonKeydown($event)" *ngIf="currentView === 'date'" class="p-datepicker-month p-link" [disabled]="switchViewButtonDisabled()">
+                                    <button
+                                        type="button"
+                                        (click)="switchToMonthView($event)"
+                                        (keydown)="onContainerButtonKeydown($event)"
+                                        *ngIf="currentView === 'date'"
+                                        class="p-datepicker-month p-link"
+                                        [disabled]="switchViewButtonDisabled()"
+                                        [attr.aria-label]="this.getTranslation('chooseMonth')"
+                                    >
                                         {{ getMonthName(month.month) }}
                                     </button>
-                                    <button type="button" (click)="switchToYearView($event)" (keydown)="onContainerButtonKeydown($event)" *ngIf="currentView !== 'year'" class="p-datepicker-year p-link" [disabled]="switchViewButtonDisabled()">
+                                    <button
+                                        type="button"
+                                        (click)="switchToYearView($event)"
+                                        (keydown)="onContainerButtonKeydown($event)"
+                                        *ngIf="currentView !== 'year'"
+                                        class="p-datepicker-year p-link"
+                                        [disabled]="switchViewButtonDisabled()"
+                                        [attr.aria-label]="getTranslation('chooseYear')"
+                                    >
                                         {{ getYear(month) }}
                                     </button>
                                     <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
@@ -3162,6 +3290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                                     (click)="onNextButtonClick($event)"
                                     [style.display]="numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'"
                                     type="button"
+                                    [attr.aria-label]="nextIconAriaLabel"
                                     pRipple
                                 >
                                     <ChevronRightIcon [styleClass]="'p-datepicker-next-icon'" *ngIf="!nextIconTemplate" />
@@ -3171,7 +3300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                                 </button>
                             </div>
                             <div class="p-datepicker-calendar-container" *ngIf="currentView === 'date'">
-                                <table class="p-datepicker-calendar">
+                                <table class="p-datepicker-calendar" role="grid">
                                     <thead>
                                         <tr>
                                             <th *ngIf="showWeek" class="p-datepicker-weekheader p-disabled">
@@ -3189,7 +3318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                                                     {{ month.weekNumbers[j] }}
                                                 </span>
                                             </td>
-                                            <td *ngFor="let date of week" [ngClass]="{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }">
+                                            <td *ngFor="let date of week" [attr.aria-label]="date.day" [ngClass]="{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }">
                                                 <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
                                                     <span
                                                         [ngClass]="{ 'p-highlight': isSelected(date) && date.selectable, 'p-disabled': !date.selectable }"
@@ -3206,6 +3335,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                                                             <ng-container *ngTemplateOutlet="disabledDateTemplate; context: { $implicit: date }"></ng-container>
                                                         </ng-container>
                                                     </span>
+                                                    <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
+                                                        {{ date.day }}
+                                                    </div>
                                                 </ng-container>
                                             </td>
                                         </tr>
@@ -3224,6 +3356,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             pRipple
                         >
                             {{ m }}
+                            <div *ngIf="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
+                                {{ m }}
+                            </div>
                         </span>
                     </div>
                     <div class="p-yearpicker" *ngIf="currentView === 'year'">
@@ -3236,6 +3371,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             pRipple
                         >
                             {{ y }}
+                            <div *ngIf="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
+                                {{ y }}
+                            </div>
                         </span>
                     </div>
                 </ng-container>
@@ -3252,6 +3390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextHour')"
                             pRipple
                         >
                             <ChevronUpIcon *ngIf="!incrementIconTemplate" />
@@ -3269,6 +3408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevHour')"
                             pRipple
                         >
                             <ChevronDownIcon *ngIf="!decrementIconTemplate" />
@@ -3290,6 +3430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextMinute')"
                             pRipple
                         >
                             <ChevronUpIcon *ngIf="!incrementIconTemplate" />
@@ -3307,6 +3448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevMinute')"
                             pRipple
                         >
                             <ChevronDownIcon *ngIf="!decrementIconTemplate" />
@@ -3328,6 +3470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('nextSecond')"
                             pRipple
                         >
                             <ChevronUpIcon *ngIf="!incrementIconTemplate" />
@@ -3345,6 +3488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             (keyup.enter)="onTimePickerElementMouseUp($event)"
                             (keyup.space)="onTimePickerElementMouseUp($event)"
                             (mouseleave)="onTimePickerElementMouseLeave()"
+                            [attr.aria-label]="getTranslation('prevSecond')"
                             pRipple
                         >
                             <ChevronDownIcon *ngIf="!decrementIconTemplate" />
@@ -3352,12 +3496,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         </button>
                     </div>
                     <div class="p-ampm-picker" *ngIf="hourFormat == '12'">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('am')" pRipple>
                             <ChevronUpIcon *ngIf="!incrementIconTemplate" />
                             <ng-template *ngTemplateOutlet="incrementIconTemplate"></ng-template>
                         </button>
                         <span>{{ pm ? 'PM' : 'AM' }}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" pRipple>
+                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" [attr.aria-label]="getTranslation('pm')" pRipple>
                             <ChevronDownIcon *ngIf="!decrementIconTemplate" />
                             <ng-template *ngTemplateOutlet="decrementIconTemplate"></ng-template>
                         </button>
@@ -3412,6 +3556,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], ariaLabelledBy: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], iconAriaLabel: [{
                 type: Input
             }], disabled: [{
@@ -3560,11 +3706,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 args: ['contentWrapper', { static: false }]
             }] } });
 class CalendarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: CalendarModule, declarations: [Calendar], imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon], exports: [Calendar, ButtonModule, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CalendarModule, imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, ButtonModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: CalendarModule, declarations: [Calendar], imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon], exports: [Calendar, ButtonModule, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: CalendarModule, imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, ButtonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: CalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon],