@progress/kendo-vue-dateinputs 3.5.3 → 3.5.4

package/dist/esm/datepicker/DatePicker.js

@@ -192,21 +192,8 @@ var DatePickerVue2 = {
       // If defaultShow is true during the initial render, the popup is not aligned.
       this.$forceUpdate();
     }
-
-    if (this._dateInput && this._dateInput.$el) {
-      this._dateInput.$el.setAttribute('aria-haspopup', 'true'); // this._dateInput.$el.setAttribute('aria-expanded', `${this.$data.currentShow}`);
-
-    }
-
-    if (this.$el) {
-      this.$el.setAttribute('aria-expanded', "".concat(this.computedShow));
-    }
   },
   updated: function updated() {
-    if (this.$el) {
-      this.$el.setAttribute('aria-expanded', "".concat(this.computedShow));
-    }
-
     if (this.$refs.calendar || this.calendarRef) {
       this._calendar = getRef(this, 'calendar');
     }
@@ -494,7 +481,11 @@ var DatePickerVue2 = {
         valid: this.validity().valid,
         validationMessage: validationMessage,
         validityStyles: validityStyles,
-        value: value
+        value: value,
+        ariaHasPopup: true,
+        ariaExpanded: show,
+        ariaRole: "combobox",
+        ariaControls: this._popupId
       },
       disabled: disabled,
       format: format,
@@ -516,7 +507,11 @@ var DatePickerVue2 = {
       valid: this.validity().valid,
       validationMessage: validationMessage,
       validityStyles: validityStyles,
-      value: value
+      value: value,
+      ariaHasPopup: true,
+      ariaExpanded: show,
+      ariaRole: "combobox",
+      ariaControls: this._popupId
     });
     var dateInputRendering = getTemplate.call(this, {
       h: h,
@@ -602,10 +597,8 @@ var DatePickerVue2 = {
       ref: setRef(this, 'kendoAnchor', this._anchor),
       role: "group",
       attrs: this.v3 ? undefined : {
-        role: "group",
-        "aria-expanded": this.computedShow
+        role: "group"
       },
-      "aria-expanded": this.computedShow,
       "class": classNames('k-input', 'k-datepicker', (_a = {}, _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a['k-focus'] = this.$data.isFocused, _a)),
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {

package/dist/esm/daterangepicker/DateRangePicker.js

@@ -275,7 +275,9 @@ var DateRangePickerVue2 = {
       rounded: rounded,
       ariaHasPopup: true,
       ariaExpanded: this.computedShow,
-      value: value.start
+      value: value.start,
+      ariaRole: 'combobox',
+      ariaControls: this._popupId
     }, this.$props.startDateInputSettings);
 
     var startDateInputDefaultRendering = h(DateInput, __assign(__assign({
@@ -312,7 +314,9 @@ var DateRangePickerVue2 = {
       valid: this.$props.valid,
       ariaHasPopup: true,
       ariaExpanded: this.computedShow,
-      value: value.end
+      value: value.end,
+      ariaRole: 'combobox',
+      ariaControls: this._popupId
     }, this.$props.endDateInputSettings);
 
     var endDateInputDefaultRendering = h(DateInput, __assign(__assign({
@@ -520,21 +524,10 @@ var DateRangePickerVue2 = {
       event.preventDefault();
     },
     handleFocus: function handleFocus(event) {
-      var startInput = this.getStartInput();
-      var endInput = this.getEndInput();
-
       if (!this.shouldFocusDateInput) {
         this.setShow(true);
       }
 
-      if (startInput) {
-        startInput.classList.add('k-focus');
-      }
-
-      if (endInput) {
-        endInput.classList.add('k-focus');
-      }
-
       this.$emit('focus', event);
     },
     calendarBlur: function calendarBlur() {
@@ -554,14 +547,6 @@ var DateRangePickerVue2 = {
 
         var endInput = _this.getEndInput();
 
-        if (startInput) {
-          startInput.classList.remove('k-focus');
-        }
-
-        if (endInput) {
-          endInput.classList.remove('k-focus');
-        }
-
         if (startInput && endInput && canUseDOM && startInput && document.activeElement !== endInput) {
           _this.setShow(false);
         }

package/dist/esm/datetimepicker/DateTimePicker.js

@@ -243,7 +243,6 @@ var DateTimePickerVue2 = {
 
     if (dateInputElement) {
       dateInputElement.setAttribute('aria-haspopup', 'true');
-      dateInputElement.setAttribute('aria-expanded', "".concat(this.computedShow));
     }
   },
   updated: function updated() {
@@ -251,10 +250,6 @@ var DateTimePickerVue2 = {
     this._dateTimeSelector = this.$refs.dateTimeSelector;
     this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
 
-    if (dateInputElement) {
-      dateInputElement.setAttribute('aria-expanded', "".concat(this.computedShow));
-    }
-
     if (this._dateTimeSelector && this.computedShow && !this._oldShow) {
       this._dateTimeSelector.focus({
         preventScroll: true
@@ -349,7 +344,11 @@ var DateTimePickerVue2 = {
         valid: this.validity().valid,
         validationMessage: validationMessage,
         validityStyles: validityStyles,
-        value: this.computedValue
+        value: this.computedValue,
+        ariaHasPopup: true,
+        ariaExpanded: this.computedShow,
+        ariaRole: "combobox",
+        ariaControls: this._popupId
       },
       disabled: disabled,
       format: format,
@@ -376,7 +375,11 @@ var DateTimePickerVue2 = {
       valid: this.validity().valid,
       validationMessage: validationMessage,
       validityStyles: validityStyles,
-      value: this.computedValue
+      value: this.computedValue,
+      ariaHasPopup: true,
+      ariaExpanded: this.computedShow,
+      ariaRole: "combobox",
+      ariaControls: this._popupId
     }, this.v3 ? function () {
       return [defaultSlot];
     } : [defaultSlot]);
@@ -428,7 +431,7 @@ var DateTimePickerVue2 = {
       onBlur: this.timeSelectorBlur,
       onKeydown: this.handleKeyDown
     });
-    var popupClassNames = classNames('k-datetime-container k-group k-reset', popupClass);
+    var popupClassNames = classNames('k-datetime-container k-reset', popupClass);
     var popup = this.$props.popup ? templateRendering.call(this, this.$props.popup, getListeners.call(this)) : undefined;
     var popupDefaultRendering = // @ts-ignore function children
     h(Popup, {
@@ -436,6 +439,7 @@ var DateTimePickerVue2 = {
       attrs: this.v3 ? undefined : {
         show: this.computedShow,
         anchor: this._anchor,
+        popupClass: popupClassNames,
         id: this._popupId,
         anchorAlign: {
           horizontal: 'left',
@@ -449,7 +453,7 @@ var DateTimePickerVue2 = {
         animate: animate
       },
       anchor: this._anchor,
-      "class": popupClassNames,
+      popupClass: popupClassNames,
       id: this._popupId,
       anchorAlign: {
         horizontal: 'left',

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dateinputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662389008,
+    publishDate: 1662729342,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/timepicker/TimePicker.js

@@ -251,8 +251,6 @@ var TimePickerVue2 = {
 
     if (this._dateInput && this._dateInput.element()) {
       this._dateInput.element().setAttribute('aria-haspopup', 'true');
-
-      this._dateInput.element().setAttribute('aria-expanded', "".concat(this.computedShow));
     }
   },
   updated: function updated() {
@@ -260,10 +258,6 @@ var TimePickerVue2 = {
     this._timeSelector = this.$refs.timeSelector;
     this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
 
-    if (this._dateInput && this._dateInput.element()) {
-      this._dateInput.element().setAttribute('aria-expanded', "".concat(this.computedShow));
-    }
-
     if (this._timeSelector && this.computedShow && !this._oldShow) {
       this._timeSelector.focusActiveList();
     } else if (this._dateInput && this._dateInput.element() && !this.computedShow && this.shouldFocusDateInput) {
@@ -357,7 +351,11 @@ var TimePickerVue2 = {
         valid: this.validity().valid,
         validationMessage: validationMessage,
         validityStyles: validityStyles,
-        value: this.computedValue && this.normalizeTime(this.computedValue)
+        value: this.computedValue && this.normalizeTime(this.computedValue),
+        ariaHasPopup: true,
+        ariaExpanded: this.computedShow,
+        ariaRole: "combobox",
+        ariaControls: this._popupId
       },
       disabled: disabled,
       format: format,
@@ -382,7 +380,11 @@ var TimePickerVue2 = {
       valid: this.validity().valid,
       validationMessage: validationMessage,
       validityStyles: validityStyles,
-      value: this.computedValue && this.normalizeTime(this.computedValue)
+      value: this.computedValue && this.normalizeTime(this.computedValue),
+      ariaHasPopup: true,
+      ariaExpanded: this.computedShow,
+      ariaRole: "combobox",
+      ariaControls: this._popupId
     }, this.v3 ? function () {
       return [defaultSlot];
     } : [defaultSlot]);

package/dist/esm/timepicker/TimeSelector.js

@@ -157,7 +157,7 @@ var TimeSelectorVue2 = {
       attrs: this.v3 ? undefined : {
         tabindex: !disabled ? tabIndex || 0 : undefined
       },
-      "class": classNames('k-timeselector k-reset', {
+      "class": classNames('k-timeselector', {
         'k-disabled': disabled
       }),
       onKeydown: this.handleKeyDown,

package/dist/npm/calendar/components/Header.js

@@ -198,7 +198,7 @@ var HeaderVue2 = {
     var titleClassNames = (0, kendo_vue_common_1.classNames)('k-calendar-title', 'k-title', {
       'k-disabled': !this.navigate
     });
-    var todayClassNames = (0, kendo_vue_common_1.classNames)('k-nav-today', {
+    var todayClassNames = (0, kendo_vue_common_1.classNames)('k-calendar-nav-today', {
       'k-disabled': !this.todayIsInRange
     });
     var headerTitle;
@@ -234,17 +234,17 @@ var HeaderVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        icon: 'arrow-60-left',
+        icon: 'chevron-left',
         size: this.$props.size,
         fillMode: 'flat',
         desabled: isPrevDisabled,
         "aria-label": prevViewTitle,
         title: prevViewTitle
       },
-      icon: 'arrow-60-left',
+      icon: 'chevron-left',
       size: this.$props.size,
       fillMode: 'flat',
-      "class": "k-prev-view",
+      "class": "k-calendar-nav-pre",
       desabled: isPrevDisabled,
       "aria-label": prevViewTitle,
       title: prevViewTitle,
@@ -269,17 +269,17 @@ var HeaderVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        icon: 'arrow-60-right',
+        icon: 'chevron-right',
         size: this.$props.size,
         fillMode: 'flat',
         desabled: isNextDisabled,
         "aria-label": nextViewTittle,
         title: nextViewTittle
       },
-      icon: 'arrow-60-right',
+      icon: 'chevron-right',
       size: this.$props.size,
       fillMode: 'flat',
-      "class": "k-next-view",
+      "class": "k-calendar-nav-next",
       desabled: isNextDisabled,
       "aria-label": nextViewTittle,
       title: nextViewTittle,

package/dist/npm/calendar/components/ViewList.js

@@ -242,7 +242,7 @@ var ViewListVue2 = {
       'k-calendar-decadeview': this.$props.activeView === main_1.CalendarViewEnum.decade,
       'k-calendar-centuryview': this.$props.activeView === main_1.CalendarViewEnum.century
     });
-    var tableClassNames = (0, kendo_vue_common_1.classNames)('k-calendar-table', 'k-content', 'k-calendar-content', {
+    var tableClassNames = (0, kendo_vue_common_1.classNames)('k-calendar-table', {
       'k-month': this.$props.activeView === main_1.CalendarViewEnum.month,
       'k-year': this.$props.activeView === main_1.CalendarViewEnum.year,
       'k-decade': this.$props.activeView === main_1.CalendarViewEnum.decade,
@@ -257,7 +257,7 @@ var ViewListVue2 = {
         "class": 'k-calendar-tr k-calendar-weekdays'
       }, [weekNames.map(function (name, idx) {
         return h("th", {
-          "class": 'k-calendar-th',
+          "class": 'k-calendar-caption',
           key: idx,
           onClick: function onClick(ev) {
             return that.handleWeekNameClick(ev, name);

package/dist/npm/dateinput/DateInput.js

@@ -156,6 +156,20 @@ var DateInputVue2 = {
     valid: {
       type: Boolean,
       default: undefined
+    },
+    ariaRole: {
+      type: String,
+      default: 'textbox'
+    },
+    ariaControls: String,
+    ariaLabel: String,
+    ariaExpanded: {
+      type: Boolean,
+      default: undefined
+    },
+    ariaHasPopup: {
+      type: Boolean,
+      default: undefined
     }
   },
   data: function data() {
@@ -559,12 +573,14 @@ var DateInputVue2 = {
         format = _a.format,
         value = _a.value,
         modelValue = _a.modelValue,
-        min = _a.min,
-        max = _a.max,
         name = _a.name,
         label = _a.label,
         id = _a.id,
-        defaultValue = _a.defaultValue;
+        ariaLabel = _a.ariaLabel,
+        ariaExpanded = _a.ariaExpanded,
+        ariaHasPopup = _a.ariaHasPopup,
+        ariaRole = _a.ariaRole,
+        ariaControls = _a.ariaControls;
     this.kendoDate.format = format;
     this.kendoDate.formatPlaceholder = formatPlaceholder;
     var currentValue = value !== undefined ? value : modelValue;
@@ -590,9 +606,9 @@ var DateInputVue2 = {
         dir: this.$props.dir
       }
     }, [h("input", {
-      role: "spinbutton",
+      role: ariaRole,
       attrs: this.v3 ? undefined : {
-        role: "spinbutton",
+        role: ariaRole,
         tabindex: this.$props.tabIndex,
         disabled: this.$props.disabled,
         title: this.$props.title !== undefined ? this.$props.title : currentText,
@@ -603,10 +619,10 @@ var DateInputVue2 = {
         id: inputId,
         placeholder: this.$props.placeholder,
         name: name,
-        "aria-valuenow": this.computedValue !== null ? this.computedValue.getTime() : undefined,
-        "aria-valuemin": min === null ? undefined : min.getTime(),
-        "aria-valuemax": max === null ? undefined : max.getTime(),
-        "aria-valuetext": currentText
+        "aria-label": ariaLabel,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-controls": ariaControls
       },
       tabindex: this.$props.tabIndex,
       disabled: this.$props.disabled,
@@ -639,10 +655,10 @@ var DateInputVue2 = {
         "value": textToDisplay
       },
       name: name,
-      "aria-valuenow": this.computedValue !== null ? this.computedValue.getTime() : undefined,
-      "aria-valuemin": min === null ? undefined : min.getTime(),
-      "aria-valuemax": max === null ? undefined : max.getTime(),
-      "aria-valuetext": currentText,
+      "aria-label": ariaLabel,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHasPopup,
+      "aria-controls": ariaControls,
       ref: (0, kendo_vue_common_1.setRef)(this, 'input')
     }), defaultSlot, this.$props.spinners && h("span", {
       "class": "k-input-spinner k-spin-button",
@@ -656,14 +672,14 @@ var DateInputVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: 'arrow-n',
+        icon: 'caret-alt-up',
         size: this.$props.size,
         fillMode: this.$props.fillMode,
         "aria-label": localizationService.toLanguageString(main_2.increaseValue, main_2.messages[main_2.increaseValue]),
         title: localizationService.toLanguageString(main_2.increaseValue, main_2.messages[main_2.increaseValue])
       },
       tabIndex: -1,
-      icon: 'arrow-n',
+      icon: 'caret-alt-up',
       size: this.$props.size,
       fillMode: this.$props.fillMode,
       "class": "k-spinner-increase",
@@ -679,7 +695,7 @@ var DateInputVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabIndex: -1,
-        icon: 'arrow-s',
+        icon: 'caret-alt-down',
         size: this.$props.size,
         fillMode: this.$props.fillMode,
         "aria-label": localizationService.toLanguageString(main_2.decreaseValue, main_2.messages[main_2.decreaseValue]),
@@ -687,7 +703,7 @@ var DateInputVue2 = {
       },
       tabIndex: -1,
       "class": "k-spinner-decrease",
-      icon: 'arrow-s',
+      icon: 'caret-alt-down',
       size: this.$props.size,
       fillMode: this.$props.fillMode,
       "aria-label": localizationService.toLanguageString(main_2.decreaseValue, main_2.messages[main_2.decreaseValue]),

package/dist/npm/dateinput/models/DateInputSettings.d.ts

@@ -64,6 +64,26 @@ export interface DateInputSettings {
      * Sets the title of the `input` element of the DateInput.
      */
     title?: string;
+    /**
+     * Sets the aria-label of the DateInput.
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the aria role of the DateInput.
+     */
+    ariaRole?: string;
+    /**
+     * Sets the aria-controls of the DateInput.
+     */
+    ariaControls?: string;
+    /**
+     * Sets the aria-haspopup of the DateInput.
+     */
+    ariaHasPopup?: boolean;
+    /**
+     * Sets the aria-expanded of the DateInput.
+     */
+    ariaExpanded?: boolean;
     /**
      * Specifies the incremental steps of the DateInput ([see example]({% slug incrementalsteps_dateinput %}).
      *

package/dist/npm/datepicker/DatePicker.js

@@ -212,21 +212,8 @@ var DatePickerVue2 = {
       // If defaultShow is true during the initial render, the popup is not aligned.
       this.$forceUpdate();
     }
-
-    if (this._dateInput && this._dateInput.$el) {
-      this._dateInput.$el.setAttribute('aria-haspopup', 'true'); // this._dateInput.$el.setAttribute('aria-expanded', `${this.$data.currentShow}`);
-
-    }
-
-    if (this.$el) {
-      this.$el.setAttribute('aria-expanded', "".concat(this.computedShow));
-    }
   },
   updated: function updated() {
-    if (this.$el) {
-      this.$el.setAttribute('aria-expanded', "".concat(this.computedShow));
-    }
-
     if (this.$refs.calendar || this.calendarRef) {
       this._calendar = (0, kendo_vue_common_1.getRef)(this, 'calendar');
     }
@@ -514,7 +501,11 @@ var DatePickerVue2 = {
         valid: this.validity().valid,
         validationMessage: validationMessage,
         validityStyles: validityStyles,
-        value: value
+        value: value,
+        ariaHasPopup: true,
+        ariaExpanded: show,
+        ariaRole: "combobox",
+        ariaControls: this._popupId
       },
       disabled: disabled,
       format: format,
@@ -536,7 +527,11 @@ var DatePickerVue2 = {
       valid: this.validity().valid,
       validationMessage: validationMessage,
       validityStyles: validityStyles,
-      value: value
+      value: value,
+      ariaHasPopup: true,
+      ariaExpanded: show,
+      ariaRole: "combobox",
+      ariaControls: this._popupId
     });
     var dateInputRendering = kendo_vue_common_1.getTemplate.call(this, {
       h: h,
@@ -622,10 +617,8 @@ var DatePickerVue2 = {
       ref: (0, kendo_vue_common_1.setRef)(this, 'kendoAnchor', this._anchor),
       role: "group",
       attrs: this.v3 ? undefined : {
-        role: "group",
-        "aria-expanded": this.computedShow
+        role: "group"
       },
-      "aria-expanded": this.computedShow,
       "class": (0, kendo_vue_common_1.classNames)('k-input', 'k-datepicker', (_a = {}, _a["k-input-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a['k-focus'] = this.$data.isFocused, _a)),
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {

package/dist/npm/daterangepicker/DateRangePicker.js

@@ -294,7 +294,9 @@ var DateRangePickerVue2 = {
       rounded: rounded,
       ariaHasPopup: true,
       ariaExpanded: this.computedShow,
-      value: value.start
+      value: value.start,
+      ariaRole: 'combobox',
+      ariaControls: this._popupId
     }, this.$props.startDateInputSettings);
 
     var startDateInputDefaultRendering = h(DateInput_1.DateInput, __assign(__assign({
@@ -331,7 +333,9 @@ var DateRangePickerVue2 = {
       valid: this.$props.valid,
       ariaHasPopup: true,
       ariaExpanded: this.computedShow,
-      value: value.end
+      value: value.end,
+      ariaRole: 'combobox',
+      ariaControls: this._popupId
     }, this.$props.endDateInputSettings);
 
     var endDateInputDefaultRendering = h(DateInput_1.DateInput, __assign(__assign({
@@ -539,21 +543,10 @@ var DateRangePickerVue2 = {
       event.preventDefault();
     },
     handleFocus: function handleFocus(event) {
-      var startInput = this.getStartInput();
-      var endInput = this.getEndInput();
-
       if (!this.shouldFocusDateInput) {
         this.setShow(true);
       }
 
-      if (startInput) {
-        startInput.classList.add('k-focus');
-      }
-
-      if (endInput) {
-        endInput.classList.add('k-focus');
-      }
-
       this.$emit('focus', event);
     },
     calendarBlur: function calendarBlur() {
@@ -573,14 +566,6 @@ var DateRangePickerVue2 = {
 
         var endInput = _this.getEndInput();
 
-        if (startInput) {
-          startInput.classList.remove('k-focus');
-        }
-
-        if (endInput) {
-          endInput.classList.remove('k-focus');
-        }
-
         if (startInput && endInput && kendo_vue_common_1.canUseDOM && startInput && document.activeElement !== endInput) {
           _this.setShow(false);
         }

package/dist/npm/datetimepicker/DateTimePicker.js

@@ -265,7 +265,6 @@ var DateTimePickerVue2 = {
 
     if (dateInputElement) {
       dateInputElement.setAttribute('aria-haspopup', 'true');
-      dateInputElement.setAttribute('aria-expanded', "".concat(this.computedShow));
     }
   },
   updated: function updated() {
@@ -273,10 +272,6 @@ var DateTimePickerVue2 = {
     this._dateTimeSelector = this.$refs.dateTimeSelector;
     this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
 
-    if (dateInputElement) {
-      dateInputElement.setAttribute('aria-expanded', "".concat(this.computedShow));
-    }
-
     if (this._dateTimeSelector && this.computedShow && !this._oldShow) {
       this._dateTimeSelector.focus({
         preventScroll: true
@@ -371,7 +366,11 @@ var DateTimePickerVue2 = {
         valid: this.validity().valid,
         validationMessage: validationMessage,
         validityStyles: validityStyles,
-        value: this.computedValue
+        value: this.computedValue,
+        ariaHasPopup: true,
+        ariaExpanded: this.computedShow,
+        ariaRole: "combobox",
+        ariaControls: this._popupId
       },
       disabled: disabled,
       format: format,
@@ -398,7 +397,11 @@ var DateTimePickerVue2 = {
       valid: this.validity().valid,
       validationMessage: validationMessage,
       validityStyles: validityStyles,
-      value: this.computedValue
+      value: this.computedValue,
+      ariaHasPopup: true,
+      ariaExpanded: this.computedShow,
+      ariaRole: "combobox",
+      ariaControls: this._popupId
     }, this.v3 ? function () {
       return [defaultSlot];
     } : [defaultSlot]);
@@ -450,7 +453,7 @@ var DateTimePickerVue2 = {
       onBlur: this.timeSelectorBlur,
       onKeydown: this.handleKeyDown
     });
-    var popupClassNames = (0, kendo_vue_common_1.classNames)('k-datetime-container k-group k-reset', popupClass);
+    var popupClassNames = (0, kendo_vue_common_1.classNames)('k-datetime-container k-reset', popupClass);
     var popup = this.$props.popup ? kendo_vue_common_1.templateRendering.call(this, this.$props.popup, kendo_vue_common_1.getListeners.call(this)) : undefined;
     var popupDefaultRendering = // @ts-ignore function children
     h(kendo_vue_popup_1.Popup, {
@@ -458,6 +461,7 @@ var DateTimePickerVue2 = {
       attrs: this.v3 ? undefined : {
         show: this.computedShow,
         anchor: this._anchor,
+        popupClass: popupClassNames,
         id: this._popupId,
         anchorAlign: {
           horizontal: 'left',
@@ -471,7 +475,7 @@ var DateTimePickerVue2 = {
         animate: animate
       },
       anchor: this._anchor,
-      "class": popupClassNames,
+      popupClass: popupClassNames,
       id: this._popupId,
       anchorAlign: {
         horizontal: 'left',

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-dateinputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662389008,
+    publishDate: 1662729342,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };