@progress/kendo-react-inputs 5.10.0-dev.202301111405 → 5.10.0-dev.202301111905

package/dist/es/colors/ColorGradient.d.ts

@@ -32,6 +32,8 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
         disabled: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<any>;
         id: PropTypes.Requireable<string>;
+        role: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
     };
@@ -40,6 +42,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
      */
     static defaultProps: {
         opacity: boolean;
+        role: string;
     };
     /**
      * @hidden

package/dist/es/colors/ColorGradient.js

@@ -173,7 +173,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
             style.top = "".concat(top_1, "px");
             style.left = "".concat(left, "px");
         }
-        return React.createElement("div", { className: "k-hsv-draghandle k-draghandle", style: style });
+        return (React.createElement("div", { role: 'slider', tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled), "aria-valuetext": this.props.ariaValueText, "aria-valuenow": parseInt(this.state.hex.substring(1), 16), "aria-label": this.props.ariaLabelHSV, "aria-orientation": undefined, "aria-disabled": this.props.disabled ? 'true' : undefined, className: "k-hsv-draghandle k-draghandle", style: style }));
     };
     /**
      * @hidden
@@ -242,7 +242,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
         var _this = this;
         var lS = provideLocalizationService(this);
         var className = classNames('k-colorgradient', { 'k-disabled': this.props.disabled });
-        return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
+        return (React.createElement("div", { id: this.props.id, role: this.props.role, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled), "aria-label": this.props.ariaLabel, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
             React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
                 React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
                     React.createElement(Draggable, { onDrag: this.onDrag, onRelease: this.onRelease, ref: function (el) { return _this.gradientWrapper = el ? el.element : undefined; } },
@@ -270,6 +270,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
         disabled: PropTypes.bool,
         style: PropTypes.any,
         id: PropTypes.string,
+        role: PropTypes.string,
+        ariaLabel: PropTypes.string,
         ariaLabelledBy: PropTypes.string,
         ariaDescribedBy: PropTypes.string
     };
@@ -277,7 +279,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ColorGradientWithoutContext.defaultProps = {
-        opacity: true
+        opacity: true,
+        role: 'textbox'
     };
     return ColorGradientWithoutContext;
 }(React.Component));

package/dist/es/colors/ColorPalette.js

@@ -115,8 +115,8 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
         var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
         var className = classNames('k-colorpalette', { 'k-disabled': this.props.disabled });
         if (paletteInfo.colors.length) {
-            return (React.createElement("div", { id: this.props.id, className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
-                React.createElement("div", { className: "k-colorpalette-table-wrap", role: "grid" },
+            return (React.createElement("div", { id: this.props.id, role: "grid", className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.ariaDisabled || (this.props.disabled ? 'true' : undefined), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
+                React.createElement("div", { className: "k-colorpalette-table-wrap" },
                     React.createElement("table", { className: "k-colorpalette-table k-palette", role: "presentation" },
                         React.createElement("tbody", { role: "rowgroup" }, this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords))))));
         }

package/dist/es/colors/ColorPicker.js

@@ -197,7 +197,7 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
     var onPaletteChangeHandler = React.useCallback(function (event) { return onChangeHandler(event, true); }, [isControlled, onChangeHandler]);
     var dir = useDir(focusableElementRef, props.dir);
     var isValid = valid !== false;
-    return (React.createElement("span", { id: props.id, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, className: classNames('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
+    return (React.createElement("span", { id: props.id, role: 'combobox', "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-haspopup": 'dialog', "aria-expanded": open, "aria-disabled": disabled ? 'true' : undefined, className: classNames('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
             _a["k-picker-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
             _a["k-picker-".concat(fillMode)] = fillMode,
             _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,

package/dist/es/colors/FlatColorPicker.d.ts

@@ -23,6 +23,14 @@ export interface FlatColorPickerProps {
      * Sets the `tabIndex` property of the FlatColorPicker.
      */
     tabIndex?: number;
+    /**
+     * Represents the label of the FlatColorPicker component.
+     */
+    ariaLabel?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
     /**
      * Determines whether the FlatColorPicker is disabled.
      */

package/dist/es/colors/FlatColorPicker.js

@@ -5,7 +5,8 @@ import { ButtonGroup, Button } from '@progress/kendo-react-buttons';
 import { paletteIcon, dropletSlashIcon, dropletSliderIcon } from '@progress/kendo-svg-icons';
 import { ColorPalette, ColorGradient } from '../main';
 import { packageMetadata } from '../package-metadata';
-import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn } from '../messages';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn, flatColorPickerColorGradientBtn, flatColorPickerColorPaletteBtn, flatColorPickerClearBtn } from '../messages';
 ;
 ;
 /**
@@ -19,6 +20,7 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
     var _a = React.useState((props.view || 'ColorGradient') === 'ColorGradient'), colorGradientView = _a[0], setColorGradientView = _a[1];
     var _b = React.useState('rgba(255, 255, 255, 1)'), colorValue = _b[0], setColorValue = _b[1];
     var _c = React.useState('rgba(255, 255, 255, 1)'), prevColor = _c[0], setPrevColor = _c[1];
+    var localizationService = useLocalization();
     var focus = React.useCallback(function () {
         if (target.current) {
             target.current.focus();
@@ -58,7 +60,7 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
     var handleFlatColorPickerBlur = React.useCallback(function () {
         setPrevColor(colorValue);
     }, [colorValue]);
-    return (React.createElement("div", { id: props.id, style: props.style, ref: flatColorPickerRef, tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-flatcolorpicker k-coloreditor', {
+    return (React.createElement("div", { id: props.id, role: 'textbox', "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-disabled": props.disabled ? 'true' : undefined, style: props.style, ref: flatColorPickerRef, tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-flatcolorpicker k-coloreditor', {
             'k-disabled': props.disabled
         }, props.className), onBlur: handleFlatColorPickerBlur },
         React.createElement(React.Fragment, null,
@@ -66,19 +68,19 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
                 React.createElement("div", { className: "k-coloreditor-header k-hstack" },
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         React.createElement(ButtonGroup, null,
-                            React.createElement(Button, { type: "button", togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); }, icon: "droplet-slider", svgIcon: dropletSliderIcon }),
-                            React.createElement(Button, { type: "button", togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); }, icon: "palette", svgIcon: paletteIcon }))),
+                            React.createElement(Button, { type: "button", "aria-label": localizationService.toLanguageString(flatColorPickerColorGradientBtn, messages[flatColorPickerColorGradientBtn]), togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); }, icon: "droplet-slider", svgIcon: dropletSliderIcon }),
+                            React.createElement(Button, { type: "button", "aria-label": localizationService.toLanguageString(flatColorPickerColorPaletteBtn, messages[flatColorPickerColorPaletteBtn]), togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); }, icon: "palette", svgIcon: paletteIcon }))),
                     React.createElement("div", { className: "k-spacer" }),
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         (props.showClearButton && defaultProps.showClearButton) &&
-                            React.createElement(Button, { type: "button", fillMode: 'flat', onClick: handleResetColor, icon: "droplet-slash", svgIcon: dropletSlashIcon }),
+                            React.createElement(Button, { type: "button", fillMode: 'flat', onClick: handleResetColor, "aria-label": localizationService.toLanguageString(flatColorPickerClearBtn, messages[flatColorPickerClearBtn]), icon: "droplet-slash", svgIcon: dropletSlashIcon }),
                         (props.showPreview && defaultProps.showPreview) &&
                             React.createElement("div", { className: "k-coloreditor-preview k-vstack" },
                                 React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),
                                 React.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: prevColor }, onClick: handlePrevColorClick })))),
             React.createElement("div", { className: "k-coloreditor-views k-vstack" }, colorGradientView
-                ? React.createElement(ColorGradient, { ref: colorGradientRef, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
-                : React.createElement(ColorPalette, { value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
+                ? React.createElement(ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
+                : React.createElement(ColorPalette, { ariaDisabled: true, ariaLabelledBy: 'required_label', value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
             (props.showButtons && defaultProps.showButtons) &&
                 React.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" },
                     React.createElement(Button, { type: "button", className: "k-coloreditor-cancel", onClick: handleCancelBtnClick }, messages[flatColorPickerCancelBtn]),

package/dist/es/colors/interfaces/ColorGradientProps.d.ts

@@ -12,6 +12,10 @@ export interface ColorGradientProps {
      * The value of the ColorGradient.
      */
     value?: string;
+    /**
+     * @hidden
+     */
+    role?: string;
     /**
      * Determines the event handler that will be fired when the user edits the value.
      */
@@ -65,8 +69,20 @@ export interface ColorGradientProps {
      * For example these elements could contain error or hint message.
      */
     ariaDescribedBy?: string;
+    /**
+     * Represents the label of the `hsv` drag handle component used inside the ColorGradient.
+     */
+    ariaLabelHSV?: string;
+    /**
+     * Represent the label of the component.
+     */
+    ariaLabel?: string;
     /**
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Represents the text rendered inside the `hsv` drag handle.
+     */
+    ariaValueText?: string;
 }

package/dist/es/colors/interfaces/ColorPaletteProps.d.ts

@@ -64,6 +64,10 @@ export interface ColorPaletteProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * @hidden
+     */
+    ariaDisabled?: boolean;
     /**
      * Determines the event handler that will be fired when the user edits the value.
      */

package/dist/es/colors/interfaces/ColorPickerProps.d.ts

@@ -97,6 +97,10 @@ export interface ColorPickerProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Represent the label of the component.
+     */
+    ariaLabel?: string;
     /**
      * The event handler that will be fired when the user edits the value.
      */

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -298,7 +298,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
                 _a), this.props.className), style: !this.props.label
                 ? __assign({ width: this.props.width }, style) : style },
             React.createElement(Prefix, null),
-            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: returnFalse, onDrop: returnFalse }),
+            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-placeholder": this.props.mask, name: this.props.name, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: returnFalse, onDrop: returnFalse }),
             React.createElement(Suffix, null)));
         return this.props.label
             ? (React.createElement(FloatingLabel, { label: this.props.label, editorId: inputId, editorValue: this.value, editorValid: isValid, editorDisabled: this.props.disabled, editorPlaceholder: this.props.placeholder, children: component, style: { width: this.props.width }, dir: this.props.dir }))

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

@@ -78,6 +78,18 @@ export declare const flatColorPickerCancelBtn = "flatColorPicker.cancelBtn";
  * @hidden
  */
 export declare const flatColorPickerApplyBtn = "flatColorPicker.applyBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerColorGradientBtn = "flatColorPicker.colorGradientBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerColorPaletteBtn = "flatColorPicker.colorPaletteBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerClearBtn = "flatColorPicker.clearBtn";
 /**
  * @hidden
  */
@@ -138,6 +150,9 @@ export declare const messages: {
     "colorGradient.toggleInputsButton": string;
     "flatColorPicker.cancelBtn": string;
     "flatColorPicker.applyBtn": string;
+    "flatColorPicker.colorGradientBtn": string;
+    "flatColorPicker.colorPaletteBtn": string;
+    "flatColorPicker.clearBtn": string;
     "checkbox.validation": string;
     "checkbox.optionalText": string;
     "radioButton.validation": string;

package/dist/es/messages/index.js

@@ -79,6 +79,18 @@ export var flatColorPickerCancelBtn = 'flatColorPicker.cancelBtn';
  * @hidden
  */
 export var flatColorPickerApplyBtn = 'flatColorPicker.applyBtn';
+/**
+ * @hidden
+ */
+export var flatColorPickerColorGradientBtn = 'flatColorPicker.colorGradientBtn';
+/**
+ * @hidden
+ */
+export var flatColorPickerColorPaletteBtn = 'flatColorPicker.colorPaletteBtn';
+/**
+ * @hidden
+ */
+export var flatColorPickerClearBtn = 'flatColorPicker.clearBtn';
 /**
  * @hidden
  */
@@ -139,6 +151,9 @@ export var messages = (_a = {},
     _a[colorGradientToggleInputsButton] = 'Toggle colorgradient inputs',
     _a[flatColorPickerCancelBtn] = 'Cancel',
     _a[flatColorPickerApplyBtn] = 'Apply',
+    _a[flatColorPickerColorGradientBtn] = 'Color Gradient view',
+    _a[flatColorPickerColorPaletteBtn] = 'Color Palette view',
+    _a[flatColorPickerClearBtn] = 'Clear color value',
     _a[checkboxValidation] = 'Please check this box if you want to proceed!',
     _a[checkboxOptionalText] = '(Optional)',
     _a[radioButtonValidation] = 'Please select option if you want to proceed!',

package/dist/es/numerictextbox/NumericTextBox.js

@@ -274,7 +274,7 @@ export var NumericTextBox = React.forwardRef(function (directProps, target) {
             _a['k-disabled'] = props.disabled,
             _a), props.className), "aria-disabled": props.disabled ? 'true' : undefined },
         React.createElement(Prefix, null),
-        React.createElement("input", { value: looseValue === null ? '' : looseValue, tabIndex: getTabIndex(props.tabIndex, props.disabled), accessKey: props.accessKey, disabled: props.disabled, title: props.title, "aria-valuemin": props.min, "aria-valuemax": props.max, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, placeholder: props.placeholder, spellCheck: false, autoComplete: 'off', autoCorrect: 'off', type: props.inputType || 'tel', className: 'k-input-inner', id: inputId, name: props.name, readOnly: props.readOnly, style: props.inputStyle, onChange: onChangeHandler, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onPaste: onPasteHandler, onWheel: onWheelHandler, ref: elementRef }),
+        React.createElement("input", { role: 'spinbutton', value: looseValue === null ? '' : looseValue, tabIndex: getTabIndex(props.tabIndex, props.disabled), accessKey: props.accessKey, disabled: props.disabled, title: props.title, "aria-disabled": props.disabled ? 'true' : undefined, "aria-valuemin": props.min, "aria-valuemax": props.max, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, placeholder: props.placeholder, spellCheck: false, autoComplete: 'off', autoCorrect: 'off', type: props.inputType || 'tel', className: 'k-input-inner', id: inputId, name: props.name, readOnly: props.readOnly, style: props.inputStyle, onChange: onChangeHandler, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onPaste: onPasteHandler, onWheel: onWheelHandler, ref: elementRef }),
         React.createElement(Suffix, null),
         props.children,
         props.spinners &&

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673444752,
+    publishDate: 1673462421,
     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/switch/Switch.js

@@ -252,16 +252,18 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
             _a), this.props.className);
         var ariaAttributes = {
             'aria-checked': this.value,
-            'aria-disabled': disabled || undefined
+            'aria-disabled': disabled || undefined,
+            'aria-labelledby': this.props.ariaLabelledBy,
+            'aria-describedby': this.props.ariaDescribedBy
         };
-        return (React.createElement("span", { ref: function (span) {
+        return (React.createElement("span", __assign({ ref: function (span) {
                 _this._wrapper = span;
-            }, className: switchClassName, dir: this.dir, onKeyDown: this.handleKeyDown, onClick: this.handleClick, onBlur: this.handleWrapperBlur, onFocus: this.handleWrapperFocus },
-            React.createElement("span", __assign({ className: classNames('k-switch-track', (_b = {},
+            }, role: 'switch' }, ariaAttributes, { className: switchClassName, dir: this.dir, onKeyDown: this.handleKeyDown, onClick: this.handleClick, onBlur: this.handleWrapperBlur, onFocus: this.handleWrapperFocus }),
+            React.createElement("span", { className: classNames('k-switch-track', (_b = {},
                     _b["k-rounded-".concat(kendoThemeMaps.roundedMap[trackRounded] || trackRounded)] = trackRounded,
-                    _b)), id: id || this._id, role: 'switch' }, ariaAttributes, { "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, ref: function (span) {
+                    _b)), id: id || this._id, ref: function (span) {
                     _this._element = span;
-                }, tabIndex: getTabIndex(tabIndex, disabled, undefined), accessKey: this.props.accessKey }),
+                }, tabIndex: getTabIndex(tabIndex, disabled, undefined), accessKey: this.props.accessKey },
                 this.dummyInput(this.value),
                 React.createElement("span", { className: 'k-switch-label-on' }, onLabel),
                 React.createElement("span", { className: 'k-switch-label-off' }, offLabel)),

package/dist/es/textarea/TextArea.js

@@ -111,7 +111,7 @@ export var TextArea = React.forwardRef(function (directProps, target) {
             dispatchEvent(onBlur, event, getImperativeHandle(), undefined);
         }
     }, [onBlur, disabled]);
-    var textAreaProps = __assign(__assign({ id: id || calculatedId, name: name, className: 'k-input-inner !k-overflow-auto', ref: elementRef, disabled: disabled, rows: rows, placeholder: placeholder, readOnly: readOnly, required: required, tabIndex: getTabIndex(tabIndex, disabled), style: autoSize ? { resize: 'none', overflow: 'hidden', height: textAreaHeight } : {}, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-multiline': true, 'aria-disabled': disabled || undefined, value: isControlled ? value : stateValue }, others), { onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur });
+    var textAreaProps = __assign(__assign({ id: id || calculatedId, role: 'textbox', name: name, className: 'k-input-inner !k-overflow-auto', ref: elementRef, disabled: disabled, rows: rows, placeholder: placeholder, readOnly: readOnly, required: required, tabIndex: getTabIndex(tabIndex, disabled), style: autoSize ? { resize: 'none', overflow: 'hidden', height: textAreaHeight } : {}, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-multiline': true, 'aria-disabled': disabled || undefined, value: isControlled ? value : stateValue }, others), { onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur });
     return (React.createElement("span", { className: classNames('k-input', 'k-textarea', (_a = {},
             _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
             _a["k-input-".concat(fillMode)] = fillMode,

package/dist/npm/colors/ColorGradient.d.ts

@@ -32,6 +32,8 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
         disabled: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<any>;
         id: PropTypes.Requireable<string>;
+        role: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
     };
@@ -40,6 +42,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
      */
     static defaultProps: {
         opacity: boolean;
+        role: string;
     };
     /**
      * @hidden

package/dist/npm/colors/ColorGradient.js

@@ -176,7 +176,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
             style.top = "".concat(top_1, "px");
             style.left = "".concat(left, "px");
         }
-        return React.createElement("div", { className: "k-hsv-draghandle k-draghandle", style: style });
+        return (React.createElement("div", { role: 'slider', tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), "aria-valuetext": this.props.ariaValueText, "aria-valuenow": parseInt(this.state.hex.substring(1), 16), "aria-label": this.props.ariaLabelHSV, "aria-orientation": undefined, "aria-disabled": this.props.disabled ? 'true' : undefined, className: "k-hsv-draghandle k-draghandle", style: style }));
     };
     /**
      * @hidden
@@ -245,7 +245,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
         var _this = this;
         var lS = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var className = (0, kendo_react_common_1.classNames)('k-colorgradient', { 'k-disabled': this.props.disabled });
-        return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
+        return (React.createElement("div", { id: this.props.id, role: this.props.role, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), "aria-label": this.props.ariaLabel, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
             React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
                 React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
                     React.createElement(kendo_react_common_1.Draggable, { onDrag: this.onDrag, onRelease: this.onRelease, ref: function (el) { return _this.gradientWrapper = el ? el.element : undefined; } },
@@ -273,6 +273,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
         disabled: PropTypes.bool,
         style: PropTypes.any,
         id: PropTypes.string,
+        role: PropTypes.string,
+        ariaLabel: PropTypes.string,
         ariaLabelledBy: PropTypes.string,
         ariaDescribedBy: PropTypes.string
     };
@@ -280,7 +282,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ColorGradientWithoutContext.defaultProps = {
-        opacity: true
+        opacity: true,
+        role: 'textbox'
     };
     return ColorGradientWithoutContext;
 }(React.Component));

package/dist/npm/colors/ColorPalette.js

@@ -118,8 +118,8 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
         var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
         var className = (0, kendo_react_common_1.classNames)('k-colorpalette', { 'k-disabled': this.props.disabled });
         if (paletteInfo.colors.length) {
-            return (React.createElement("div", { id: this.props.id, className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
-                React.createElement("div", { className: "k-colorpalette-table-wrap", role: "grid" },
+            return (React.createElement("div", { id: this.props.id, role: "grid", className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.ariaDisabled || (this.props.disabled ? 'true' : undefined), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
+                React.createElement("div", { className: "k-colorpalette-table-wrap" },
                     React.createElement("table", { className: "k-colorpalette-table k-palette", role: "presentation" },
                         React.createElement("tbody", { role: "rowgroup" }, this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords))))));
         }

package/dist/npm/colors/ColorPicker.js

@@ -200,7 +200,7 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
     var onPaletteChangeHandler = React.useCallback(function (event) { return onChangeHandler(event, true); }, [isControlled, onChangeHandler]);
     var dir = (0, kendo_react_common_1.useDir)(focusableElementRef, props.dir);
     var isValid = valid !== false;
-    return (React.createElement("span", { id: props.id, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, className: (0, kendo_react_common_1.classNames)('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
+    return (React.createElement("span", { id: props.id, role: 'combobox', "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-haspopup": 'dialog', "aria-expanded": open, "aria-disabled": disabled ? 'true' : undefined, className: (0, kendo_react_common_1.classNames)('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
             _a["k-picker-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
             _a["k-picker-".concat(fillMode)] = fillMode,
             _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,

package/dist/npm/colors/FlatColorPicker.d.ts

@@ -23,6 +23,14 @@ export interface FlatColorPickerProps {
      * Sets the `tabIndex` property of the FlatColorPicker.
      */
     tabIndex?: number;
+    /**
+     * Represents the label of the FlatColorPicker component.
+     */
+    ariaLabel?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
     /**
      * Determines whether the FlatColorPicker is disabled.
      */

package/dist/npm/colors/FlatColorPicker.js

@@ -8,6 +8,7 @@ var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var main_1 = require("../main");
 var package_metadata_1 = require("../package-metadata");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("../messages");
 ;
 ;
@@ -22,6 +23,7 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
     var _a = React.useState((props.view || 'ColorGradient') === 'ColorGradient'), colorGradientView = _a[0], setColorGradientView = _a[1];
     var _b = React.useState('rgba(255, 255, 255, 1)'), colorValue = _b[0], setColorValue = _b[1];
     var _c = React.useState('rgba(255, 255, 255, 1)'), prevColor = _c[0], setPrevColor = _c[1];
+    var localizationService = (0, kendo_react_intl_1.useLocalization)();
     var focus = React.useCallback(function () {
         if (target.current) {
             target.current.focus();
@@ -61,7 +63,7 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
     var handleFlatColorPickerBlur = React.useCallback(function () {
         setPrevColor(colorValue);
     }, [colorValue]);
-    return (React.createElement("div", { id: props.id, style: props.style, ref: flatColorPickerRef, tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)('k-flatcolorpicker k-coloreditor', {
+    return (React.createElement("div", { id: props.id, role: 'textbox', "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-disabled": props.disabled ? 'true' : undefined, style: props.style, ref: flatColorPickerRef, tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)('k-flatcolorpicker k-coloreditor', {
             'k-disabled': props.disabled
         }, props.className), onBlur: handleFlatColorPickerBlur },
         React.createElement(React.Fragment, null,
@@ -69,19 +71,19 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
                 React.createElement("div", { className: "k-coloreditor-header k-hstack" },
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         React.createElement(kendo_react_buttons_1.ButtonGroup, null,
-                            React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); }, icon: "droplet-slider", svgIcon: kendo_svg_icons_1.dropletSliderIcon }),
-                            React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); }, icon: "palette", svgIcon: kendo_svg_icons_1.paletteIcon }))),
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", "aria-label": localizationService.toLanguageString(messages_1.flatColorPickerColorGradientBtn, messages_1.messages[messages_1.flatColorPickerColorGradientBtn]), togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); }, icon: "droplet-slider", svgIcon: kendo_svg_icons_1.dropletSliderIcon }),
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", "aria-label": localizationService.toLanguageString(messages_1.flatColorPickerColorPaletteBtn, messages_1.messages[messages_1.flatColorPickerColorPaletteBtn]), togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); }, icon: "palette", svgIcon: kendo_svg_icons_1.paletteIcon }))),
                     React.createElement("div", { className: "k-spacer" }),
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         (props.showClearButton && defaultProps.showClearButton) &&
-                            React.createElement(kendo_react_buttons_1.Button, { type: "button", fillMode: 'flat', onClick: handleResetColor, icon: "droplet-slash", svgIcon: kendo_svg_icons_1.dropletSlashIcon }),
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", fillMode: 'flat', onClick: handleResetColor, "aria-label": localizationService.toLanguageString(messages_1.flatColorPickerClearBtn, messages_1.messages[messages_1.flatColorPickerClearBtn]), icon: "droplet-slash", svgIcon: kendo_svg_icons_1.dropletSlashIcon }),
                         (props.showPreview && defaultProps.showPreview) &&
                             React.createElement("div", { className: "k-coloreditor-preview k-vstack" },
                                 React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),
                                 React.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: prevColor }, onClick: handlePrevColorClick })))),
             React.createElement("div", { className: "k-coloreditor-views k-vstack" }, colorGradientView
-                ? React.createElement(main_1.ColorGradient, { ref: colorGradientRef, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
-                : React.createElement(main_1.ColorPalette, { value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
+                ? React.createElement(main_1.ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
+                : React.createElement(main_1.ColorPalette, { ariaDisabled: true, ariaLabelledBy: 'required_label', value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
             (props.showButtons && defaultProps.showButtons) &&
                 React.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" },
                     React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-coloreditor-cancel", onClick: handleCancelBtnClick }, messages_1.messages[messages_1.flatColorPickerCancelBtn]),

package/dist/npm/colors/interfaces/ColorGradientProps.d.ts

@@ -12,6 +12,10 @@ export interface ColorGradientProps {
      * The value of the ColorGradient.
      */
     value?: string;
+    /**
+     * @hidden
+     */
+    role?: string;
     /**
      * Determines the event handler that will be fired when the user edits the value.
      */
@@ -65,8 +69,20 @@ export interface ColorGradientProps {
      * For example these elements could contain error or hint message.
      */
     ariaDescribedBy?: string;
+    /**
+     * Represents the label of the `hsv` drag handle component used inside the ColorGradient.
+     */
+    ariaLabelHSV?: string;
+    /**
+     * Represent the label of the component.
+     */
+    ariaLabel?: string;
     /**
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Represents the text rendered inside the `hsv` drag handle.
+     */
+    ariaValueText?: string;
 }

package/dist/npm/colors/interfaces/ColorPaletteProps.d.ts

@@ -64,6 +64,10 @@ export interface ColorPaletteProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * @hidden
+     */
+    ariaDisabled?: boolean;
     /**
      * Determines the event handler that will be fired when the user edits the value.
      */

package/dist/npm/colors/interfaces/ColorPickerProps.d.ts

@@ -97,6 +97,10 @@ export interface ColorPickerProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Represent the label of the component.
+     */
+    ariaLabel?: string;
     /**
      * The event handler that will be fired when the user edits the value.
      */

package/dist/npm/maskedtextbox/MaskedTextBox.js

@@ -301,7 +301,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
                 _a), this.props.className), style: !this.props.label
                 ? __assign({ width: this.props.width }, style) : style },
             React.createElement(Prefix, null),
-            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: utils_1.returnFalse, onDrop: utils_1.returnFalse }),
+            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-placeholder": this.props.mask, name: this.props.name, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: utils_1.returnFalse, onDrop: utils_1.returnFalse }),
             React.createElement(Suffix, null)));
         return this.props.label
             ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: this.props.label, editorId: inputId, editorValue: this.value, editorValid: isValid, editorDisabled: this.props.disabled, editorPlaceholder: this.props.placeholder, children: component, style: { width: this.props.width }, dir: this.props.dir }))

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

@@ -78,6 +78,18 @@ export declare const flatColorPickerCancelBtn = "flatColorPicker.cancelBtn";
  * @hidden
  */
 export declare const flatColorPickerApplyBtn = "flatColorPicker.applyBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerColorGradientBtn = "flatColorPicker.colorGradientBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerColorPaletteBtn = "flatColorPicker.colorPaletteBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerClearBtn = "flatColorPicker.clearBtn";
 /**
  * @hidden
  */
@@ -138,6 +150,9 @@ export declare const messages: {
     "colorGradient.toggleInputsButton": string;
     "flatColorPicker.cancelBtn": string;
     "flatColorPicker.applyBtn": string;
+    "flatColorPicker.colorGradientBtn": string;
+    "flatColorPicker.colorPaletteBtn": string;
+    "flatColorPicker.clearBtn": string;
     "checkbox.validation": string;
     "checkbox.optionalText": string;
     "radioButton.validation": string;