@progress/kendo-react-dateinputs 5.5.1-dev.202207140841 → 5.5.1-dev.202207252139

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

@@ -13,17 +13,6 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { classNames, guid, Keys, validatePackage, withPropsContext, createPropsContext } from '@progress/kendo-react-common';
@@ -315,12 +304,8 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
             'k-disabled': this.props.disabled,
             'k-week-number': this.props.weekNumber
         }, this.props.className);
-        var aria = {
-            'aria-disabled': this.props.disabled,
-            'aria-activedescendant': this.cellUID + this.focusedDate.getTime()
-        };
-        var calendarBody = [this.props.navigation && (React.createElement(Navigation, { key: 0, ref: function (el) { _this.Navigation = el; }, activeView: this.state.activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, onScroll: this.handleScroll, onChange: this.handleNavigationChange, service: this.service, dom: this.dom, navigationItem: this.props.navigationItem })), (React.createElement(ViewList, { key: 1, ref: function (el) { _this.calendarViewList = el; }, activeView: this.state.activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, bus: this.bus, shouldScroll: this.shouldScroll, onScroll: this.handleScroll, service: this.service, cell: this.props.cell, weekCell: this.props.weekCell, dom: this.dom, smoothScroll: this.props.smoothScroll, showWeekNumbers: this.props.weekNumber, onChange: this.handleDateChange, value: sanitizedValue, cellUID: this.cellUID, headerTitle: this.props.headerTitle }))];
-        return (React.createElement("div", __assign({}, aria, { ref: function (el) { _this._element = el; }, className: rootClassNames, id: this.props.id || this.id, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, role: "grid", tabIndex: !this.props.disabled ? this.props.tabIndex || 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown, onClick: this.handleClick }), calendarBody));
+        var calendarBody = [this.props.navigation && (React.createElement(Navigation, { key: 0, ref: function (el) { _this.Navigation = el; }, activeView: this.state.activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, onScroll: this.handleScroll, onChange: this.handleNavigationChange, service: this.service, dom: this.dom, navigationItem: this.props.navigationItem, tabIndex: this.props.tabIndex })), (React.createElement(ViewList, { key: 1, ref: function (el) { _this.calendarViewList = el; }, activeView: this.state.activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, bus: this.bus, shouldScroll: this.shouldScroll, onScroll: this.handleScroll, service: this.service, cell: this.props.cell, weekCell: this.props.weekCell, dom: this.dom, smoothScroll: this.props.smoothScroll, showWeekNumbers: this.props.weekNumber, onChange: this.handleDateChange, value: sanitizedValue, cellUID: this.cellUID, headerTitle: this.props.headerTitle, tabIndex: this.props.tabIndex }))];
+        return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: rootClassNames, id: this.props.id || this.id, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-disabled": this.props.disabled, tabIndex: !this.props.disabled ? this.props.tabIndex || 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown, onClick: this.handleClick }, calendarBody));
     };
     /**
      * @hidden

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

@@ -127,7 +127,7 @@ var HorizontalViewList = /** @class */ (function (_super) {
             'k-calendar-decadeview': this.props.activeView === CalendarViewEnum.decade,
             'k-calendar-centuryview': this.props.activeView === CalendarViewEnum.century
         });
-        return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: rootClassNames }, this.props.dates.map(function (date) { return (React.createElement("table", { className: "k-calendar-table k-calendar-content k-content", key: date.getTime() },
+        return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: rootClassNames }, this.props.dates.map(function (date) { return (React.createElement("table", { className: "k-calendar-table k-calendar-content k-content", key: date.getTime(), role: "grid" },
             React.createElement(View, { bus: _this.props.bus, service: _this.props.service, key: date.getTime(), direction: "horizontal", activeView: _this.props.activeView, cellUID: _this.props.cellUID, viewDate: date, min: _this.min, max: _this.max, focusedDate: _this.props.focusedDate, selectionRange: selectionRange, selectedDate: _this.props.value, showWeekNumbers: _this.weekNumber, onChange: _this.handleDateChange, onCellEnter: _this.props.onCellEnter, cell: _this.props.cell, weekCell: _this.props.weekCell }))); })));
     };
     HorizontalViewList.defaultProps = {

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

@@ -447,10 +447,6 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
             'k-disabled': this.props.disabled
         }, this.props.className);
         var visualizedRange = this.rangeWithFocused(this.selectedRange, this.focusedDate);
-        var wrapperAria = {
-            'aria-disabled': this.props.disabled,
-            'aria-activedescendant': this.cellUID + this.focusedDate.getTime()
-        };
         var prevViewTitle = this.localization.toLanguageString(prevView, messages[prevView]);
         var nextViewTittle = this.localization.toLanguageString(nextView, messages[nextView]);
         var isPrevDisabled = !this.canNavigate(Action.PrevView);
@@ -464,7 +460,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
             this.dates = this.service.datesList(this.focusedDate, this.props.views || HorizontalViewList.defaultProps.views);
         }
         var activeDate = cloneDate(this.dates && this.dates[0] ? this.dates[0] : getToday());
-        return (React.createElement("div", __assign({ ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, role: 'grid', tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, wrapperAria),
+        return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-disabled": this.props.disabled },
             React.createElement(Header, { key: ".kendo.calendar.header.".concat(activeDate.getTime()), activeView: activeView, currentDate: activeDate, min: this.min, max: this.max, rangeLength: this.props.views, bus: this.bus, service: this.service, headerTitle: this.props.headerTitle, commands: (React.createElement(React.Fragment, null,
                     React.createElement(Button, __assign({ type: "button", className: "k-nav-prev", icon: "arrow-chevron-left", fillMode: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
                     React.createElement(TodayCommand, { min: this.min, max: this.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange }),

package/dist/es/calendar/components/Navigation.d.ts

@@ -27,6 +27,7 @@ export interface NavigationProps {
     service: ViewService;
     take?: number;
     navigationItem?: React.ComponentType<CalendarNavigationItemProps>;
+    tabIndex?: number;
 }
 /**
  * @hidden
@@ -45,6 +46,7 @@ export declare class Navigation extends React.Component<NavigationProps, Navigat
         min: PropTypes.Validator<Date>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         take: PropTypes.Requireable<number>;
+        tabIndex: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         take: number;

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

@@ -141,7 +141,7 @@ var Navigation = /** @class */ (function (_super) {
             || !isEqual(focusedDate, this.lastFocus)) {
             this.indexToScroll = this.props.service.skip(focusedDate, this.props.min);
         }
-        var navigationBody = (React.createElement(Virtualization, { skip: skip, take: this.take, total: total, itemHeight: this.itemHeight, topOffset: this.topOffset, bottomOffset: this.bottomOffset, onScroll: this.props.onScroll, maxScrollDifference: this.maxViewHeight, onScrollAction: this.handleScrollAction, onMount: this.handleVirtualizationMount },
+        var navigationBody = (React.createElement(Virtualization, { skip: skip, take: this.take, total: total, itemHeight: this.itemHeight, topOffset: this.topOffset, bottomOffset: this.bottomOffset, onScroll: this.props.onScroll, maxScrollDifference: this.maxViewHeight, onScrollAction: this.handleScrollAction, onMount: this.handleVirtualizationMount, tabIndex: this.props.tabIndex },
             React.createElement("ul", { ref: function (el) { _this.list = el; }, className: "k-reset" }, dates.map(function (date) { return (_this.buildNavigationItem(date)); }))));
         return (React.createElement("div", { className: "k-calendar-navigation" },
             React.createElement("span", { className: "k-calendar-navigation-highlight" }),
@@ -156,7 +156,8 @@ var Navigation = /** @class */ (function (_super) {
         max: PropTypes.instanceOf(Date).isRequired,
         min: PropTypes.instanceOf(Date).isRequired,
         onChange: PropTypes.func,
-        take: PropTypes.number
+        take: PropTypes.number,
+        tabIndex: PropTypes.number
     };
     Navigation.defaultProps = {
         take: ITEMS_COUNT

package/dist/es/calendar/components/TodayCommand.d.ts

@@ -9,6 +9,7 @@ export interface TodayCommandProps {
     max: Date;
     onClick?: (event: HeaderEventArguments) => void;
     disabled?: boolean;
+    tabIndex?: number;
 }
 export declare class TodayCommand extends React.Component<TodayCommandProps> {
     static propTypes: {

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

@@ -74,7 +74,7 @@ var TodayCommand = /** @class */ (function (_super) {
         var todayClassNames = classNames('k-nav-today', {
             'k-disabled': this.props.disabled
         });
-        return (React.createElement("span", { className: todayClassNames, onClick: this.handleClick }, todayMessage));
+        return (React.createElement("span", { className: todayClassNames, onClick: this.handleClick, tabIndex: this.props.tabIndex }, todayMessage));
     };
     TodayCommand.propTypes = {
         max: PropTypes.instanceOf(Date).isRequired,

package/dist/es/calendar/components/ViewList.d.ts

@@ -41,6 +41,7 @@ export interface ViewListProps {
     weekCell?: React.ComponentType<CalendarWeekCellProps>;
     headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
     shouldScroll?: () => boolean;
+    tabIndex?: number;
 }
 /**
  * @hidden
@@ -67,6 +68,7 @@ export declare class ViewList extends React.Component<ViewListProps, ViewListSta
         value: PropTypes.Requireable<Date>;
         viewHeight: PropTypes.Requireable<number>;
         viewOffset: PropTypes.Requireable<number>;
+        tabIndex: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         take: number;

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

@@ -84,7 +84,7 @@ var ViewList = /** @class */ (function (_super) {
         };
         _this.buildDates = function (cols, dates) {
             var cellUID = _this.props.cellUID;
-            return (React.createElement("table", { className: "k-calendar-table", ref: function (table) { return _this.table = table; } },
+            return (React.createElement("table", { className: "k-calendar-table", ref: function (table) { return _this.table = table; }, role: "grid", "aria-activedescendant": cellUID + _this.props.focusedDate.getTime() },
                 React.createElement("colgroup", null, cols.map(function (_, idx) { return (React.createElement("col", { key: idx })); })),
                 dates.map(function (date) { return (React.createElement(View, { ref: function (el) { if (!_this.calendarView) {
                         _this.calendarView = el;
@@ -226,9 +226,9 @@ var ViewList = /** @class */ (function (_super) {
         var dates = this.buildDates(cols, this.props.service.datesList(viewDate, take));
         var viewListBody = (React.createElement(React.Fragment, null,
             React.createElement(Header, { key: "calendar-view-list-header", currentDate: activeDate, min: this.props.min, max: this.props.max, activeView: this.props.activeView, bus: this.props.bus, service: this.props.service, headerTitle: this.props.headerTitle, commands: (React.createElement(React.Fragment, null,
-                    React.createElement(TodayCommand, { min: this.props.min, max: this.props.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange }))) }),
+                    React.createElement(TodayCommand, { min: this.props.min, max: this.props.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange, tabIndex: this.props.tabIndex }))) }),
             this.props.activeView === CalendarViewEnum.month && this.buildMonthView(cols, this.weekNames),
-            React.createElement(Virtualization, { key: "calendar-view-list-content", skip: skip, take: this.take, total: total, itemHeight: this.viewHeight, topOffset: this.viewOffset, bottomOffset: this.bottomOffset, scrollOffsetSize: this.viewOffset, maxScrollDifference: this.viewHeight, onScroll: this.props.onScroll, onScrollAction: this.handleScrollAction, onMount: this.handleVirtualizationMount, children: dates })));
+            React.createElement(Virtualization, { key: "calendar-view-list-content", skip: skip, take: this.take, total: total, itemHeight: this.viewHeight, topOffset: this.viewOffset, bottomOffset: this.bottomOffset, scrollOffsetSize: this.viewOffset, maxScrollDifference: this.viewHeight, onScroll: this.props.onScroll, onScrollAction: this.handleScrollAction, onMount: this.handleVirtualizationMount, children: dates, tabIndex: this.props.tabIndex })));
         return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: rootClassNames }, this.props.dom.didCalculate ? viewListBody : null));
     };
     ViewList.propTypes = {
@@ -244,7 +244,8 @@ var ViewList = /** @class */ (function (_super) {
         take: PropTypes.number,
         value: PropTypes.instanceOf(Date),
         viewHeight: PropTypes.number,
-        viewOffset: PropTypes.number
+        viewOffset: PropTypes.number,
+        tabIndex: PropTypes.number
     };
     ViewList.defaultProps = {
         take: VIEWS_COUNT,

package/dist/es/dateinput/DateInput.d.ts

@@ -42,6 +42,14 @@ export interface DateInputProps<T extends DateInput = any> extends FormComponent
      * Indicates whether the element is currently expanded or collapsed.
      */
     ariaExpanded?: boolean;
+    /**
+     * Specifies the role of the DateInput.
+     */
+    ariaRole?: string;
+    /**
+     * Identifies the element whose contents or presence are controlled by the current element.
+     */
+    ariaControls?: string | undefined;
     /**
      * Determines the event handler that will be fired when the user edits the value ([see example]({% slug dateranges_dateinput %})).
      */
@@ -144,6 +152,7 @@ export declare class DateInputWithoutContext extends React.Component<DateInputPr
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
         ariaLabel: PropTypes.Requireable<string>;
+        ariaRole: PropTypes.Requireable<string>;
         ariaExpanded: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         validationMessage: PropTypes.Requireable<string>;

package/dist/es/dateinput/DateInput.js

@@ -254,20 +254,12 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         }
         var localizationService = provideLocalizationService(this);
         var props = __assign(__assign({}, DateInputWithoutContext.defaultProps), this.props);
-        var min = props.min, max = props.max, name = props.name, label = props.label, id = props.id;
+        var name = props.name, label = props.label, id = props.id;
         var currentText = this.text;
         var text = currentText === this.props.placeholder ? '' : currentText;
         var placeholder = currentText === this.props.placeholder ? currentText : undefined;
         var inputId = id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
-        var ariaProps = {
-            'aria-valuemin': min === null ? undefined : min.getTime(),
-            'aria-valuemax': max === null ? undefined : max.getTime(),
-            'aria-valuetext': text
-        };
-        if (this.value !== null) {
-            ariaProps['aria-valuenow'] = this.value.getTime();
-        }
         var wrapperClassesInstance = __spreadArray([], wrapperClasses, true);
         if (this.props.className) {
             wrapperClassesInstance.push(this.props.className);
@@ -285,7 +277,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
                     _b['k-required'] = _this.required,
                     _b['k-disabled'] = _this.props.disabled,
                     _b), _this.props.className), onFocus: onFocus, onBlur: onBlur },
-                React.createElement("input", __assign({ role: "spinbutton", tabIndex: _this.props.tabIndex, disabled: _this.props.disabled, title: _this.props.title !== undefined ? _this.props.title : currentText, type: "text", spellCheck: false, autoComplete: "off", autoCorrect: "off", className: "k-input-inner", id: inputId, "aria-label": _this.props.ariaLabel, "aria-labelledby": _this.props.ariaLabelledBy, "aria-describedby": _this.props.ariaDescribedBy, "aria-expanded": _this.props.ariaExpanded, "aria-haspopup": _this.props.ariaHasPopup, onWheel: _this.wheel, onClick: _this.elementClick, onInput: _this.elementChange, onPaste: _this.handlePaste, onKeyDown: _this.elementKeyDown, onChange: noop, value: text, placeholder: placeholder, name: name }, ariaProps, { ref: function (input) { return _this._element = input; } })),
+                React.createElement("input", { role: _this.props.ariaRole || 'textbox', tabIndex: _this.props.tabIndex, disabled: _this.props.disabled, title: _this.props.title !== undefined ? _this.props.title : currentText, type: "text", spellCheck: false, autoComplete: "off", autoCorrect: "off", className: "k-input-inner", id: inputId, "aria-label": _this.props.ariaLabel, "aria-labelledby": _this.props.ariaLabelledBy, "aria-describedby": _this.props.ariaDescribedBy, "aria-haspopup": _this.props.ariaHasPopup, "aria-disabled": _this.props.disabled, "aria-expanded": _this.props.ariaExpanded, "aria-controls": _this.props.ariaControls, onWheel: _this.wheel, onClick: _this.elementClick, onInput: _this.elementChange, onPaste: _this.handlePaste, onKeyDown: _this.elementKeyDown, onChange: noop, value: text, placeholder: placeholder, name: name, ref: function (input) { return _this._element = input; } }),
                 _this.props.children,
                 _this.props.spinners && (React.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: _this.spinnersMouseDown },
                     React.createElement(Button, { tabIndex: -1, type: "button", className: "k-spinner-increase", icon: 'arrow-n', "aria-label": localizationService.toLanguageString(increaseValue, messages[increaseValue]), title: localizationService.toLanguageString(increaseValue, messages[increaseValue]), onClick: _this.increasePart }),
@@ -643,6 +635,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         ariaLabelledBy: PropTypes.string,
         ariaDescribedBy: PropTypes.string,
         ariaLabel: PropTypes.string,
+        ariaRole: PropTypes.string,
         ariaExpanded: PropTypes.oneOfType([
             PropTypes.bool
         ]),

package/dist/es/datepicker/DatePicker.js

@@ -379,7 +379,6 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             value: value,
             label: undefined,
             placeholder: !this.state.focused ? this.props.placeholder : null,
-            ariaHasPopup: true,
             ariaExpanded: this.show,
             size: null,
             fillMode: null,
@@ -406,7 +405,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         var datepicker = (React.createElement(AsyncFocusBlur, { onFocus: this.handleFocus, onBlur: this.handleBlur, onSyncBlur: this.props.onBlur, onSyncFocus: this.props.onFocus }, function (_a) {
             var _b;
             var onFocus = _a.onFocus, onBlur = _a.onBlur;
-            return (React.createElement("span", { role: "group", "aria-expanded": _this.show, ref: function (span) { _this._element = span; }, className: classNames('k-input', 'k-datepicker', (_b = {},
+            return (React.createElement("span", { ref: function (span) { _this._element = span; }, className: classNames('k-input', 'k-datepicker', (_b = {},
                     _b["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
                     _b["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
                     _b["k-input-".concat(fillMode)] = fillMode,
@@ -414,8 +413,8 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
                     _b['k-required'] = _this.required,
                     _b['k-disabled'] = _this.props.disabled,
                     _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
-                React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),
-                React.createElement(_this.toggleButtonComp, { tabIndex: -1, type: "button", icon: "calendar", title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
+                React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput, ariaRole: 'combobox', ariaExpanded: _this.show, ariaHasPopup: true, ariaControls: _this._popupId }, dateInputProps)),
+                React.createElement(_this.toggleButtonComp, { type: "button", icon: "calendar", title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
                 React.createElement(_this.popupComp, __assign({}, popupProps),
                     React.createElement(_this.calendarComp, __assign({ _ref: _this.setCalendarRef }, calendarProps)))));
         }));

package/dist/es/daterangepicker/DateRangePicker.d.ts

@@ -119,6 +119,7 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
             ariaLabelledBy: PropTypes.Requireable<string>;
             ariaDescribedBy: PropTypes.Requireable<string>;
             ariaLabel: PropTypes.Requireable<string>;
+            ariaRole: PropTypes.Requireable<string>;
             ariaExpanded: PropTypes.Requireable<boolean>;
             onChange: PropTypes.Requireable<(...args: any[]) => any>;
             validationMessage: PropTypes.Requireable<string>;
@@ -127,9 +128,7 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
             valid: PropTypes.Requireable<boolean>;
             size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
             rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
-            fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>; /**
-             * Gets the wrapping element of the DateRangePicker.
-             */
+            fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>;
         }>>;
         focusedDate: PropTypes.Requireable<Date>;
         format: PropTypes.Requireable<string | PropTypes.InferProps<{

package/dist/es/daterangepicker/DateRangePicker.js

@@ -359,7 +359,7 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
             }, className: rootClassName, style: this.props.style, id: this.props.id, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: this.props.tabIndex, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown },
             this.props.startDateInput
                 ? React.createElement(this.props.startDateInput, __assign({}, startDateInputProps))
-                : React.createElement(DateInput, __assign({}, startDateInputProps, { ref: this._startDateInput })),
+                : React.createElement(DateInput, __assign({}, startDateInputProps, { ref: this._startDateInput, ariaRole: "combobox", ariaControls: this._popupId })),
             (this.props.allowReverse
                 || (this.props.calendarSettings && this.props.calendarSettings.allowReverse))
                 && this.props.swapButton
@@ -367,7 +367,7 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
                 : (separatorMessage),
             this.props.endDateInput
                 ? React.createElement(this.props.endDateInput, __assign({}, endDateInputProps))
-                : React.createElement(DateInput, __assign({}, endDateInputProps, { ref: this._endDateInput })),
+                : React.createElement(DateInput, __assign({}, endDateInputProps, { ref: this._endDateInput, ariaRole: "combobox", ariaControls: this._popupId })),
             this.props.popup
                 ? React.createElement(this.props.popup, __assign({}, popupProps), calendar)
                 : React.createElement(Popup, __assign({}, popupProps), calendar)));

package/dist/es/datetimepicker/DateTimePicker.js

@@ -340,10 +340,9 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
                     _b['k-required'] = _this.required,
                     _b['k-disabled'] = _this.props.disabled,
                     _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
-                React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dataInputProps)),
+                React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput, ariaRole: "combobox", ariaControls: _this._popupId }, dataInputProps)),
                 React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: provideLocalizationService(_this)
                         .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]), className: "k-input-button", rounded: null }, {
-                    'aria-controls': _this._popupId,
                     'aria-label': provideLocalizationService(_this)
                         .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
                 })),

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dateinputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1657786816,
+    publishDate: 1658784095,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/timepicker/TimePicker.js

@@ -380,9 +380,8 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
                     _b['k-required'] = _this.required,
                     _b['k-disabled'] = _this.props.disabled,
                     _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
-                React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),
+                React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput, ariaRole: "combobox", ariaControls: _this._popupId }, dateInputProps)),
                 React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'clock', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, className: "k-input-button", rounded: null }, {
-                    'aria-controls': _this._popupId,
                     'aria-label': toggleClockMessage
                 })),
                 _this.props.popup

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

@@ -14,17 +14,6 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calendar = exports.CalendarPropsContext = exports.CalendarWithoutContext = void 0;
 var React = require("react");
@@ -318,12 +307,8 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
             'k-disabled': this.props.disabled,
             'k-week-number': this.props.weekNumber
         }, this.props.className);
-        var aria = {
-            'aria-disabled': this.props.disabled,
-            'aria-activedescendant': this.cellUID + this.focusedDate.getTime()
-        };
-        var calendarBody = [this.props.navigation && (React.createElement(Navigation_1.Navigation, { key: 0, ref: function (el) { _this.Navigation = el; }, activeView: this.state.activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, onScroll: this.handleScroll, onChange: this.handleNavigationChange, service: this.service, dom: this.dom, navigationItem: this.props.navigationItem })), (React.createElement(ViewList_1.ViewList, { key: 1, ref: function (el) { _this.calendarViewList = el; }, activeView: this.state.activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, bus: this.bus, shouldScroll: this.shouldScroll, onScroll: this.handleScroll, service: this.service, cell: this.props.cell, weekCell: this.props.weekCell, dom: this.dom, smoothScroll: this.props.smoothScroll, showWeekNumbers: this.props.weekNumber, onChange: this.handleDateChange, value: sanitizedValue, cellUID: this.cellUID, headerTitle: this.props.headerTitle }))];
-        return (React.createElement("div", __assign({}, aria, { ref: function (el) { _this._element = el; }, className: rootClassNames, id: this.props.id || this.id, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, role: "grid", tabIndex: !this.props.disabled ? this.props.tabIndex || 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown, onClick: this.handleClick }), calendarBody));
+        var calendarBody = [this.props.navigation && (React.createElement(Navigation_1.Navigation, { key: 0, ref: function (el) { _this.Navigation = el; }, activeView: this.state.activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, onScroll: this.handleScroll, onChange: this.handleNavigationChange, service: this.service, dom: this.dom, navigationItem: this.props.navigationItem, tabIndex: this.props.tabIndex })), (React.createElement(ViewList_1.ViewList, { key: 1, ref: function (el) { _this.calendarViewList = el; }, activeView: this.state.activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, bus: this.bus, shouldScroll: this.shouldScroll, onScroll: this.handleScroll, service: this.service, cell: this.props.cell, weekCell: this.props.weekCell, dom: this.dom, smoothScroll: this.props.smoothScroll, showWeekNumbers: this.props.weekNumber, onChange: this.handleDateChange, value: sanitizedValue, cellUID: this.cellUID, headerTitle: this.props.headerTitle, tabIndex: this.props.tabIndex }))];
+        return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: rootClassNames, id: this.props.id || this.id, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-disabled": this.props.disabled, tabIndex: !this.props.disabled ? this.props.tabIndex || 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown, onClick: this.handleClick }, calendarBody));
     };
     /**
      * @hidden

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

@@ -130,7 +130,7 @@ var HorizontalViewList = /** @class */ (function (_super) {
             'k-calendar-decadeview': this.props.activeView === models_1.CalendarViewEnum.decade,
             'k-calendar-centuryview': this.props.activeView === models_1.CalendarViewEnum.century
         });
-        return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: rootClassNames }, this.props.dates.map(function (date) { return (React.createElement("table", { className: "k-calendar-table k-calendar-content k-content", key: date.getTime() },
+        return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: rootClassNames }, this.props.dates.map(function (date) { return (React.createElement("table", { className: "k-calendar-table k-calendar-content k-content", key: date.getTime(), role: "grid" },
             React.createElement(View_1.View, { bus: _this.props.bus, service: _this.props.service, key: date.getTime(), direction: "horizontal", activeView: _this.props.activeView, cellUID: _this.props.cellUID, viewDate: date, min: _this.min, max: _this.max, focusedDate: _this.props.focusedDate, selectionRange: selectionRange, selectedDate: _this.props.value, showWeekNumbers: _this.weekNumber, onChange: _this.handleDateChange, onCellEnter: _this.props.onCellEnter, cell: _this.props.cell, weekCell: _this.props.weekCell }))); })));
     };
     HorizontalViewList.defaultProps = {

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

@@ -450,10 +450,6 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
             'k-disabled': this.props.disabled
         }, this.props.className);
         var visualizedRange = this.rangeWithFocused(this.selectedRange, this.focusedDate);
-        var wrapperAria = {
-            'aria-disabled': this.props.disabled,
-            'aria-activedescendant': this.cellUID + this.focusedDate.getTime()
-        };
         var prevViewTitle = this.localization.toLanguageString(messages_1.prevView, messages_1.messages[messages_1.prevView]);
         var nextViewTittle = this.localization.toLanguageString(messages_1.nextView, messages_1.messages[messages_1.nextView]);
         var isPrevDisabled = !this.canNavigate(models_1.Action.PrevView);
@@ -467,7 +463,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
             this.dates = this.service.datesList(this.focusedDate, this.props.views || HorizontalViewList_1.HorizontalViewList.defaultProps.views);
         }
         var activeDate = (0, kendo_date_math_1.cloneDate)(this.dates && this.dates[0] ? this.dates[0] : (0, utils_1.getToday)());
-        return (React.createElement("div", __assign({ ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, role: 'grid', tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, wrapperAria),
+        return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-disabled": this.props.disabled },
             React.createElement(Header_1.Header, { key: ".kendo.calendar.header.".concat(activeDate.getTime()), activeView: activeView, currentDate: activeDate, min: this.min, max: this.max, rangeLength: this.props.views, bus: this.bus, service: this.service, headerTitle: this.props.headerTitle, commands: (React.createElement(React.Fragment, null,
                     React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-nav-prev", icon: "arrow-chevron-left", fillMode: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
                     React.createElement(TodayCommand_1.TodayCommand, { min: this.min, max: this.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange }),

package/dist/npm/calendar/components/Navigation.d.ts

@@ -27,6 +27,7 @@ export interface NavigationProps {
     service: ViewService;
     take?: number;
     navigationItem?: React.ComponentType<CalendarNavigationItemProps>;
+    tabIndex?: number;
 }
 /**
  * @hidden
@@ -45,6 +46,7 @@ export declare class Navigation extends React.Component<NavigationProps, Navigat
         min: PropTypes.Validator<Date>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         take: PropTypes.Requireable<number>;
+        tabIndex: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         take: number;

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

@@ -144,7 +144,7 @@ var Navigation = /** @class */ (function (_super) {
             || !(0, kendo_date_math_1.isEqual)(focusedDate, this.lastFocus)) {
             this.indexToScroll = this.props.service.skip(focusedDate, this.props.min);
         }
-        var navigationBody = (React.createElement(Virtualization_1.Virtualization, { skip: skip, take: this.take, total: total, itemHeight: this.itemHeight, topOffset: this.topOffset, bottomOffset: this.bottomOffset, onScroll: this.props.onScroll, maxScrollDifference: this.maxViewHeight, onScrollAction: this.handleScrollAction, onMount: this.handleVirtualizationMount },
+        var navigationBody = (React.createElement(Virtualization_1.Virtualization, { skip: skip, take: this.take, total: total, itemHeight: this.itemHeight, topOffset: this.topOffset, bottomOffset: this.bottomOffset, onScroll: this.props.onScroll, maxScrollDifference: this.maxViewHeight, onScrollAction: this.handleScrollAction, onMount: this.handleVirtualizationMount, tabIndex: this.props.tabIndex },
             React.createElement("ul", { ref: function (el) { _this.list = el; }, className: "k-reset" }, dates.map(function (date) { return (_this.buildNavigationItem(date)); }))));
         return (React.createElement("div", { className: "k-calendar-navigation" },
             React.createElement("span", { className: "k-calendar-navigation-highlight" }),
@@ -159,7 +159,8 @@ var Navigation = /** @class */ (function (_super) {
         max: PropTypes.instanceOf(Date).isRequired,
         min: PropTypes.instanceOf(Date).isRequired,
         onChange: PropTypes.func,
-        take: PropTypes.number
+        take: PropTypes.number,
+        tabIndex: PropTypes.number
     };
     Navigation.defaultProps = {
         take: ITEMS_COUNT

package/dist/npm/calendar/components/TodayCommand.d.ts

@@ -9,6 +9,7 @@ export interface TodayCommandProps {
     max: Date;
     onClick?: (event: HeaderEventArguments) => void;
     disabled?: boolean;
+    tabIndex?: number;
 }
 export declare class TodayCommand extends React.Component<TodayCommandProps> {
     static propTypes: {

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

@@ -77,7 +77,7 @@ var TodayCommand = /** @class */ (function (_super) {
         var todayClassNames = (0, kendo_react_common_1.classNames)('k-nav-today', {
             'k-disabled': this.props.disabled
         });
-        return (React.createElement("span", { className: todayClassNames, onClick: this.handleClick }, todayMessage));
+        return (React.createElement("span", { className: todayClassNames, onClick: this.handleClick, tabIndex: this.props.tabIndex }, todayMessage));
     };
     TodayCommand.propTypes = {
         max: PropTypes.instanceOf(Date).isRequired,

package/dist/npm/calendar/components/ViewList.d.ts

@@ -41,6 +41,7 @@ export interface ViewListProps {
     weekCell?: React.ComponentType<CalendarWeekCellProps>;
     headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
     shouldScroll?: () => boolean;
+    tabIndex?: number;
 }
 /**
  * @hidden
@@ -67,6 +68,7 @@ export declare class ViewList extends React.Component<ViewListProps, ViewListSta
         value: PropTypes.Requireable<Date>;
         viewHeight: PropTypes.Requireable<number>;
         viewOffset: PropTypes.Requireable<number>;
+        tabIndex: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         take: number;

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

@@ -87,7 +87,7 @@ var ViewList = /** @class */ (function (_super) {
         };
         _this.buildDates = function (cols, dates) {
             var cellUID = _this.props.cellUID;
-            return (React.createElement("table", { className: "k-calendar-table", ref: function (table) { return _this.table = table; } },
+            return (React.createElement("table", { className: "k-calendar-table", ref: function (table) { return _this.table = table; }, role: "grid", "aria-activedescendant": cellUID + _this.props.focusedDate.getTime() },
                 React.createElement("colgroup", null, cols.map(function (_, idx) { return (React.createElement("col", { key: idx })); })),
                 dates.map(function (date) { return (React.createElement(View_1.View, { ref: function (el) { if (!_this.calendarView) {
                         _this.calendarView = el;
@@ -229,9 +229,9 @@ var ViewList = /** @class */ (function (_super) {
         var dates = this.buildDates(cols, this.props.service.datesList(viewDate, take));
         var viewListBody = (React.createElement(React.Fragment, null,
             React.createElement(Header_1.Header, { key: "calendar-view-list-header", currentDate: activeDate, min: this.props.min, max: this.props.max, activeView: this.props.activeView, bus: this.props.bus, service: this.props.service, headerTitle: this.props.headerTitle, commands: (React.createElement(React.Fragment, null,
-                    React.createElement(TodayCommand_1.TodayCommand, { min: this.props.min, max: this.props.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange }))) }),
+                    React.createElement(TodayCommand_1.TodayCommand, { min: this.props.min, max: this.props.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange, tabIndex: this.props.tabIndex }))) }),
             this.props.activeView === models_1.CalendarViewEnum.month && this.buildMonthView(cols, this.weekNames),
-            React.createElement(Virtualization_1.Virtualization, { key: "calendar-view-list-content", skip: skip, take: this.take, total: total, itemHeight: this.viewHeight, topOffset: this.viewOffset, bottomOffset: this.bottomOffset, scrollOffsetSize: this.viewOffset, maxScrollDifference: this.viewHeight, onScroll: this.props.onScroll, onScrollAction: this.handleScrollAction, onMount: this.handleVirtualizationMount, children: dates })));
+            React.createElement(Virtualization_1.Virtualization, { key: "calendar-view-list-content", skip: skip, take: this.take, total: total, itemHeight: this.viewHeight, topOffset: this.viewOffset, bottomOffset: this.bottomOffset, scrollOffsetSize: this.viewOffset, maxScrollDifference: this.viewHeight, onScroll: this.props.onScroll, onScrollAction: this.handleScrollAction, onMount: this.handleVirtualizationMount, children: dates, tabIndex: this.props.tabIndex })));
         return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: rootClassNames }, this.props.dom.didCalculate ? viewListBody : null));
     };
     ViewList.propTypes = {
@@ -247,7 +247,8 @@ var ViewList = /** @class */ (function (_super) {
         take: PropTypes.number,
         value: PropTypes.instanceOf(Date),
         viewHeight: PropTypes.number,
-        viewOffset: PropTypes.number
+        viewOffset: PropTypes.number,
+        tabIndex: PropTypes.number
     };
     ViewList.defaultProps = {
         take: VIEWS_COUNT,

package/dist/npm/dateinput/DateInput.d.ts

@@ -42,6 +42,14 @@ export interface DateInputProps<T extends DateInput = any> extends FormComponent
      * Indicates whether the element is currently expanded or collapsed.
      */
     ariaExpanded?: boolean;
+    /**
+     * Specifies the role of the DateInput.
+     */
+    ariaRole?: string;
+    /**
+     * Identifies the element whose contents or presence are controlled by the current element.
+     */
+    ariaControls?: string | undefined;
     /**
      * Determines the event handler that will be fired when the user edits the value ([see example]({% slug dateranges_dateinput %})).
      */
@@ -144,6 +152,7 @@ export declare class DateInputWithoutContext extends React.Component<DateInputPr
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
         ariaLabel: PropTypes.Requireable<string>;
+        ariaRole: PropTypes.Requireable<string>;
         ariaExpanded: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         validationMessage: PropTypes.Requireable<string>;

package/dist/npm/dateinput/DateInput.js

@@ -257,20 +257,12 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         }
         var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var props = __assign(__assign({}, DateInputWithoutContext.defaultProps), this.props);
-        var min = props.min, max = props.max, name = props.name, label = props.label, id = props.id;
+        var name = props.name, label = props.label, id = props.id;
         var currentText = this.text;
         var text = currentText === this.props.placeholder ? '' : currentText;
         var placeholder = currentText === this.props.placeholder ? currentText : undefined;
         var inputId = id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
-        var ariaProps = {
-            'aria-valuemin': min === null ? undefined : min.getTime(),
-            'aria-valuemax': max === null ? undefined : max.getTime(),
-            'aria-valuetext': text
-        };
-        if (this.value !== null) {
-            ariaProps['aria-valuenow'] = this.value.getTime();
-        }
         var wrapperClassesInstance = __spreadArray([], utils_1.wrapperClasses, true);
         if (this.props.className) {
             wrapperClassesInstance.push(this.props.className);
@@ -288,7 +280,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
                     _b['k-required'] = _this.required,
                     _b['k-disabled'] = _this.props.disabled,
                     _b), _this.props.className), onFocus: onFocus, onBlur: onBlur },
-                React.createElement("input", __assign({ role: "spinbutton", tabIndex: _this.props.tabIndex, disabled: _this.props.disabled, title: _this.props.title !== undefined ? _this.props.title : currentText, type: "text", spellCheck: false, autoComplete: "off", autoCorrect: "off", className: "k-input-inner", id: inputId, "aria-label": _this.props.ariaLabel, "aria-labelledby": _this.props.ariaLabelledBy, "aria-describedby": _this.props.ariaDescribedBy, "aria-expanded": _this.props.ariaExpanded, "aria-haspopup": _this.props.ariaHasPopup, onWheel: _this.wheel, onClick: _this.elementClick, onInput: _this.elementChange, onPaste: _this.handlePaste, onKeyDown: _this.elementKeyDown, onChange: kendo_react_common_1.noop, value: text, placeholder: placeholder, name: name }, ariaProps, { ref: function (input) { return _this._element = input; } })),
+                React.createElement("input", { role: _this.props.ariaRole || 'textbox', tabIndex: _this.props.tabIndex, disabled: _this.props.disabled, title: _this.props.title !== undefined ? _this.props.title : currentText, type: "text", spellCheck: false, autoComplete: "off", autoCorrect: "off", className: "k-input-inner", id: inputId, "aria-label": _this.props.ariaLabel, "aria-labelledby": _this.props.ariaLabelledBy, "aria-describedby": _this.props.ariaDescribedBy, "aria-haspopup": _this.props.ariaHasPopup, "aria-disabled": _this.props.disabled, "aria-expanded": _this.props.ariaExpanded, "aria-controls": _this.props.ariaControls, onWheel: _this.wheel, onClick: _this.elementClick, onInput: _this.elementChange, onPaste: _this.handlePaste, onKeyDown: _this.elementKeyDown, onChange: kendo_react_common_1.noop, value: text, placeholder: placeholder, name: name, ref: function (input) { return _this._element = input; } }),
                 _this.props.children,
                 _this.props.spinners && (React.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: _this.spinnersMouseDown },
                     React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", className: "k-spinner-increase", icon: 'arrow-n', "aria-label": localizationService.toLanguageString(messages_1.increaseValue, messages_1.messages[messages_1.increaseValue]), title: localizationService.toLanguageString(messages_1.increaseValue, messages_1.messages[messages_1.increaseValue]), onClick: _this.increasePart }),
@@ -646,6 +638,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         ariaLabelledBy: PropTypes.string,
         ariaDescribedBy: PropTypes.string,
         ariaLabel: PropTypes.string,
+        ariaRole: PropTypes.string,
         ariaExpanded: PropTypes.oneOfType([
             PropTypes.bool
         ]),