@progress/kendo-vue-dateinputs 3.5.4-dev.202209071223 → 3.5.4-dev.202209091220

package/dist/es/dateinput/DateInput.js

@@ -136,6 +136,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() {
@@ -539,12 +553,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;
@@ -570,9 +586,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,
@@ -583,10 +599,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,
@@ -619,10 +635,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: setRef(this, 'input')
     }), defaultSlot, this.$props.spinners && h("span", {
       "class": "k-input-spinner k-spin-button",

package/dist/es/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/es/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/es/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({

package/dist/es/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]);

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dateinputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662552967,
+    publishDate: 1662725573,
     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/es/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/dateinput/DateInput.js

@@ -136,6 +136,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() {
@@ -539,12 +553,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;
@@ -570,9 +586,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,
@@ -583,10 +599,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,
@@ -619,10 +635,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: setRef(this, 'input')
     }), defaultSlot, this.$props.spinners && h("span", {
       "class": "k-input-spinner k-spin-button",

package/dist/esm/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/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({

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]);

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: 1662552967,
+    publishDate: 1662725573,
     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/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",