@progress/kendo-react-inputs 5.5.1-dev.202207141327 → 5.6.0-dev.202208040930

package/dist/es/colors/ColorGradient.js

@@ -25,6 +25,8 @@ import { cacheHsva, removeCachedColor, getCachedHsva, getCachedRgba, getCachedHe
 import ColorInput from './ColorInput';
 import { ColorContrastLabels } from './ColorContrastLabels';
 import { ColorContrastSvg } from './ColorContrastSvg';
+import { provideLocalizationService } from '@progress/kendo-react-intl';
+import { messages, colorGradientHueSliderLabel, colorGradientAlphaSliderLabel } from './../messages';
 var FORMAT = 'rgba';
 var DEFAULT_SELECTED_COLOR = 'rgba(255, 255, 255, 1)';
 /** @hidden */
@@ -238,6 +240,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      */
     ColorGradientWithoutContext.prototype.render = function () {
         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 },
             React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
@@ -247,9 +250,9 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
                     this.props.backgroundColor && !this.state.isFirstRender &&
                         React.createElement(ColorContrastSvg, { metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined, hsva: this.state.hsva, backgroundColor: this.props.backgroundColor })),
                 React.createElement("div", { className: "k-hsv-controls k-hstack" },
-                    React.createElement(Slider, { value: this.state.hsva.h, buttons: false, vertical: true, min: 0, max: 360, step: 5, onChange: this.onHueSliderChange, className: "k-hue-slider k-colorgradient-slider", disabled: this.props.disabled }),
+                    React.createElement(Slider, { value: this.state.hsva.h, buttons: false, vertical: true, min: 0, max: 360, step: 5, onChange: this.onHueSliderChange, className: "k-hue-slider k-colorgradient-slider", disabled: this.props.disabled, ariaLabel: lS.toLanguageString(colorGradientHueSliderLabel, messages[colorGradientHueSliderLabel]) }),
                     this.props.opacity &&
-                        React.createElement(Slider, { value: isPresent(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, onChange: this.onAlphaSliderChange, className: "k-alpha-slider k-colorgradient-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
+                        React.createElement(Slider, { value: isPresent(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, ariaLabel: lS.toLanguageString(colorGradientAlphaSliderLabel, messages[colorGradientAlphaSliderLabel]), onChange: this.onAlphaSliderChange, className: "k-alpha-slider k-colorgradient-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
             React.createElement(ColorInput, { rgba: this.state.rgba, onRgbaChange: this.onRgbaChange, hex: this.state.hex, onHexChange: this.onHexChange, opacity: this.props.opacity, disabled: this.props.disabled }),
             this.props.backgroundColor && (React.createElement(ColorContrastLabels, { bgColor: getRGBA(this.props.backgroundColor), rgba: this.state.rgba }))));
     };

package/dist/es/colors/ColorInput.js

@@ -30,7 +30,7 @@ import HexInput from './HexInput';
 import { Button } from '@progress/kendo-react-buttons';
 import { Label } from '@progress/kendo-react-labels';
 import { registerForIntl, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
-import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG } from '../messages';
+import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG, colorGradientToggleInputsButton } from '../messages';
 /**
  * @hidden
  */
@@ -66,9 +66,10 @@ var ColorInput = /** @class */ (function (_super) {
         var gMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientG]);
         var bMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientB]);
         var aMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientA]);
+        var toggleButtonMessage = localizationService.toLanguageString(colorGradientToggleInputsButton, messages[colorGradientToggleInputsButton]);
         return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
             React.createElement("div", { className: "k-vstack" },
-                React.createElement(Button, { fillMode: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
+                React.createElement(Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
             this.state.inputMode === 'hex' &&
                 React.createElement("div", { className: "k-vstack k-flex-1" },
                     React.createElement("span", { className: "k-hex-value k-textbox k-input" },
@@ -77,18 +78,18 @@ var ColorInput = /** @class */ (function (_super) {
             (this.state.inputMode === 'rgb' || this.state.inputMode === 'rgba') &&
                 React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "k-vstack" },
-                        React.createElement(NumericTextBox, { value: this.props.rgba.r, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaRChange, disabled: this.props.disabled }),
+                        React.createElement(NumericTextBox, { inputType: 'number', value: this.props.rgba.r, ariaLabel: String(this.props.rgba.r), min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaRChange, disabled: this.props.disabled }),
                         React.createElement(Label, { className: "k-colorgradient-input-label" }, rMessage)),
                     React.createElement("div", { className: "k-vstack" },
-                        React.createElement(NumericTextBox, { value: this.props.rgba.g, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaGChange, disabled: this.props.disabled }),
+                        React.createElement(NumericTextBox, { inputType: 'number', value: this.props.rgba.g, ariaLabel: String(this.props.rgba.g), min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaGChange, disabled: this.props.disabled }),
                         React.createElement(Label, { className: "k-colorgradient-input-label" }, gMessage)),
                     React.createElement("div", { className: "k-vstack" },
-                        React.createElement(NumericTextBox, { value: this.props.rgba.b, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaBChange, disabled: this.props.disabled }),
+                        React.createElement(NumericTextBox, { inputType: 'number', value: this.props.rgba.b, ariaLabel: String(this.props.rgba.b), min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaBChange, disabled: this.props.disabled }),
                         React.createElement(Label, { className: "k-colorgradient-input-label" }, bMessage))),
             this.state.inputMode === 'rgba' &&
                 React.createElement("div", { className: "k-vstack" },
                     this.props.opacity &&
-                        React.createElement(NumericTextBox, { value: this.props.rgba.a, min: 0, max: 1, step: 0.01, spinners: false, format: "n2", onChange: this.onRgbaAChange, disabled: this.props.disabled }),
+                        React.createElement(NumericTextBox, { inputType: 'number', value: this.props.rgba.a, ariaLabel: String(this.props.rgba.a), min: 0, max: 1, step: 0.01, spinners: false, format: "n2", onChange: this.onRgbaAChange, disabled: this.props.disabled }),
                     this.props.opacity && (React.createElement(Label, { className: "k-colorgradient-input-label" }, aMessage)))));
     };
     ColorInput.prototype.dispatchRgbaChange = function (newValue, event) {

package/dist/es/colors/ColorPalette.js

@@ -115,10 +115,10 @@ 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-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords), "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; } },
+            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" },
                     React.createElement("table", { className: "k-colorpalette-table k-palette", role: "presentation" },
-                        React.createElement("tbody", null, this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords))))));
+                        React.createElement("tbody", { role: "rowgroup" }, this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords))))));
         }
         else {
             // In this way, the code prevents an eventual focus of the component when no cells are available.
@@ -219,7 +219,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
                 'k-selected': isSelected,
                 'k-focus': rowIsFocused && focusedColumn === i
             });
-            return (React.createElement("td", { className: className, "aria-label": color, "aria-selected": isSelected ? true : _this.props.disabled ? undefined : false, style: { backgroundColor: color, width: width, height: height, minWidth: width }, onClick: function (event) { return _this.onColorClick(color, event); }, id: _this.createCellId({ row: rowIndex, col: i }), key: i }));
+            return (React.createElement("td", { role: "gridcell", className: className, "aria-label": color, "aria-selected": isSelected ? true : _this.props.disabled ? undefined : false, style: { backgroundColor: color, width: width, height: height, minWidth: width }, onClick: function (event) { return _this.onColorClick(color, event); }, id: _this.createCellId({ row: rowIndex, col: i }), key: i }));
         });
     };
     ColorPaletteWithoutContext.prototype.createCellId = function (cellCoords) {

package/dist/es/input/Input.d.ts

@@ -32,6 +32,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel?: string;
     /**
      * Triggered after value change.
      */
@@ -57,6 +61,7 @@ export declare class InputWithoutContext extends React.Component<InputProps, Inp
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
     };
     /**
      * @hidden

package/dist/es/input/Input.js

@@ -201,11 +201,11 @@ var InputWithoutContext = /** @class */ (function (_super) {
         var _this = this;
         var _a = this.props, className = _a.className, label = _a.label, id = _a.id, validationMessage = _a.validationMessage, defaultValue = _a.defaultValue, valid = _a.valid, 
         // Removed to support direct use in Form Field component
-        visited = _a.visited, touched = _a.touched, modified = _a.modified, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, validityStyles = _a.validityStyles, style = _a.style, props = __rest(_a, ["className", "label", "id", "validationMessage", "defaultValue", "valid", "visited", "touched", "modified", "ariaLabelledBy", "ariaDescribedBy", "validityStyles", "style"]);
+        visited = _a.visited, touched = _a.touched, modified = _a.modified, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, validityStyles = _a.validityStyles, style = _a.style, ariaLabel = _a.ariaLabel, props = __rest(_a, ["className", "label", "id", "validationMessage", "defaultValue", "valid", "visited", "touched", "modified", "ariaLabelledBy", "ariaDescribedBy", "validityStyles", "style", "ariaLabel"]);
         var inputId = id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
         var inputClassName = classNames(className, 'k-input k-input-md k-rounded-md k-input-solid');
-        var textbox = (React.createElement("input", __assign({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-disabled": this.props.disabled || undefined, "aria-invalid": !isValid || undefined }, props, { style: !label
+        var textbox = (React.createElement("input", __assign({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-disabled": this.props.disabled || undefined, "aria-invalid": !isValid || undefined, "aria-label": ariaLabel || undefined }, props, { style: !label
                 ? style
                 : undefined, value: this.value, id: inputId, className: inputClassName, onChange: this.handleChange, onAnimationStart: this.handleAutoFill, ref: function (el) {
                 _this._input = el;
@@ -225,7 +225,8 @@ var InputWithoutContext = /** @class */ (function (_super) {
         validate: PropTypes.bool,
         id: PropTypes.string,
         ariaLabelledBy: PropTypes.string,
-        ariaDescribedBy: PropTypes.string
+        ariaDescribedBy: PropTypes.string,
+        ariaLabel: PropTypes.string
     };
     /**
      * @hidden

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

@@ -58,6 +58,18 @@ export declare const colorGradientPass = "colorGradient.colorGradientPass";
  * @hidden
  */
 export declare const colorGradientFail = "colorGradient.colorGradientFail";
+/**
+ * @hidden
+ */
+export declare const colorGradientHueSliderLabel = "colorGradient.hueSliderLabel";
+/**
+ * @hidden
+ */
+export declare const colorGradientAlphaSliderLabel = "colorGradient.alphaSliderLabel";
+/**
+ * @hidden
+ */
+export declare const colorGradientToggleInputsButton = "colorGradient.toggleInputsButton";
 /**
  * @hidden
  */
@@ -86,6 +98,10 @@ export declare const switchValidation = "switch.validation";
  * @hidden
  */
 export declare const colorPickerDropdownButtonAriaLabel = "colorPicker.dropdownButtonAriaLabel";
+/**
+ * @hidden
+ */
+export declare const ratingAriaLabel = "rating.ariaLabel";
 /**
  * @hidden
  */
@@ -105,6 +121,9 @@ export declare const messages: {
     "colorGradient.colorGradientAAALevel": string;
     "colorGradient.colorGradientPass": string;
     "colorGradient.colorGradientFail": string;
+    "colorGradient.hueSliderLabel": string;
+    "colorGradient.alphaSliderLabel": string;
+    "colorGradient.toggleInputsButton": string;
     "flatColorPicker.cancelBtn": string;
     "flatColorPicker.applyBtn": string;
     "checkbox.validation": string;
@@ -112,4 +131,5 @@ export declare const messages: {
     "radioButton.validation": string;
     "switch.validation": string;
     "colorPicker.dropdownButtonAriaLabel": string;
+    "rating.ariaLabel": string;
 };

package/dist/es/messages/index.js

@@ -59,6 +59,18 @@ export var colorGradientPass = 'colorGradient.colorGradientPass';
  * @hidden
  */
 export var colorGradientFail = 'colorGradient.colorGradientFail';
+/**
+ * @hidden
+ */
+export var colorGradientHueSliderLabel = 'colorGradient.hueSliderLabel';
+/**
+ * @hidden
+ */
+export var colorGradientAlphaSliderLabel = 'colorGradient.alphaSliderLabel';
+/**
+ * @hidden
+ */
+export var colorGradientToggleInputsButton = 'colorGradient.toggleInputsButton';
 /**
  * @hidden
  */
@@ -87,6 +99,10 @@ export var switchValidation = 'switch.validation';
  * @hidden
  */
 export var colorPickerDropdownButtonAriaLabel = 'colorPicker.dropdownButtonAriaLabel';
+/**
+ * @hidden
+ */
+export var ratingAriaLabel = 'rating.ariaLabel';
 /**
  * @hidden
  */
@@ -106,6 +122,9 @@ export var messages = (_a = {},
     _a[colorGradientAAALevel] = 'AAA',
     _a[colorGradientPass] = 'Pass',
     _a[colorGradientFail] = 'Fail',
+    _a[colorGradientHueSliderLabel] = 'Hue slider',
+    _a[colorGradientAlphaSliderLabel] = 'Alpha slider',
+    _a[colorGradientToggleInputsButton] = 'Toggle colorgradient inputs',
     _a[flatColorPickerCancelBtn] = 'Cancel',
     _a[flatColorPickerApplyBtn] = 'Apply',
     _a[checkboxValidation] = 'Please check this box if you want to proceed!',
@@ -113,4 +132,5 @@ export var messages = (_a = {},
     _a[radioButtonValidation] = 'Please select option if you want to proceed!',
     _a[switchValidation] = 'Please turn on if you want to proceed!',
     _a[colorPickerDropdownButtonAriaLabel] = 'Select',
+    _a[ratingAriaLabel] = 'Rating',
     _a);

package/dist/es/numerictextbox/interfaces/NumericTextBoxProps.d.ts

@@ -4,7 +4,7 @@ import { NumberFormatOptions } from '@progress/kendo-react-intl';
 import { NumericTextBoxChangeEvent } from './NumericTextBoxChangeEvent';
 import { NumericTextBoxFocusEvent } from './NumericTextBoxFocusEvent';
 import { NumericTextBoxBlurEvent } from './NumericTextBoxBlurEvent';
-declare type NumericTextBoxInputType = 'tel' | 'text';
+declare type NumericTextBoxInputType = 'tel' | 'text' | 'number';
 /**
  * Represents the props of the [KendoReact NumericTextBox component]({% slug overview_numerictextbox %}).
  */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1657804319,
+    publishDate: 1659604208,
     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/range-slider/RangeSlider.js

@@ -212,12 +212,12 @@ export var RangeSlider = React.forwardRef(function (directProps, ref) {
         setCurrentDrag('');
     };
     useDraggable(sliderTrackWrapRef, { onPress: handleTrackPress, onDrag: handleTrackDrag, onRelease: handleTrackRelease });
-    return (React.createElement("div", { role: "slider", id: props.id, style: props.style, ref: sliderRef, dir: dir, className: classNames('k-widget k-slider', {
+    return (React.createElement("div", { id: props.id, style: props.style, ref: sliderRef, dir: dir, className: classNames('k-widget k-slider', {
             'k-rtl': dir === 'rtl',
             'k-disabled': props.disabled,
             'k-slider-vertical': props.vertical,
             'k-slider-horizontal': !props.vertical
-        }, props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
+        }, props.className) },
         React.createElement("div", { ref: sliderTrackWrapRef, className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
             props.children && (React.createElement("ul", { className: "k-reset k-slider-items", style: __assign({}, sliderItemsStyle) }, React.Children.map(props.children, function (child) {
                 return child && React.cloneElement(child, {
@@ -235,11 +235,11 @@ export var RangeSlider = React.forwardRef(function (directProps, ref) {
                             _b[dir === 'rtl' ? 'right' : 'left'] = percentStart + '%',
                             _b.width = (percentEnd - percentStart) + '%',
                             _b) }),
-                React.createElement("a", { ref: startHandle, role: "slider", tabIndex: getTabIndex(props.startTabIndex, props.disabled, undefined), "aria-valuemin": min, "aria-valuemax": Math.max(max, value.end), "aria-valuenow": value.start, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical
+                React.createElement("span", { ref: startHandle, role: "slider", tabIndex: getTabIndex(props.startTabIndex, props.disabled, undefined), "aria-valuemin": min, "aria-valuemax": Math.max(max, value.end), "aria-valuenow": value.start, "aria-disabled": props.disabled ? 'true' : undefined, "aria-valuetext": "".concat(value.start, " - ").concat(value.end), className: "k-draghandle", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical
                         ? { bottom: 'calc(' + percentStart + '%)', zIndex: 1 }
                         : dir === 'rtl' ? { right: 'calc(' + percentStart + '% - 13px)', zIndex: 1 }
                             : { left: 'calc(' + percentStart + '%)', zIndex: 1 }, onKeyDown: handleStartKeyDown }),
-                React.createElement("a", { ref: endHandle, role: "slider", tabIndex: getTabIndex(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical
+                React.createElement("span", { ref: endHandle, role: "slider", tabIndex: getTabIndex(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, "aria-valuetext": "".concat(value.start, " - ").concat(value.end), className: "k-draghandle", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical
                         ? { bottom: 'calc(' + percentEnd + '%)', zIndex: 1 }
                         : dir === 'rtl' ? { right: 'calc(' + percentEnd + '% - 13px)', zIndex: 1 }
                             : { left: 'calc(' + percentEnd + '%)', zIndex: 1 }, onKeyDown: handleEndKeyDown })))));

package/dist/es/rating/Rating.js

@@ -15,6 +15,8 @@ import { classNames, useDir, Keys, getTabIndex, createPropsContext, usePropsCont
 import { RatingItem } from './RatingItem';
 import { ratingReducer, RATING_ACTION } from './rating-reducer';
 import { isSelected, isHalf, calcIsFirstHalf, isCorrectValue, toRound, getRemainder } from './utils';
+import { messages, ratingAriaLabel } from '../messages';
+import { useLocalization } from '@progress/kendo-react-intl';
 /**
  * @hidden
  */
@@ -45,6 +47,7 @@ export var RatingPropsContext = createPropsContext();
 export var Rating = React.forwardRef(function (directProps, ref) {
     var _a, _b, _c, _d;
     var props = usePropsContext(RatingPropsContext, directProps);
+    var localization = useLocalization();
     var target = React.useRef(null);
     var ratingRef = React.useRef(null);
     var dir = useDir(ratingRef, props.dir);
@@ -225,7 +228,7 @@ export var Rating = React.forwardRef(function (directProps, ref) {
             'k-rtl': dir === 'rtl',
             'k-state-readonly': readonly,
             'k-disabled': disabled
-        }, props.className), onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value !== null ? value : undefined, "aria-disabled": disabled ? 'true' : undefined, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
+        }, props.className), onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value !== null ? value : undefined, "aria-disabled": disabled ? 'true' : undefined, "aria-label": localization.toLanguageString(ratingAriaLabel, messages[ratingAriaLabel]), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
         React.createElement("input", { id: 'rating', className: 'k-hidden', readOnly: readonly, disabled: disabled }),
         React.createElement("span", { className: 'k-rating-container' }, items),
         props.label &&

package/dist/es/slider/Slider.d.ts

@@ -91,6 +91,10 @@ export interface SliderProps extends FormComponentProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
     dir?: Direction;
 }
 /**
@@ -115,6 +119,7 @@ export declare class SliderWithoutContext extends React.Component<SliderProps, S
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
     };
     /**
      * @hidden

package/dist/es/slider/Slider.js

@@ -176,7 +176,7 @@ var SliderWithoutContext = /** @class */ (function (_super) {
         var sliderItemsStyle = this.props.vertical
             ? { paddingTop: 0, height: '100%' }
             : {};
-        return (React.createElement("div", { ref: function (el) { return _this._element = el; }, "aria-valuemin": this.props.min, "aria-valuemax": this.props.max, "aria-valuenow": this.state.value, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, dir: this.state.dir, role: "slider", id: this.props.id, style: __assign({ gap: 0 }, this.props.style), tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled, undefined), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: classNames('k-slider k-widget', {
+        return (React.createElement("div", { ref: function (el) { return _this._element = el; }, dir: this.state.dir, id: this.props.id, style: __assign({ gap: 0 }, this.props.style), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: classNames('k-slider k-widget', {
                 'k-focus': this.state.focused,
                 'k-disabled': this.props.disabled,
                 'k-slider-horizontal': !this.props.vertical,
@@ -198,7 +198,7 @@ var SliderWithoutContext = /** @class */ (function (_super) {
                             React.createElement("div", { className: "k-slider-selection", style: this.props.vertical
                                     ? { height: percentValue + '%' }
                                     : { width: percentValue + '%' } }),
-                            React.createElement("a", { className: "k-draghandle", title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: this.props.vertical
+                            React.createElement("span", { role: "slider", "aria-valuemin": this.props.min, "aria-valuemax": this.props.max, "aria-valuenow": this.state.value, "aria-valuetext": String(this.state.value), "aria-orientation": this.props.vertical ? 'vertical' : undefined, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-label": this.props.ariaLabel, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled, undefined), className: "k-draghandle", title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: this.props.vertical
                                     ? { bottom: 'calc(' + percentValue + '%)', zIndex: 1 }
                                     : this.state.dir === 'rtl' ? { right: 'calc(' + percentValue + '% - 13px)', zIndex: 1 }
                                         : { left: 'calc(' + percentValue + '%)', zIndex: 1 } })))))));
@@ -229,7 +229,8 @@ var SliderWithoutContext = /** @class */ (function (_super) {
         vertical: PropTypes.bool,
         id: PropTypes.string,
         ariaLabelledBy: PropTypes.string,
-        ariaDescribedBy: PropTypes.string
+        ariaDescribedBy: PropTypes.string,
+        ariaLabel: PropTypes.string
         // TODO: validation when buttons is set to true, but no step is provided
     };
     return SliderWithoutContext;

package/dist/es/slider/SliderLabel.js

@@ -26,6 +26,6 @@ export var SliderLabel = function (props) {
         ? { bottom: "".concat(props.position, "%") }
         : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = "".concat(props.position, "%"), _a);
     var tickStyle = props.vertical ? 'k-tick-vertical' : 'k-tick-horizontal';
-    return (React.createElement("li", { ref: sliderLabelRef, role: "presentation", className: "k-tick k-tick-large ".concat(tickStyle), title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) },
+    return (React.createElement("li", { ref: sliderLabelRef, className: "k-tick k-tick-large ".concat(tickStyle), title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) },
         React.createElement("span", __assign({}, (_b = {}, _b[SLIDER_LABEL_ATTRIBUTE] = true, _b), { className: "k-label", onClick: props.onClick }), props.children)));
 };

package/dist/npm/colors/ColorGradient.js

@@ -28,6 +28,8 @@ var color_cache_1 = require("./utils/color-cache");
 var ColorInput_1 = require("./ColorInput");
 var ColorContrastLabels_1 = require("./ColorContrastLabels");
 var ColorContrastSvg_1 = require("./ColorContrastSvg");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var messages_1 = require("./../messages");
 var FORMAT = 'rgba';
 var DEFAULT_SELECTED_COLOR = 'rgba(255, 255, 255, 1)';
 /** @hidden */
@@ -241,6 +243,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      */
     ColorGradientWithoutContext.prototype.render = function () {
         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 },
             React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
@@ -250,9 +253,9 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
                     this.props.backgroundColor && !this.state.isFirstRender &&
                         React.createElement(ColorContrastSvg_1.ColorContrastSvg, { metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined, hsva: this.state.hsva, backgroundColor: this.props.backgroundColor })),
                 React.createElement("div", { className: "k-hsv-controls k-hstack" },
-                    React.createElement(main_1.Slider, { value: this.state.hsva.h, buttons: false, vertical: true, min: 0, max: 360, step: 5, onChange: this.onHueSliderChange, className: "k-hue-slider k-colorgradient-slider", disabled: this.props.disabled }),
+                    React.createElement(main_1.Slider, { value: this.state.hsva.h, buttons: false, vertical: true, min: 0, max: 360, step: 5, onChange: this.onHueSliderChange, className: "k-hue-slider k-colorgradient-slider", disabled: this.props.disabled, ariaLabel: lS.toLanguageString(messages_1.colorGradientHueSliderLabel, messages_1.messages[messages_1.colorGradientHueSliderLabel]) }),
                     this.props.opacity &&
-                        React.createElement(main_1.Slider, { value: (0, misc_1.isPresent)(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, onChange: this.onAlphaSliderChange, className: "k-alpha-slider k-colorgradient-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
+                        React.createElement(main_1.Slider, { value: (0, misc_1.isPresent)(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, ariaLabel: lS.toLanguageString(messages_1.colorGradientAlphaSliderLabel, messages_1.messages[messages_1.colorGradientAlphaSliderLabel]), onChange: this.onAlphaSliderChange, className: "k-alpha-slider k-colorgradient-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
             React.createElement(ColorInput_1.default, { rgba: this.state.rgba, onRgbaChange: this.onRgbaChange, hex: this.state.hex, onHexChange: this.onHexChange, opacity: this.props.opacity, disabled: this.props.disabled }),
             this.props.backgroundColor && (React.createElement(ColorContrastLabels_1.ColorContrastLabels, { bgColor: (0, color_parser_1.getRGBA)(this.props.backgroundColor), rgba: this.state.rgba }))));
     };

package/dist/npm/colors/ColorInput.js

@@ -68,9 +68,10 @@ var ColorInput = /** @class */ (function (_super) {
         var gMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientG]);
         var bMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientB]);
         var aMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientA]);
+        var toggleButtonMessage = localizationService.toLanguageString(messages_1.colorGradientToggleInputsButton, messages_1.messages[messages_1.colorGradientToggleInputsButton]);
         return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
             React.createElement("div", { className: "k-vstack" },
-                React.createElement(kendo_react_buttons_1.Button, { fillMode: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
+                React.createElement(kendo_react_buttons_1.Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
             this.state.inputMode === 'hex' &&
                 React.createElement("div", { className: "k-vstack k-flex-1" },
                     React.createElement("span", { className: "k-hex-value k-textbox k-input" },
@@ -79,18 +80,18 @@ var ColorInput = /** @class */ (function (_super) {
             (this.state.inputMode === 'rgb' || this.state.inputMode === 'rgba') &&
                 React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "k-vstack" },
-                        React.createElement(main_1.NumericTextBox, { value: this.props.rgba.r, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaRChange, disabled: this.props.disabled }),
+                        React.createElement(main_1.NumericTextBox, { inputType: 'number', value: this.props.rgba.r, ariaLabel: String(this.props.rgba.r), min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaRChange, disabled: this.props.disabled }),
                         React.createElement(kendo_react_labels_1.Label, { className: "k-colorgradient-input-label" }, rMessage)),
                     React.createElement("div", { className: "k-vstack" },
-                        React.createElement(main_1.NumericTextBox, { value: this.props.rgba.g, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaGChange, disabled: this.props.disabled }),
+                        React.createElement(main_1.NumericTextBox, { inputType: 'number', value: this.props.rgba.g, ariaLabel: String(this.props.rgba.g), min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaGChange, disabled: this.props.disabled }),
                         React.createElement(kendo_react_labels_1.Label, { className: "k-colorgradient-input-label" }, gMessage)),
                     React.createElement("div", { className: "k-vstack" },
-                        React.createElement(main_1.NumericTextBox, { value: this.props.rgba.b, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaBChange, disabled: this.props.disabled }),
+                        React.createElement(main_1.NumericTextBox, { inputType: 'number', value: this.props.rgba.b, ariaLabel: String(this.props.rgba.b), min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaBChange, disabled: this.props.disabled }),
                         React.createElement(kendo_react_labels_1.Label, { className: "k-colorgradient-input-label" }, bMessage))),
             this.state.inputMode === 'rgba' &&
                 React.createElement("div", { className: "k-vstack" },
                     this.props.opacity &&
-                        React.createElement(main_1.NumericTextBox, { value: this.props.rgba.a, min: 0, max: 1, step: 0.01, spinners: false, format: "n2", onChange: this.onRgbaAChange, disabled: this.props.disabled }),
+                        React.createElement(main_1.NumericTextBox, { inputType: 'number', value: this.props.rgba.a, ariaLabel: String(this.props.rgba.a), min: 0, max: 1, step: 0.01, spinners: false, format: "n2", onChange: this.onRgbaAChange, disabled: this.props.disabled }),
                     this.props.opacity && (React.createElement(kendo_react_labels_1.Label, { className: "k-colorgradient-input-label" }, aMessage)))));
     };
     ColorInput.prototype.dispatchRgbaChange = function (newValue, event) {

package/dist/npm/colors/ColorPalette.js

@@ -118,10 +118,10 @@ 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-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords), "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; } },
+            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" },
                     React.createElement("table", { className: "k-colorpalette-table k-palette", role: "presentation" },
-                        React.createElement("tbody", null, this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords))))));
+                        React.createElement("tbody", { role: "rowgroup" }, this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords))))));
         }
         else {
             // In this way, the code prevents an eventual focus of the component when no cells are available.
@@ -222,7 +222,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
                 'k-selected': isSelected,
                 'k-focus': rowIsFocused && focusedColumn === i
             });
-            return (React.createElement("td", { className: className, "aria-label": color, "aria-selected": isSelected ? true : _this.props.disabled ? undefined : false, style: { backgroundColor: color, width: width, height: height, minWidth: width }, onClick: function (event) { return _this.onColorClick(color, event); }, id: _this.createCellId({ row: rowIndex, col: i }), key: i }));
+            return (React.createElement("td", { role: "gridcell", className: className, "aria-label": color, "aria-selected": isSelected ? true : _this.props.disabled ? undefined : false, style: { backgroundColor: color, width: width, height: height, minWidth: width }, onClick: function (event) { return _this.onColorClick(color, event); }, id: _this.createCellId({ row: rowIndex, col: i }), key: i }));
         });
     };
     ColorPaletteWithoutContext.prototype.createCellId = function (cellCoords) {

package/dist/npm/input/Input.d.ts

@@ -32,6 +32,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel?: string;
     /**
      * Triggered after value change.
      */
@@ -57,6 +61,7 @@ export declare class InputWithoutContext extends React.Component<InputProps, Inp
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
     };
     /**
      * @hidden

package/dist/npm/input/Input.js

@@ -204,11 +204,11 @@ var InputWithoutContext = /** @class */ (function (_super) {
         var _this = this;
         var _a = this.props, className = _a.className, label = _a.label, id = _a.id, validationMessage = _a.validationMessage, defaultValue = _a.defaultValue, valid = _a.valid, 
         // Removed to support direct use in Form Field component
-        visited = _a.visited, touched = _a.touched, modified = _a.modified, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, validityStyles = _a.validityStyles, style = _a.style, props = __rest(_a, ["className", "label", "id", "validationMessage", "defaultValue", "valid", "visited", "touched", "modified", "ariaLabelledBy", "ariaDescribedBy", "validityStyles", "style"]);
+        visited = _a.visited, touched = _a.touched, modified = _a.modified, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, validityStyles = _a.validityStyles, style = _a.style, ariaLabel = _a.ariaLabel, props = __rest(_a, ["className", "label", "id", "validationMessage", "defaultValue", "valid", "visited", "touched", "modified", "ariaLabelledBy", "ariaDescribedBy", "validityStyles", "style", "ariaLabel"]);
         var inputId = id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
         var inputClassName = (0, kendo_react_common_1.classNames)(className, 'k-input k-input-md k-rounded-md k-input-solid');
-        var textbox = (React.createElement("input", __assign({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-disabled": this.props.disabled || undefined, "aria-invalid": !isValid || undefined }, props, { style: !label
+        var textbox = (React.createElement("input", __assign({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-disabled": this.props.disabled || undefined, "aria-invalid": !isValid || undefined, "aria-label": ariaLabel || undefined }, props, { style: !label
                 ? style
                 : undefined, value: this.value, id: inputId, className: inputClassName, onChange: this.handleChange, onAnimationStart: this.handleAutoFill, ref: function (el) {
                 _this._input = el;
@@ -228,7 +228,8 @@ var InputWithoutContext = /** @class */ (function (_super) {
         validate: PropTypes.bool,
         id: PropTypes.string,
         ariaLabelledBy: PropTypes.string,
-        ariaDescribedBy: PropTypes.string
+        ariaDescribedBy: PropTypes.string,
+        ariaLabel: PropTypes.string
     };
     /**
      * @hidden

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

@@ -58,6 +58,18 @@ export declare const colorGradientPass = "colorGradient.colorGradientPass";
  * @hidden
  */
 export declare const colorGradientFail = "colorGradient.colorGradientFail";
+/**
+ * @hidden
+ */
+export declare const colorGradientHueSliderLabel = "colorGradient.hueSliderLabel";
+/**
+ * @hidden
+ */
+export declare const colorGradientAlphaSliderLabel = "colorGradient.alphaSliderLabel";
+/**
+ * @hidden
+ */
+export declare const colorGradientToggleInputsButton = "colorGradient.toggleInputsButton";
 /**
  * @hidden
  */
@@ -86,6 +98,10 @@ export declare const switchValidation = "switch.validation";
  * @hidden
  */
 export declare const colorPickerDropdownButtonAriaLabel = "colorPicker.dropdownButtonAriaLabel";
+/**
+ * @hidden
+ */
+export declare const ratingAriaLabel = "rating.ariaLabel";
 /**
  * @hidden
  */
@@ -105,6 +121,9 @@ export declare const messages: {
     "colorGradient.colorGradientAAALevel": string;
     "colorGradient.colorGradientPass": string;
     "colorGradient.colorGradientFail": string;
+    "colorGradient.hueSliderLabel": string;
+    "colorGradient.alphaSliderLabel": string;
+    "colorGradient.toggleInputsButton": string;
     "flatColorPicker.cancelBtn": string;
     "flatColorPicker.applyBtn": string;
     "checkbox.validation": string;
@@ -112,4 +131,5 @@ export declare const messages: {
     "radioButton.validation": string;
     "switch.validation": string;
     "colorPicker.dropdownButtonAriaLabel": string;
+    "rating.ariaLabel": string;
 };