@progress/kendo-react-dropdowns 5.10.0-dev.202301111405 → 5.10.0-dev.202301121619

package/dist/es/AutoComplete/AutoComplete.js

@@ -370,7 +370,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         var _a = this.props, placeholder = _a.placeholder, tabIndex = _a.tabIndex, disabled = _a.disabled, readonly = _a.readonly;
         var focused = this.state.focused;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
+        return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
     AutoCompleteWithoutContext.prototype.renderListContainer = function () {
         var _a;

package/dist/es/ComboBox/ComboBox.d.ts

@@ -81,7 +81,9 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>; /**
+         * @hidden
+         */
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         itemRender: PropTypes.Requireable<(...args: any[]) => any>;
         listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/es/ComboBox/ComboBox.js

@@ -38,6 +38,8 @@ import { packageMetadata } from '../package-metadata';
 import ClearButton from '../common/ClearButton';
 import { Button } from '@progress/kendo-react-buttons';
 import { caretAltDownIcon } from '@progress/kendo-svg-icons';
+import { messages, comboArrowBtnAriaLabelExpand, comboArrowBtnAriaLabelCollapse } from './../messages';
+import { provideLocalizationService } from '@progress/kendo-react-intl';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /** @hidden */
@@ -364,7 +366,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
      */
     ComboBoxWithoutContext.prototype.render = function () {
         var _a;
-        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
+        var btnAriaLabelExpand = provideLocalizationService(this).toLanguageString(comboArrowBtnAriaLabelExpand, messages[comboArrowBtnAriaLabelExpand]);
+        var btnAriaLabelCollapse = provideLocalizationService(this).toLanguageString(comboArrowBtnAriaLabelCollapse, messages[comboArrowBtnAriaLabelCollapse]);
+        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, _d = _b.opened, opened = _d === void 0 ? this.state.opened : _d;
         var isValid = !this.validityStyles || this.validity.valid;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
         var selectedItemText = getItemValue(this.value, textField);
@@ -391,7 +395,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             this.renderSearchBar(inputText || '', id),
             renderClearButton && !loading && React.createElement(ClearButton, { onClick: this.clearButtonClick, key: "clearbutton" }),
             loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
-            React.createElement(Button, { tabIndex: -1, type: "button", icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? caretAltDownIcon : this.props.svgIcon, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
+            React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": opened ? btnAriaLabelCollapse : btnAriaLabelExpand, icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? caretAltDownIcon : this.props.svgIcon, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
             this.renderListContainer()));
         return label
             ? (React.createElement(FloatingLabel, { label: label, editorId: id, editorValue: inputText, editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: combobox }))
@@ -566,7 +570,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         if (this._suggested && !areSame(this._valueOnDidUpdate, value, dataItemKey)) {
             this._suggested = '';
         }
-        return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
+        return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
     ComboBoxWithoutContext.prototype.triggerOnChange = function (item, state) {
         var value = this.value;

package/dist/es/DropDownList/DropDownList.d.ts

@@ -28,9 +28,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
             total: PropTypes.Validator<number>;
         }>>;
         onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onPageChange: PropTypes.Requireable<(...args: any[]) => any>; /**
-         * @hidden
-         */
+        onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
         opened: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         dir: PropTypes.Requireable<string>;
@@ -90,6 +88,9 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         size: "small" | "medium" | "large" | null | undefined;
         rounded: "small" | "medium" | "full" | "large" | null | undefined;
         fillMode: "flat" | "outline" | "solid" | null | undefined;
+        /**
+         * @hidden
+         */
         popupSettings: {
             height: string;
         };
@@ -111,6 +112,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     private _filterInput;
     private _valueDuringOnChange;
     private _navigated;
+    private _inputId;
     constructor(props: DropDownListProps);
     /**
      * @hidden

package/dist/es/DropDownList/DropDownList.js

@@ -26,7 +26,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Keys, getTabIndex, createPropsContext, withPropsContext, kendoThemeMaps, IconWrap, svgIconPropType } from '@progress/kendo-react-common';
+import { classNames, Keys, getTabIndex, createPropsContext, withPropsContext, kendoThemeMaps, IconWrap, svgIconPropType, guid } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 import ListContainer from '../common/ListContainer';
@@ -38,6 +38,8 @@ import { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { Button } from '@progress/kendo-react-buttons';
+import { provideLocalizationService } from '@progress/kendo-react-intl';
+import { dropDownListArrowBtnAriaLabel, messages } from '../messages';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /**
@@ -58,6 +60,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         _this._skipFocusEvent = false;
         _this._filterInput = null;
         _this._navigated = false;
+        _this._inputId = guid();
         /**
          * @hidden
          */
@@ -488,6 +491,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
     DropDownListWithoutContext.prototype.render = function () {
         var _a;
         var _this = this;
+        var btnAriaLabel = provideLocalizationService(this).toLanguageString(dropDownListArrowBtnAriaLabel, messages[dropDownListArrowBtnAriaLabel]);
         var _b = this.props, style = _b.style, className = _b.className, label = _b.label, dir = _b.dir, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var value = this.value;
@@ -504,7 +508,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         var _c = this.props, dataItemKey = _c.dataItemKey, _d = _c.data, data = _d === void 0 ? [] : _d, disabled = _c.disabled, tabIndex = _c.tabIndex, loading = _c.loading, iconClassName = _c.iconClassName, valueRender = _c.valueRender;
         var focused = this.state.focused;
         var selectedIndex = data.findIndex(function (i) { return areSame(i, value, dataItemKey); });
-        var valueDefaultRendering = (React.createElement("span", { className: "k-input-inner" },
+        var valueDefaultRendering = (React.createElement("span", { id: this._inputId, className: "k-input-inner" },
             React.createElement("span", { className: "k-input-value-text" }, text)));
         var valueElement = valueRender !== undefined ?
             valueRender.call(undefined, valueDefaultRendering, value) : valueDefaultRendering;
@@ -519,10 +523,10 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 _a['k-required'] = this.required,
                 _a)), style: !label
                 ? style
-                : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: getTabIndex(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'combobox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": 'listbox', "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.ariaLabel || this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, id: this.props.id, title: this.props.title },
+                : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: getTabIndex(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'combobox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": 'listbox', "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.ariaLabel || this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy || this._inputId, id: this.props.id, title: this.props.title },
             valueElement,
             loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-            React.createElement(Button, { tabIndex: -1, type: "button", "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", themeColor: 'base', icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? caretAltDownIcon : this.props.svgIcon, onMouseDown: function (e) { return _this.state.focused && e.preventDefault(); } }),
+            React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": btnAriaLabel, "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", themeColor: 'base', icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? caretAltDownIcon : this.props.svgIcon, onMouseDown: function (e) { return _this.state.focused && e.preventDefault(); } }),
             this.dummySelect(value),
             this.renderListContainer()));
         return label ? (React.createElement(FloatingLabel, { label: label, editorValue: text, editorValid: isValid, editorDisabled: this.props.disabled, style: { width: style ? style.width : undefined }, children: dropdownlist })) : dropdownlist;

package/dist/es/MultiSelectTree/MultiSelectTree.js

@@ -399,12 +399,12 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
             _a['k-loading'] = props.loading,
             _a['k-required'] = required,
             _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, onClick: disabled ? undefined : onWrapperClick },
-        tagsToRenderRef.current.length > 0 && (React.createElement("div", { className: classNames('k-input-values k-chip-list k-selection-multiple', (_b = {},
+        React.createElement("div", { id: 'tagslist-' + id, className: classNames('k-input-values k-chip-list k-selection-multiple', (_b = {},
                 _b["k-chip-list-".concat(sizeMap[size] || size)] = size,
-                _b)), role: "listbox", id: 'tagslist-' + id },
-            React.createElement(TagList, { tag: props.tag, onTagDelete: onTagDelete, data: tagsToRenderRef.current, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return matchTags(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
-        !hasValue && React.createElement("span", { className: "k-input-inner" },
-            React.createElement("span", { className: "k-input-value-text" }, "\u00A0")),
+                _b)) }, tagsToRenderRef.current.length > 0 && (React.createElement(TagList, { tag: props.tag, onTagDelete: onTagDelete, data: tagsToRenderRef.current, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return matchTags(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
+        !hasValue &&
+            React.createElement("span", { className: "k-input-inner", role: 'combobox', tabIndex: tabIndex, "aria-expanded": isOpen, "aria-describedby": 'tagslist-' + id, "aria-label": props.ariaLabelledBy },
+                React.createElement("span", { className: "k-input-value-text" }, "\u00A0")),
         props.loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
         hasValue && !disabled && React.createElement(ClearButton, { onClick: onClear }),
         React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },

package/dist/es/messages/index.d.ts

@@ -6,10 +6,25 @@ export declare const nodata = "dropdowns.nodata";
  * @hidden
  */
 export declare const clear = "dropdowns.clear";
+/**
+ * @hidden
+ */
+export declare const comboArrowBtnAriaLabelExpand = "dropdowns.comboArrowBtnAriaLabelExpand";
+/**
+ * @hidden
+ */
+export declare const comboArrowBtnAriaLabelCollapse = "dropdowns.comboArrowBtnAriaLabelCollapse";
+/**
+ * @hidden
+ */
+export declare const dropDownListArrowBtnAriaLabel = "dropdowns.dropDownListArrowBtnAriaLabel";
 /**
  * @hidden
  */
 export declare const messages: {
     "dropdowns.clear": string;
     "dropdowns.nodata": string;
+    "dropdowns.comboArrowBtnAriaLabelExpand": string;
+    "dropdowns.comboArrowBtnAriaLabelCollapse": string;
+    "dropdowns.dropDownListArrowBtnAriaLabel": string;
 };

package/dist/es/messages/index.js

@@ -7,10 +7,25 @@ export var nodata = 'dropdowns.nodata';
  * @hidden
  */
 export var clear = 'dropdowns.clear';
+/**
+ * @hidden
+ */
+export var comboArrowBtnAriaLabelExpand = 'dropdowns.comboArrowBtnAriaLabelExpand';
+/**
+ * @hidden
+ */
+export var comboArrowBtnAriaLabelCollapse = 'dropdowns.comboArrowBtnAriaLabelCollapse';
+/**
+ * @hidden
+ */
+export var dropDownListArrowBtnAriaLabel = 'dropdowns.dropDownListArrowBtnAriaLabel';
 /**
  * @hidden
  */
 export var messages = (_a = {},
     _a[clear] = 'clear',
     _a[nodata] = 'NO DATA FOUND.',
+    _a[comboArrowBtnAriaLabelExpand] = 'expand combobox',
+    _a[comboArrowBtnAriaLabelCollapse] = 'collapse combobox',
+    _a[dropDownListArrowBtnAriaLabel] = 'select',
     _a);

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673444656,
+    publishDate: 1673538574,
     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/npm/AutoComplete/AutoComplete.js

@@ -373,7 +373,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         var _a = this.props, placeholder = _a.placeholder, tabIndex = _a.tabIndex, disabled = _a.disabled, readonly = _a.readonly;
         var focused = this.state.focused;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
+        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
     AutoCompleteWithoutContext.prototype.renderListContainer = function () {
         var _a;

package/dist/npm/ComboBox/ComboBox.d.ts

@@ -81,7 +81,9 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>; /**
+         * @hidden
+         */
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         itemRender: PropTypes.Requireable<(...args: any[]) => any>;
         listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/npm/ComboBox/ComboBox.js

@@ -41,6 +41,8 @@ var package_metadata_1 = require("../package-metadata");
 var ClearButton_1 = require("../common/ClearButton");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var messages_1 = require("./../messages");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /** @hidden */
@@ -367,7 +369,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
      */
     ComboBoxWithoutContext.prototype.render = function () {
         var _a;
-        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
+        var btnAriaLabelExpand = (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.comboArrowBtnAriaLabelExpand, messages_1.messages[messages_1.comboArrowBtnAriaLabelExpand]);
+        var btnAriaLabelCollapse = (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.comboArrowBtnAriaLabelCollapse, messages_1.messages[messages_1.comboArrowBtnAriaLabelCollapse]);
+        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, _d = _b.opened, opened = _d === void 0 ? this.state.opened : _d;
         var isValid = !this.validityStyles || this.validity.valid;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
         var selectedItemText = (0, utils_1.getItemValue)(this.value, textField);
@@ -394,7 +398,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             this.renderSearchBar(inputText || '', id),
             renderClearButton && !loading && React.createElement(ClearButton_1.default, { onClick: this.clearButtonClick, key: "clearbutton" }),
             loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
-            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? kendo_svg_icons_1.caretAltDownIcon : this.props.svgIcon, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
+            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": opened ? btnAriaLabelCollapse : btnAriaLabelExpand, icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? kendo_svg_icons_1.caretAltDownIcon : this.props.svgIcon, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
             this.renderListContainer()));
         return label
             ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorId: id, editorValue: inputText, editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: combobox }))
@@ -569,7 +573,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         if (this._suggested && !(0, utils_1.areSame)(this._valueOnDidUpdate, value, dataItemKey)) {
             this._suggested = '';
         }
-        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
+        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
     ComboBoxWithoutContext.prototype.triggerOnChange = function (item, state) {
         var value = this.value;

package/dist/npm/DropDownList/DropDownList.d.ts

@@ -28,9 +28,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
             total: PropTypes.Validator<number>;
         }>>;
         onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onPageChange: PropTypes.Requireable<(...args: any[]) => any>; /**
-         * @hidden
-         */
+        onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
         opened: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         dir: PropTypes.Requireable<string>;
@@ -90,6 +88,9 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         size: "small" | "medium" | "large" | null | undefined;
         rounded: "small" | "medium" | "full" | "large" | null | undefined;
         fillMode: "flat" | "outline" | "solid" | null | undefined;
+        /**
+         * @hidden
+         */
         popupSettings: {
             height: string;
         };
@@ -111,6 +112,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     private _filterInput;
     private _valueDuringOnChange;
     private _navigated;
+    private _inputId;
     constructor(props: DropDownListProps);
     /**
      * @hidden

package/dist/npm/DropDownList/DropDownList.js

@@ -41,6 +41,8 @@ var utils_1 = require("../common/utils");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var messages_1 = require("../messages");
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /**
@@ -61,6 +63,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         _this._skipFocusEvent = false;
         _this._filterInput = null;
         _this._navigated = false;
+        _this._inputId = (0, kendo_react_common_1.guid)();
         /**
          * @hidden
          */
@@ -491,6 +494,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
     DropDownListWithoutContext.prototype.render = function () {
         var _a;
         var _this = this;
+        var btnAriaLabel = (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.dropDownListArrowBtnAriaLabel, messages_1.messages[messages_1.dropDownListArrowBtnAriaLabel]);
         var _b = this.props, style = _b.style, className = _b.className, label = _b.label, dir = _b.dir, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var value = this.value;
@@ -507,7 +511,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         var _c = this.props, dataItemKey = _c.dataItemKey, _d = _c.data, data = _d === void 0 ? [] : _d, disabled = _c.disabled, tabIndex = _c.tabIndex, loading = _c.loading, iconClassName = _c.iconClassName, valueRender = _c.valueRender;
         var focused = this.state.focused;
         var selectedIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
-        var valueDefaultRendering = (React.createElement("span", { className: "k-input-inner" },
+        var valueDefaultRendering = (React.createElement("span", { id: this._inputId, className: "k-input-inner" },
             React.createElement("span", { className: "k-input-value-text" }, text)));
         var valueElement = valueRender !== undefined ?
             valueRender.call(undefined, valueDefaultRendering, value) : valueDefaultRendering;
@@ -522,10 +526,10 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 _a['k-required'] = this.required,
                 _a)), style: !label
                 ? style
-                : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? utils_1.preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'combobox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": 'listbox', "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.ariaLabel || this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, id: this.props.id, title: this.props.title },
+                : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? utils_1.preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'combobox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": 'listbox', "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.ariaLabel || this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy || this._inputId, id: this.props.id, title: this.props.title },
             valueElement,
             loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", themeColor: 'base', icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? kendo_svg_icons_1.caretAltDownIcon : this.props.svgIcon, onMouseDown: function (e) { return _this.state.focused && e.preventDefault(); } }),
+            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": btnAriaLabel, "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", themeColor: 'base', icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? kendo_svg_icons_1.caretAltDownIcon : this.props.svgIcon, onMouseDown: function (e) { return _this.state.focused && e.preventDefault(); } }),
             this.dummySelect(value),
             this.renderListContainer()));
         return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: text, editorValid: isValid, editorDisabled: this.props.disabled, style: { width: style ? style.width : undefined }, children: dropdownlist })) : dropdownlist;

package/dist/npm/MultiSelectTree/MultiSelectTree.js

@@ -402,12 +402,12 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
             _a['k-loading'] = props.loading,
             _a['k-required'] = required,
             _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, onClick: disabled ? undefined : onWrapperClick },
-        tagsToRenderRef.current.length > 0 && (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-input-values k-chip-list k-selection-multiple', (_b = {},
+        React.createElement("div", { id: 'tagslist-' + id, className: (0, kendo_react_common_1.classNames)('k-input-values k-chip-list k-selection-multiple', (_b = {},
                 _b["k-chip-list-".concat(sizeMap[size] || size)] = size,
-                _b)), role: "listbox", id: 'tagslist-' + id },
-            React.createElement(TagList_1.default, { tag: props.tag, onTagDelete: onTagDelete, data: tagsToRenderRef.current, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return (0, utils_1.matchTags)(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
-        !hasValue && React.createElement("span", { className: "k-input-inner" },
-            React.createElement("span", { className: "k-input-value-text" }, "\u00A0")),
+                _b)) }, tagsToRenderRef.current.length > 0 && (React.createElement(TagList_1.default, { tag: props.tag, onTagDelete: onTagDelete, data: tagsToRenderRef.current, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return (0, utils_1.matchTags)(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
+        !hasValue &&
+            React.createElement("span", { className: "k-input-inner", role: 'combobox', tabIndex: tabIndex, "aria-expanded": isOpen, "aria-describedby": 'tagslist-' + id, "aria-label": props.ariaLabelledBy },
+                React.createElement("span", { className: "k-input-value-text" }, "\u00A0")),
         props.loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
         hasValue && !disabled && React.createElement(ClearButton_1.default, { onClick: onClear }),
         React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },

package/dist/npm/messages/index.d.ts

@@ -6,10 +6,25 @@ export declare const nodata = "dropdowns.nodata";
  * @hidden
  */
 export declare const clear = "dropdowns.clear";
+/**
+ * @hidden
+ */
+export declare const comboArrowBtnAriaLabelExpand = "dropdowns.comboArrowBtnAriaLabelExpand";
+/**
+ * @hidden
+ */
+export declare const comboArrowBtnAriaLabelCollapse = "dropdowns.comboArrowBtnAriaLabelCollapse";
+/**
+ * @hidden
+ */
+export declare const dropDownListArrowBtnAriaLabel = "dropdowns.dropDownListArrowBtnAriaLabel";
 /**
  * @hidden
  */
 export declare const messages: {
     "dropdowns.clear": string;
     "dropdowns.nodata": string;
+    "dropdowns.comboArrowBtnAriaLabelExpand": string;
+    "dropdowns.comboArrowBtnAriaLabelCollapse": string;
+    "dropdowns.dropDownListArrowBtnAriaLabel": string;
 };

package/dist/npm/messages/index.js

@@ -1,7 +1,7 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.messages = exports.clear = exports.nodata = void 0;
+exports.messages = exports.dropDownListArrowBtnAriaLabel = exports.comboArrowBtnAriaLabelCollapse = exports.comboArrowBtnAriaLabelExpand = exports.clear = exports.nodata = void 0;
 /**
  * @hidden
  */
@@ -10,10 +10,25 @@ exports.nodata = 'dropdowns.nodata';
  * @hidden
  */
 exports.clear = 'dropdowns.clear';
+/**
+ * @hidden
+ */
+exports.comboArrowBtnAriaLabelExpand = 'dropdowns.comboArrowBtnAriaLabelExpand';
+/**
+ * @hidden
+ */
+exports.comboArrowBtnAriaLabelCollapse = 'dropdowns.comboArrowBtnAriaLabelCollapse';
+/**
+ * @hidden
+ */
+exports.dropDownListArrowBtnAriaLabel = 'dropdowns.dropDownListArrowBtnAriaLabel';
 /**
  * @hidden
  */
 exports.messages = (_a = {},
     _a[exports.clear] = 'clear',
     _a[exports.nodata] = 'NO DATA FOUND.',
+    _a[exports.comboArrowBtnAriaLabelExpand] = 'expand combobox',
+    _a[exports.comboArrowBtnAriaLabelCollapse] = 'collapse combobox',
+    _a[exports.dropDownListArrowBtnAriaLabel] = 'select',
     _a);

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673444656,
+    publishDate: 1673538574,
     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'
 };