@progress/kendo-vue-dateinputs 3.5.3 → 3.5.4

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

@@ -181,7 +181,7 @@ var HeaderVue2 = {
     var titleClassNames = classNames('k-calendar-title', 'k-title', {
       'k-disabled': !this.navigate
     });
-    var todayClassNames = classNames('k-nav-today', {
+    var todayClassNames = classNames('k-calendar-nav-today', {
       'k-disabled': !this.todayIsInRange
     });
     var headerTitle;
@@ -217,17 +217,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,
@@ -252,17 +252,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/es/calendar/components/ViewList.js

@@ -227,7 +227,7 @@ var ViewListVue2 = {
       'k-calendar-decadeview': this.$props.activeView === CalendarViewEnum.decade,
       'k-calendar-centuryview': this.$props.activeView === CalendarViewEnum.century
     });
-    var tableClassNames = classNames('k-calendar-table', 'k-content', 'k-calendar-content', {
+    var tableClassNames = classNames('k-calendar-table', {
       'k-month': this.$props.activeView === CalendarViewEnum.month,
       'k-year': this.$props.activeView === CalendarViewEnum.year,
       'k-decade': this.$props.activeView === CalendarViewEnum.decade,
@@ -242,7 +242,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/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",
@@ -636,14 +652,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(increaseValue, messages[increaseValue]),
         title: localizationService.toLanguageString(increaseValue, messages[increaseValue])
       },
       tabIndex: -1,
-      icon: 'arrow-n',
+      icon: 'caret-alt-up',
       size: this.$props.size,
       fillMode: this.$props.fillMode,
       "class": "k-spinner-increase",
@@ -659,7 +675,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(decreaseValue, messages[decreaseValue]),
@@ -667,7 +683,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(decreaseValue, messages[decreaseValue]),

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({
@@ -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/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]);
@@ -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/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: 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/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/es/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/esm/calendar/components/Header.js

@@ -181,7 +181,7 @@ var HeaderVue2 = {
     var titleClassNames = classNames('k-calendar-title', 'k-title', {
       'k-disabled': !this.navigate
     });
-    var todayClassNames = classNames('k-nav-today', {
+    var todayClassNames = classNames('k-calendar-nav-today', {
       'k-disabled': !this.todayIsInRange
     });
     var headerTitle;
@@ -217,17 +217,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,
@@ -252,17 +252,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/esm/calendar/components/ViewList.js

@@ -227,7 +227,7 @@ var ViewListVue2 = {
       'k-calendar-decadeview': this.$props.activeView === CalendarViewEnum.decade,
       'k-calendar-centuryview': this.$props.activeView === CalendarViewEnum.century
     });
-    var tableClassNames = classNames('k-calendar-table', 'k-content', 'k-calendar-content', {
+    var tableClassNames = classNames('k-calendar-table', {
       'k-month': this.$props.activeView === CalendarViewEnum.month,
       'k-year': this.$props.activeView === CalendarViewEnum.year,
       'k-decade': this.$props.activeView === CalendarViewEnum.decade,
@@ -242,7 +242,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/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",
@@ -636,14 +652,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(increaseValue, messages[increaseValue]),
         title: localizationService.toLanguageString(increaseValue, messages[increaseValue])
       },
       tabIndex: -1,
-      icon: 'arrow-n',
+      icon: 'caret-alt-up',
       size: this.$props.size,
       fillMode: this.$props.fillMode,
       "class": "k-spinner-increase",
@@ -659,7 +675,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(decreaseValue, messages[decreaseValue]),
@@ -667,7 +683,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(decreaseValue, messages[decreaseValue]),

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 %}).
      *