@heartlandone/vega 2.76.0 → 2.77.1

package/dist/collection/components/vega-accordion/slimmers/vega-accordion-renderer.js

@@ -49,7 +49,7 @@ export class VegaAccordionRenderer extends VegaSlimmer {
       formatAndValidResponsiveToken(this.showExpandIcon, 'display'),
     ];
     return (h("div", { class: `${arrayToClassString(classes)}` },
-      h("vega-button-circle", { size: "small", "icon-color": "text-link", variant: "icon-only", icon: VegaInternalIconManager.getIconKey(this.expandIconAlign === 'left' ? 'chevron-down' : 'chevron-up'), ref: (ref) => {
+      h("vega-button-circle", { size: "small", "icon-color": "text-link", variant: "icon-only", "data-aria-label": this.expand ? 'Collapse accordion' : 'Expand accordion', "data-aria-expanded": `${this.expand}`, icon: VegaInternalIconManager.getIconKey(this.expandIconAlign === 'left' ? 'chevron-down' : 'chevron-up'), ref: (ref) => {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
             this.expandController.flipExpand();
           });

package/dist/collection/components/vega-accordion/vega-accordion.css

@@ -166,6 +166,7 @@
 .accordion.collapsed .accordion-content {
   max-height: 0px;
   overflow: hidden;
+  display: none;
 }
 
 .accordion.collapsed .accordion-expand-icon-align-left {
@@ -188,4 +189,8 @@
 
 .icon-position-center .accordion-expand-icon {
   align-self: center;
+}
+
+.hidden {
+  display: none;
 }

package/dist/collection/components/vega-app-header-button/vega-app-header-button.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Component, Host, h, Element, Prop, State, Event, forceUpdate, Watch, } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { arrayToClassString } from '../../utils/ui';
-import { formatAndValidBackgroundColor, formatAndValidTextColor } from '../../utils/design-token';
+import { formatAndValidBackgroundColor, formatAndValidResponsiveToken, formatAndValidTextColor, } from '../../utils/design-token';
 import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
 import { LogUtility } from '../../utils/log';
 import { getCurrentBreakpoint } from '../../utils/breakpoints';
@@ -72,6 +72,12 @@ export class VegaAppHeaderButton {
      * @vegaVersion 1.11.0
      */
     this.size = 'default';
+    /**
+     * Specifies the display configuration of the app header button label.
+     *
+     * @vegaVersion 2.77.1
+     */
+    this.labelConfig = null;
     /**
      * Specifies the label or text content of the app header button.
      *
@@ -130,10 +136,22 @@ export class VegaAppHeaderButton {
         onClick: () => this.clickEventEmitter.emit() },
         this.avatarPosition === 'left' && this.renderAvatar(),
         (labelVisible || arrowDownIconVisible || this.avatarPosition === 'right') && (h("div", { class: "right-container" },
-          labelVisible && h("span", { class: "label" }, this.label),
+          labelVisible && this.renderButtonLabel(),
           this.avatarPosition === 'right' && this.renderAvatar(),
           arrowDownIconVisible && this.vegaMenuArrowIconRenderer.render()))));
     };
+    this.renderButtonLabel = () => {
+      var _a, _b;
+      return (h("vega-text", Object.assign({ class: {
+          label: true,
+        }, overflow: (_a = this.labelConfig) === null || _a === void 0 ? void 0 : _a.displayRule }, (((_b = this.labelConfig) === null || _b === void 0 ? void 0 : _b.maxWidth)
+        ? {
+          style: {
+            maxWidth: formatAndValidResponsiveToken(this.labelConfig.maxWidth, 'widthAndHeight'),
+          },
+        }
+        : {})), this.label));
+    };
     this.renderAvatar = () => {
       const isProfileType = !this.avatar.icon && (!!this.avatar.fallbackText || !!this.avatar.src);
       const shouldRenderFallbackTextAvatar = !this.avatar.src || this.avatarImgLoaded === false;
@@ -292,6 +310,30 @@ export class VegaAppHeaderButton {
       "reflect": false,
       "defaultValue": "'default'"
     },
+    "labelConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaAppHeaderLabelConfig",
+        "resolved": "{ maxWidth?: ResponsiveType<SizeType>; displayRule?: \"ellipsis\" | \"newline\"; }",
+        "references": {
+          "VegaAppHeaderLabelConfig": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.77.1"
+          }],
+        "text": "Specifies the display configuration of the app header button label."
+      },
+      "defaultValue": "null"
+    },
     "label": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/vega-button-circle/vega-button-circle.js

@@ -18,6 +18,7 @@ import { findParent } from '../../utils/ui';
 import domNodeSubjectFactory from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalFormReset, VegaInternalFormSubmit, } from '../../helpers/event-manager/event-id/vega-internal-event-id';
 import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
+import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
  * @vegaVersion 1.0.2
  */
@@ -33,6 +34,17 @@ export class VegaButtonCircle {
         }
       },
     });
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => {
+      return this.host.shadowRoot.querySelector('button');
+    }, {
+      'aria-label': {
+        dependency: ['data-aria-label', 'label'],
+        defaultValue: 'No label defined',
+      },
+      'aria-expanded': {
+        dependency: ['data-aria-expanded'],
+      },
+    });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonCircleRuntimeMetricsPayloadDefinition);
     /**
      * Specifies the size of the circular button.
@@ -116,8 +128,7 @@ export class VegaButtonCircle {
       h("vega-tooltip", { text: this.label, trigger: this.label && this.showTooltip && !this.disabled ? 'hover' : 'none', disableInteractive: (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.disableInteractive }, this.renderButton())), this.host);
   }
   renderButton() {
-    var _a;
-    return (h("button", { type: this.type, "aria-label": ((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()) || 'No label defined', class: {
+    return (h("button", { type: this.type, class: {
         [`vega-button-circle-size-${this.size}`]: true,
         [`vega-button-circle-variant-${this.variant}`]: true,
         'vega-button-circle-danger': this.danger,
@@ -243,7 +254,7 @@ export class VegaButtonCircle {
         "text": "Specifies the text to be displayed in the tooltip for the circular button\n   and sets it as the `aria-label` for accessibility."
       },
       "attribute": "label",
-      "reflect": false
+      "reflect": true
     },
     "disabled": {
       "type": "boolean",
@@ -435,6 +446,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaButtonCircle.prototype, "eventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaButtonCircle.prototype, "ariaAttributesValueMapper", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaButtonCircle.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-button-link/vega-button-link.js

@@ -13,6 +13,7 @@ import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimm
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaButtonLinkRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-button-link/runtime-metrics-payload-definition';
 import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
+import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
  * @vegaVersion 1.0.2
  */
@@ -22,6 +23,17 @@ export class VegaButtonLink {
     this.clickEventEmitter = createEventEmitSlimmer(VegaButtonLink, VegaClick);
     this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonLinkRuntimeMetricsPayloadDefinition);
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => {
+      // the target element which we will apply the aria label to this element
+      return this.host.shadowRoot.querySelector('a');
+    }, {
+      'aria-label': {
+        // meaning if data-aria-label is defined, we will use it as the value of aria-label, otherwise we will use label as the value of aria-label
+        dependency: ['data-aria-label', 'label'],
+        // meaning if the all the values in the above array are all empty or undefined, the default value will be used as the final value of aria-label
+        defaultValue: 'No label defined',
+      },
+    });
     /**
      * Specifies the URL associated with the button link.
      *   If no URL is set, the component behaves as a button and triggers the click event.
@@ -303,7 +315,7 @@ export class VegaButtonLink {
         "text": "Specifies the text displayed on the button link."
       },
       "attribute": "label",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "disabled": {
@@ -451,3 +463,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaButtonLink.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaButtonLink.prototype, "ariaAttributesValueMapper", void 0);

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-event-preview-popover-renderer.js

@@ -21,7 +21,7 @@ export class VegaCalendarEventPreviewPopoverRenderer extends VegaSlimmer {
       : this.eventItemRenderer.render(event, classMap, targetCalendarViewDate);
   }
   renderPreviewPopover(event, classMap, targetCalendarViewDate) {
-    return (h("vega-popover", { placement: this.viewMode === 'day' ? 'top' : 'right', alignment: "center", class: {
+    return (h("vega-popover", { isScreenPosition: true, placement: this.viewMode === 'day' ? 'top' : 'right', alignment: "center", class: {
         'event-preview-popover': true,
         'block': true,
       }, padding: "0", size: VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH, ref: (el) => {

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-calendar-open-state-controller.js

@@ -9,6 +9,10 @@ import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-app
 import { FeatureFlag } from '../../../../helpers/feature-control/feature-flag-controller';
 import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
 import { ClickOutsideOnlyToDismissStrategy } from '../../../../helpers/slimmers/element-appender/trigger-strategies/click-outside-only-to-dismiss-strategy';
+import { CalendarDate } from '../../../../helpers/calendar';
+import { buildDatePickerAnnouncement } from '../../../../helpers/calendar/utils';
+import { getDeepActiveElementInShadow } from '../../../../utils/ui';
+import { VegaInternalTranslation } from '../../../../helpers/translation/internal-translation-controller';
 /** The date picker element appender controller slimmer */
 export class VegaDatePickerCalendarOpenStateController extends ElementAppenderSlimmer {
   /**
@@ -88,6 +92,8 @@ export class VegaDatePickerCalendarOpenStateController extends ElementAppenderSl
   }
   /**
    * Hide calendar in both mobile and desktop mode.
+   * After hiding, focuses the input container with a temporary
+   * aria-label so the screen reader announces the selection.
    */
   async hideCalendar() {
     if (this.isMobileDevice) {
@@ -96,6 +102,7 @@ export class VegaDatePickerCalendarOpenStateController extends ElementAppenderSl
     else {
       this.hide();
     }
+    this.focusContainerWithAnnouncement();
   }
   /**
    * Update isCalendarShow state.
@@ -105,6 +112,54 @@ export class VegaDatePickerCalendarOpenStateController extends ElementAppenderSl
   updateIsCalendarShowState(isShow) {
     this.isCalendarShow = isShow;
   }
+  /**
+   * Focus the input container div with a temporary aria-label.
+   * VoiceOver always reads aria-label on programmatic .focus().
+   *
+   * The role, aria-label, and tabIndex attributes are set imperatively
+   * only during the announcement and removed on blur, so they don't
+   * interfere with VoiceOver navigation while the calendar is open.
+   */
+  focusContainerWithAnnouncement() {
+    const activeEl = getDeepActiveElementInShadow();
+    if ((activeEl === null || activeEl === void 0 ? void 0 : activeEl.matches) && activeEl.matches(':focus-visible')) {
+      const container = this.vegaDatePickerRenderer.getDatePickerContainer();
+      if (container) {
+        const announcement = this.buildAriaAnnouncement(this.value);
+        container.setAttribute('role', 'group');
+        container.setAttribute('aria-label', announcement);
+        container.setAttribute('tabindex', '-1');
+        container.addEventListener('blur', () => {
+          container.removeAttribute('role');
+          container.removeAttribute('aria-label');
+          container.removeAttribute('tabindex');
+        }, { once: true });
+        // Use setTimeout to ensure that the focus happens after the current call stack, allowing the screen reader to process the attribute changes.
+        setTimeout(() => container.focus(), 0);
+      }
+    }
+  }
+  /**
+   * Builds an aria announcement string based on the selected date value.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} value The date picker value to build announcement for
+   * @returns {string} The aria announcement string
+   */
+  buildAriaAnnouncement(value) {
+    let startDate = null;
+    let endDate = null;
+    if (this.mode === 'single' && typeof value === 'string') {
+      startDate = value ? CalendarDate.fromString(value, this.format) : null;
+    }
+    else if (this.mode === 'range' && Array.isArray(value)) {
+      startDate = value[0] ? CalendarDate.fromString(value[0], this.format) : null;
+      endDate = value[1] ? CalendarDate.fromString(value[1], this.format) : null;
+    }
+    return `
+			${buildDatePickerAnnouncement({ startDate, endDate, mode: this.mode })},
+			${VegaInternalTranslation.t('date picker')}
+		`;
+  }
   /**
    * Clear selecting state in calendar.
    */
@@ -127,6 +182,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "format", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "mode", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarOpenStateController.prototype, "isCalendarShow", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/controllers/vega-date-picker-calendar-selection-controller.js

@@ -177,6 +177,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "allowRepickController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerCalendarSelectionController.prototype, "componentWillLoad", null);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-calendar-header-render.js

@@ -30,7 +30,7 @@ export class VegaDatePickerCalendarHeaderRenderer extends VegaSlimmer {
     return (h("vega-button-circle", { class: {
         'button-previous-month': true,
         'disabled': isDisabled,
-      }, variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-left'), ref: (ref) => {
+      }, variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-left'), "data-aria-label": this.translationSlimmer.t('Previous month'), ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
           this.currentPeriodController.gotoPreviousPeriod();
         });
@@ -44,7 +44,7 @@ export class VegaDatePickerCalendarHeaderRenderer extends VegaSlimmer {
     return (h("vega-button-circle", { class: {
         'button-next-month': true,
         'disabled': isDisabled,
-      }, variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-right'), ref: (ref) => {
+      }, variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-right'), "data-aria-label": this.translationSlimmer.t('Next month'), ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
           this.currentPeriodController.gotoNextPeriod();
         });
@@ -55,7 +55,7 @@ export class VegaDatePickerCalendarHeaderRenderer extends VegaSlimmer {
     return (h("vega-button-link", { class: {
         'button-today': true,
         'with-label': hasLabel,
-      }, label: hasLabel ? this.translationSlimmer.t('Today') : '', ref: (ref) => {
+      }, "data-aria-label": this.translationSlimmer.t('Today'), label: hasLabel ? this.translationSlimmer.t('Today') : '', ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
           this.currentPeriodController.updateCalendarPeriod(new MonthPeriod(this.today, true, this.timezone));
         });

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -11,6 +11,7 @@ import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-ev
 import changeManager from '../../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalDatePickerCalendarClear } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { buildDatePickerAnnouncement } from '../../../../../helpers/calendar/utils';
 export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
   render() {
     return (h("div", { class: {
@@ -20,7 +21,8 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       h("div", { class: "container__main" },
         this.headerRenderer.render(),
         this.renderContainer(),
-        this.renderFooter())));
+        this.renderFooter()),
+      h("div", { class: "aria-announcement", "aria-live": "polite", "aria-atomic": "true" }, this.buildAnnouncement())));
   }
   renderContainer() {
     const shouldRenderRangeMonth = this.shouldRenderRangeMonth();
@@ -50,6 +52,19 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     this.clearEventEmitter.emit();
     changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarClear), {});
   }
+  /**
+   * Build aria announcement string based on current calendar selection.
+   *
+   * @returns {string} - Aria announcement string.
+   */
+  buildAnnouncement() {
+    const { startDate, endDate } = this.calendarSelection;
+    return buildDatePickerAnnouncement({
+      mode: this.mode,
+      startDate,
+      endDate,
+    });
+  }
 }
 __decorate([
   MapToComponentField()
@@ -57,6 +72,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "calendarSelection", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "monthItemRenderer", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-calendar-year-month-switcher-renderer.js

@@ -10,6 +10,7 @@ import { CalendarDate, MonthPeriod } from '../../../../../helpers/calendar';
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import { Icons } from '../../../assets/icons';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
 import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 import { MonthNames } from '../../constants';
 export class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer {
@@ -98,13 +99,13 @@ export class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer
   }
   renderCurrentMonth() {
     const label = this.translationSlimmer.t(this.currentPeriod.current.getMonthName());
-    return this.size === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-name", size: "small", label: label })) : (h("div", { class: "month-item-name" },
+    return this.size === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-name", size: "small", label: label })) : (h("div", { class: "month-item-name", role: this.showYearMonthDropdowns ? 'button' : undefined, tabIndex: this.showYearMonthDropdowns ? 0 : undefined, "aria-label": this.showYearMonthDropdowns ? label : undefined, onKeyDown: this.showYearMonthDropdowns ? createEnterKeyHandlerToTriggerClick() : undefined },
       h("span", null, label),
       this.renderDropdownSwitchIcon()));
   }
   renderCurrentYear() {
     const label = this.currentPeriod.current.year.toString();
-    return this.size === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-year", size: "small", label: label })) : (h("div", { class: "month-item-year" },
+    return this.size === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-year", size: "small", label: label })) : (h("div", { class: "month-item-year", role: this.showYearMonthDropdowns ? 'button' : undefined, tabIndex: this.showYearMonthDropdowns ? 0 : undefined, "aria-label": this.showYearMonthDropdowns ? label : undefined, onKeyDown: this.showYearMonthDropdowns ? createEnterKeyHandlerToTriggerClick() : undefined },
       h("span", null, label),
       this.renderDropdownSwitchIcon()));
   }

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-month-item-renderer.js

@@ -31,14 +31,25 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
   }
   renderWeek(periodView) {
     return (h("vega-grid", { class: "month-item-weekdays-row", column: '7-auto', row: 1 }, periodView.weekdays.map((weekDay) => {
-      return (h("div", { key: weekDay }, this.translationSlimmer.t(`${weekDay}-short`)));
+      const fullName = this.translationSlimmer.t(`${weekDay}-full`);
+      return (h("div", { key: weekDay, role: "columnheader", "aria-label": fullName }, this.translationSlimmer.t(`${weekDay}-short`)));
     })));
   }
   renderDays(periodView, period) {
     return (h("vega-grid", { class: "container__days", column: '7-auto', row: this.staticHeight ? 6 : '6-auto' }, periodView.dateItems
       .flat()
       .filter((day) => day.month <= period.current.month || day.year < period.current.year)
-      .map((day) => this.renderDay(day, period))));
+      .map((day) => this.renderItem(day, period))));
+  }
+  renderItem(day, period) {
+    const dateIndicator = this.dateIndicator(day.toDate());
+    const dayElement = this.renderDay(day, period);
+    return dateIndicator && dateIndicator.text
+      ? this.renderDayWithIndicator(dateIndicator, dayElement)
+      : dayElement;
+  }
+  renderDayWithIndicator(dateIndicator, dayElement) {
+    return h("vega-tooltip", Object.assign({}, dateIndicator), dayElement);
   }
   renderDay(day, period) {
     const isCurrentMonth = day.month === period.current.month;
@@ -59,7 +70,8 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
       /* eslint-disable-next-line react/jsx-no-bind */
       onClick: () => canInterActive && this.selectionController.onDayClick(day), 
       /* eslint-disable-next-line react/jsx-no-bind */
-      onMouseEnter: () => canInterActive && this.selectionController.onDayHover(day), onKeyDown: createEnterKeyHandlerToTriggerClick(), role: "menuitem", "aria-label": day.date, tabIndex: canInterActive ? 0 : -1 }, isCurrentMonth ? day.date : ''));
+      onMouseEnter: () => canInterActive && this.selectionController.onDayHover(day), onKeyDown: createEnterKeyHandlerToTriggerClick(), role: "menuitem", "aria-label": `${day.getMonthName()} ${day.date} ${day.year}`, "aria-hidden": isCurrentMonth ? undefined : 'true', "aria-disabled": isLockedDate || isDisabled ? 'true' : undefined, tabIndex: canInterActive ? 0 : -1 },
+      h("div", { class: "day-content" }, isCurrentMonth ? day.date : '')));
   }
   getCurrentRangeDates() {
     const startDate = this.calendarSelection.startDate;
@@ -119,6 +131,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "isDateDisabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "dateIndicator", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "isMobileDevice", void 0);