@progress/kendo-react-layout 5.12.0-dev.202302271006 → 5.12.0-dev.202303130940

package/dist/es/bottomnavigation/BottomNavigationItem.js

@@ -29,7 +29,7 @@ export var BottomNavigationItem = React.forwardRef(function (props, ref) {
     }, [onKeyDown, index, disabled]);
     var renderer = render;
     var ItemComp = item;
-    var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-selected": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
+    var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-current": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
         (React.createElement(React.Fragment, null,
             (icon || svgIcon) && React.createElement(IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon }),
             text && React.createElement("span", { className: 'k-bottom-nav-item-text', style: { userSelect: 'none' } }, text)))));

package/dist/es/breadcrumb/BreadcrumbDelimiter.js

@@ -19,7 +19,7 @@ export var BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
         });
     });
     React.useImperativeHandle(ref, function () { return target.current; });
-    return (React.createElement(IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", icon: chevronRightIcon, className: "k-breadcrumb-delimiter-icon" }));
+    return (React.createElement(IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, "aria-hidden": true, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", icon: chevronRightIcon, className: "k-breadcrumb-delimiter-icon" }));
 });
 var propTypes = {
     id: PropTypes.string,

package/dist/es/breadcrumb/BreadcrumbLink.js

@@ -28,7 +28,7 @@ export var BreadcrumbLink = React.forwardRef(function (props, ref) {
             dispatchEvent(props.onKeyDown, event, event.target, { id: props.id });
         }
     }, [props.onKeyDown]);
-    return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, id: props.id, ref: linkRef, style: props.style, dir: useDir(linkRef, props.dir), tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icontext-link', {
+    return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, role: 'link', id: props.id, ref: linkRef, style: props.style, dir: useDir(linkRef, props.dir), tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icontext-link', {
             'k-disabled': props.disabled
         }), onClick: handleItemSelect, onKeyDown: handleKeyDown },
         props.iconClass

package/dist/es/drawer/DrawerItem.js

@@ -84,8 +84,8 @@ export var DrawerItem = React.forwardRef(function (props, target) {
         (icon || svgIcon) && React.createElement(IconWrap, { name: icon ? toIconName(icon) : icon, icon: svgIcon }),
         !expanded && mini ? null : React.createElement("span", { className: 'k-item-text' }, text)));
     return (separator
-        ? React.createElement("li", { className: 'k-drawer-item k-drawer-separator', role: "presentation" })
-        : (React.createElement("li", __assign({ ref: elementRef, className: itemClassNames, style: style, role: "option", "aria-selected": selected, "aria-disabled": disabled, onClick: handleClick, tabIndex: getTabIndex(tabIndex, disabled) }, others), !item ? drawerItemContent : children)));
+        ? React.createElement("li", { className: 'k-drawer-item k-drawer-separator', role: "separator" })
+        : (React.createElement("li", __assign({ ref: elementRef, className: itemClassNames, style: style, role: "menuitem", "aria-label": text, "aria-disabled": disabled, onClick: handleClick, tabIndex: getTabIndex(tabIndex, disabled) }, others), !item ? drawerItemContent : children)));
 });
 DrawerItem.propTypes = {
     className: PropTypes.string,

package/dist/es/drawer/DrawerNavigation.js

@@ -124,7 +124,7 @@ export var DrawerNavigation = React.forwardRef(function (props, target) {
             (dir === 'ltr' && position === 'start') || (dir === 'rtl' && position === 'end') ?
                 mini ? collapseOverlayMini : collapseOverlay :
                 mini ? collapseOverlayMini : collapseOverlayRtl;
-    var drawerItems = (items && (React.createElement("ul", { className: 'k-drawer-items', role: "listbox", "aria-label": "drawer-list", "aria-expanded": expanded }, items
+    var drawerItems = (items && (React.createElement("ul", { className: 'k-drawer-items', role: "menubar", "aria-label": "drawer-list", "aria-expanded": expanded }, items
         .map(function (element, index) {
         var drawerItemProps = __assign(__assign({ index: index }, element), { onSelect: onSelect });
         var ItemComp = item || DrawerItem;

package/dist/es/menu/components/MenuItemArrow.js

@@ -50,7 +50,7 @@ var MenuItemArrow = /** @class */ (function (_super) {
      * @hidden
      */
     MenuItemArrow.prototype.render = function () {
-        return React.createElement(IconWrap, __assign({ className: 'k-menu-expand-arrow' }, this.getIcon()));
+        return React.createElement(IconWrap, __assign({ "aria-hidden": true, className: 'k-menu-expand-arrow' }, this.getIcon()));
     };
     MenuItemArrow.prototype.getIcon = function () {
         var childrenPosition = getChildrenPosition(this.props.itemId, this.props.verticalMenu === true, this.props.dir === 'rtl');

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1677491005,
+    publishDate: 1678699363,
     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/panelbar/PanelBarItem.js

@@ -101,7 +101,7 @@ var PanelBarItem = /** @class */ (function (_super) {
             : null;
         var opened = (!disabled && expanded);
         var content = opened || keepItemsMounted
-            ? (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted
+            ? (React.createElement("ul", { role: "group", "aria-expanded": expanded, "aria-hidden": !expanded, className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted
                         ? (this.state.show ? 'block' : 'none')
                         : 'block' } }, children))
             : null;

package/dist/es/splitter/Splitter.js

@@ -41,6 +41,8 @@ import { SplitterBar } from './SplitterBar';
 import { classNames } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+import { messages, splitBarLabel } from './messages';
+import { provideLocalizationService } from '@progress/kendo-react-intl';
 /**
  * @hidden
  */
@@ -112,13 +114,14 @@ var Splitter = /** @class */ (function (_super) {
             return paneOptions;
         };
         _this.mapSplitterPanes = function (panes, panesContent) {
+            var ariaLabel = provideLocalizationService(_this).toLanguageString(splitBarLabel, messages[splitBarLabel]);
             return panes.map(function (pane, index) {
                 var splitterBar;
                 var paneKey = index * 2;
                 var barKey = paneKey + 1;
                 if (index + 1 < panes.length) {
                     var next = panes[index + 1];
-                    splitterBar = (React.createElement(SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize }));
+                    splitterBar = (React.createElement(SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, ariaLabel: ariaLabel, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize }));
                 }
                 var splitterPane = (React.createElement(SplitterPane, __assign({ key: paneKey }, pane), panesContent[index]));
                 return [splitterPane, splitterBar];

package/dist/es/splitter/SplitterBar.d.ts

@@ -8,6 +8,7 @@ export interface SplitterBarProps {
     index: number;
     prev: SplitterPaneExtendedProps;
     next: SplitterPaneExtendedProps;
+    ariaLabel?: string;
     onDrag: (event: any, element: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean) => void;
     onToggle: (index: number, nativeEvent: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
     onKeyboardResize: (element: HTMLDivElement, index: number, delta: number, nativeEvent: React.KeyboardEvent<HTMLDivElement>) => void;

package/dist/es/splitter/SplitterBar.js

@@ -139,7 +139,7 @@ var SplitterBar = /** @class */ (function (_super) {
             _a['k-splitbar-static-vertical'] = !isHorizontal && isStatic,
             _a));
         return (React.createElement(Draggable, { onPress: function (event) { return _this.onDrag(event, true, false); }, onDrag: function (event) { return _this.onDrag(event, false, false); }, onRelease: function (event) { return _this.onDrag(event, false, true); }, ref: function (component) { _this.draggable = component; } },
-            React.createElement("div", { tabIndex: isStatic ? -1 : 0, role: 'separator', className: barClasses, style: { touchAction: 'none' }, onFocus: this.onFocus, onBlur: this.onBlur, onDoubleClick: this.onToggle, onKeyDown: this.onKeyDown },
+            React.createElement("div", { tabIndex: isStatic ? -1 : 0, role: 'separator', "aria-valuenow": 0, "aria-label": this.props.ariaLabel, "aria-orientation": isHorizontal ? 'vertical' : undefined, className: barClasses, style: { touchAction: 'none' }, onFocus: this.onFocus, onBlur: this.onBlur, onDoubleClick: this.onToggle, onKeyDown: this.onKeyDown },
                 this.props.prev.collapsible && React.createElement("div", { className: 'k-collapse-prev', onClick: this.onPrevToggle },
                     React.createElement(IconWrap, { name: this.props.prev.collapsible
                             ? isHorizontal

package/dist/es/splitter/SplitterPane.js

@@ -37,7 +37,7 @@ var SplitterPane = /** @class */ (function (_super) {
             _a['k-pane-static'] = !resizable && !collapsible || fixedSize,
             _a['k-scrollable'] = scrollable,
             _a));
-        return (React.createElement("div", { id: id, style: style, className: paneClasses },
+        return (React.createElement("div", { id: id, role: 'group', style: style, className: paneClasses },
             !collapsed || keepMounted ? this.props.children : undefined,
             overlay ? React.createElement("div", { className: 'k-splitter-overlay k-overlay' }) : undefined));
     };

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

@@ -0,0 +1,10 @@
+/**
+ * @hidden
+ */
+export declare const splitBarLabel = "splitBarLabel";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    splitBarLabel: string;
+};

package/dist/es/splitter/messages/index.js

@@ -0,0 +1,11 @@
+var _a;
+/**
+ * @hidden
+ */
+export var splitBarLabel = 'splitBarLabel';
+/**
+ * @hidden
+ */
+export var messages = (_a = {},
+    _a[splitBarLabel] = 'split bar',
+    _a);

package/dist/es/stepper/Step.js

@@ -117,7 +117,7 @@ export var Step = React.forwardRef(function (props, target) {
         stepIndicator,
         stepLabel));
     return (React.createElement("li", __assign({ ref: elementRef, className: itemClassNames, style: itemStyles }, others),
-        React.createElement("a", { className: "k-step-link", title: label ? label : undefined, onClick: handleClick, onFocus: handleFocus, tabIndex: tabIndex ? tabIndex : focused ? 0 : -1, "aria-current": current ? 'step' : undefined, "aria-disabled": disabled || !allowClick || undefined, "aria-invalid": isValid !== undefined && !isValid || undefined }, !item ? stepLink : children)));
+        React.createElement("a", { className: "k-step-link", title: label ? label : undefined, onClick: handleClick, onFocus: handleFocus, tabIndex: tabIndex ? tabIndex : focused ? 0 : -1, "aria-current": current, "aria-disabled": disabled || !allowClick || undefined, "aria-invalid": isValid !== undefined && !isValid || undefined }, !item ? stepLink : children)));
 });
 Step.propTypes = {
     children: PropTypes.any,

package/dist/es/stepper/Stepper.js

@@ -18,6 +18,8 @@ import { ProgressBar } from '@progress/kendo-react-progressbars';
 import { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from './contants';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, progBarAriaLabel } from './messages';
 /**
  * Represents the [KendoReact Stepper component]({% slug overview_stepper %}).
  *
@@ -40,6 +42,8 @@ import { packageMetadata } from '../package-metadata';
 export var Stepper = React.forwardRef(function (props, target) {
     validatePackage(packageMetadata);
     var animationDuration = props.animationDuration, children = props.children, className = props.className, disabled = props.disabled, errorIcon = props.errorIcon, errorSVGIcon = props.errorSVGIcon, item = props.item, items = props.items, linear = props.linear, mode = props.mode, orientation = props.orientation, style = props.style, successIcon = props.successIcon, successSVGIcon = props.successSVGIcon, onChange = props.onChange, onFocus = props.onFocus;
+    var localizationService = useLocalization();
+    var pbAriaLabel = localizationService.toLanguageString(progBarAriaLabel, messages[progBarAriaLabel]);
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
@@ -188,7 +192,7 @@ export var Stepper = React.forwardRef(function (props, target) {
         } },
         React.createElement("nav", { className: stepperClasses, style: stepperStyles, dir: dir, onKeyDown: handleKeyDown },
             React.createElement("ol", { className: listClasses, style: listStyles }, steps ? steps : children),
-            React.createElement(ProgressBar, { style: progressbarStyles, animation: { duration: animation }, "aria-hidden": true, max: numOfSteps - 1, labelVisible: false, orientation: orientation, reverse: orientation === 'vertical', value: value, disabled: disabled, tabIndex: -1 }))));
+            React.createElement(ProgressBar, { style: progressbarStyles, animation: { duration: animation }, ariaLabel: pbAriaLabel, "aria-hidden": true, max: numOfSteps - 1, labelVisible: false, orientation: orientation, reverse: orientation === 'vertical', value: value, disabled: disabled, tabIndex: -1 }))));
 });
 Stepper.propTypes = {
     animationDuration: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),

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

@@ -2,9 +2,14 @@
  * @hidden
  */
 export declare const optionalText = "stepper.optionalText";
+/**
+ * @hidden
+ */
+export declare const progBarAriaLabel = "stepper.progBarAriaLabel";
 /**
  * @hidden
  */
 export declare const messages: {
     "stepper.optionalText": string;
+    "stepper.progBarAriaLabel": string;
 };

package/dist/es/stepper/messages/index.js

@@ -3,9 +3,14 @@ var _a;
  * @hidden
  */
 export var optionalText = 'stepper.optionalText';
+/**
+ * @hidden
+ */
+export var progBarAriaLabel = 'stepper.progBarAriaLabel';
 /**
  * @hidden
  */
 export var messages = (_a = {},
     _a[optionalText] = '(Optional)',
+    _a[progBarAriaLabel] = 'progressbar',
     _a);

package/dist/npm/bottomnavigation/BottomNavigationItem.js

@@ -32,7 +32,7 @@ exports.BottomNavigationItem = React.forwardRef(function (props, ref) {
     }, [onKeyDown, index, disabled]);
     var renderer = render;
     var ItemComp = item;
-    var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-selected": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
+    var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-current": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
         (React.createElement(React.Fragment, null,
             (icon || svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon }),
             text && React.createElement("span", { className: 'k-bottom-nav-item-text', style: { userSelect: 'none' } }, text)))));

package/dist/npm/breadcrumb/BreadcrumbDelimiter.js

@@ -22,7 +22,7 @@ exports.BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
         });
     });
     React.useImperativeHandle(ref, function () { return target.current; });
-    return (React.createElement(kendo_react_common_1.IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", icon: kendo_svg_icons_1.chevronRightIcon, className: "k-breadcrumb-delimiter-icon" }));
+    return (React.createElement(kendo_react_common_1.IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, "aria-hidden": true, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", icon: kendo_svg_icons_1.chevronRightIcon, className: "k-breadcrumb-delimiter-icon" }));
 });
 var propTypes = {
     id: PropTypes.string,

package/dist/npm/breadcrumb/BreadcrumbLink.js

@@ -31,7 +31,7 @@ exports.BreadcrumbLink = React.forwardRef(function (props, ref) {
             (0, kendo_react_common_1.dispatchEvent)(props.onKeyDown, event, event.target, { id: props.id });
         }
     }, [props.onKeyDown]);
-    return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, id: props.id, ref: linkRef, style: props.style, dir: (0, kendo_react_common_1.useDir)(linkRef, props.dir), tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)('k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icontext-link', {
+    return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, role: 'link', id: props.id, ref: linkRef, style: props.style, dir: (0, kendo_react_common_1.useDir)(linkRef, props.dir), tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)('k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icontext-link', {
             'k-disabled': props.disabled
         }), onClick: handleItemSelect, onKeyDown: handleKeyDown },
         props.iconClass

package/dist/npm/drawer/DrawerItem.js

@@ -87,8 +87,8 @@ exports.DrawerItem = React.forwardRef(function (props, target) {
         (icon || svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { name: icon ? (0, kendo_react_common_1.toIconName)(icon) : icon, icon: svgIcon }),
         !expanded && mini ? null : React.createElement("span", { className: 'k-item-text' }, text)));
     return (separator
-        ? React.createElement("li", { className: 'k-drawer-item k-drawer-separator', role: "presentation" })
-        : (React.createElement("li", __assign({ ref: elementRef, className: itemClassNames, style: style, role: "option", "aria-selected": selected, "aria-disabled": disabled, onClick: handleClick, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled) }, others), !item ? drawerItemContent : children)));
+        ? React.createElement("li", { className: 'k-drawer-item k-drawer-separator', role: "separator" })
+        : (React.createElement("li", __assign({ ref: elementRef, className: itemClassNames, style: style, role: "menuitem", "aria-label": text, "aria-disabled": disabled, onClick: handleClick, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled) }, others), !item ? drawerItemContent : children)));
 });
 exports.DrawerItem.propTypes = {
     className: PropTypes.string,

package/dist/npm/drawer/DrawerNavigation.js

@@ -127,7 +127,7 @@ exports.DrawerNavigation = React.forwardRef(function (props, target) {
             (dir === 'ltr' && position === 'start') || (dir === 'rtl' && position === 'end') ?
                 mini ? collapseOverlayMini : collapseOverlay :
                 mini ? collapseOverlayMini : collapseOverlayRtl;
-    var drawerItems = (items && (React.createElement("ul", { className: 'k-drawer-items', role: "listbox", "aria-label": "drawer-list", "aria-expanded": expanded }, items
+    var drawerItems = (items && (React.createElement("ul", { className: 'k-drawer-items', role: "menubar", "aria-label": "drawer-list", "aria-expanded": expanded }, items
         .map(function (element, index) {
         var drawerItemProps = __assign(__assign({ index: index }, element), { onSelect: onSelect });
         var ItemComp = item || DrawerItem_1.DrawerItem;

package/dist/npm/menu/components/MenuItemArrow.js

@@ -53,7 +53,7 @@ var MenuItemArrow = /** @class */ (function (_super) {
      * @hidden
      */
     MenuItemArrow.prototype.render = function () {
-        return React.createElement(kendo_react_common_1.IconWrap, __assign({ className: 'k-menu-expand-arrow' }, this.getIcon()));
+        return React.createElement(kendo_react_common_1.IconWrap, __assign({ "aria-hidden": true, className: 'k-menu-expand-arrow' }, this.getIcon()));
     };
     MenuItemArrow.prototype.getIcon = function () {
         var childrenPosition = (0, misc_1.getChildrenPosition)(this.props.itemId, this.props.verticalMenu === true, this.props.dir === 'rtl');

package/dist/npm/package-metadata.js

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

package/dist/npm/panelbar/PanelBarItem.js

@@ -104,7 +104,7 @@ var PanelBarItem = /** @class */ (function (_super) {
             : null;
         var opened = (!disabled && expanded);
         var content = opened || keepItemsMounted
-            ? (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted
+            ? (React.createElement("ul", { role: "group", "aria-expanded": expanded, "aria-hidden": !expanded, className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted
                         ? (this.state.show ? 'block' : 'none')
                         : 'block' } }, children))
             : null;

package/dist/npm/splitter/Splitter.js

@@ -44,6 +44,8 @@ var SplitterBar_1 = require("./SplitterBar");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
+var messages_1 = require("./messages");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 /**
  * @hidden
  */
@@ -115,13 +117,14 @@ var Splitter = /** @class */ (function (_super) {
             return paneOptions;
         };
         _this.mapSplitterPanes = function (panes, panesContent) {
+            var ariaLabel = (0, kendo_react_intl_1.provideLocalizationService)(_this).toLanguageString(messages_1.splitBarLabel, messages_1.messages[messages_1.splitBarLabel]);
             return panes.map(function (pane, index) {
                 var splitterBar;
                 var paneKey = index * 2;
                 var barKey = paneKey + 1;
                 if (index + 1 < panes.length) {
                     var next = panes[index + 1];
-                    splitterBar = (React.createElement(SplitterBar_1.SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize }));
+                    splitterBar = (React.createElement(SplitterBar_1.SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, ariaLabel: ariaLabel, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize }));
                 }
                 var splitterPane = (React.createElement(SplitterPane_1.SplitterPane, __assign({ key: paneKey }, pane), panesContent[index]));
                 return [splitterPane, splitterBar];

package/dist/npm/splitter/SplitterBar.d.ts

@@ -8,6 +8,7 @@ export interface SplitterBarProps {
     index: number;
     prev: SplitterPaneExtendedProps;
     next: SplitterPaneExtendedProps;
+    ariaLabel?: string;
     onDrag: (event: any, element: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean) => void;
     onToggle: (index: number, nativeEvent: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
     onKeyboardResize: (element: HTMLDivElement, index: number, delta: number, nativeEvent: React.KeyboardEvent<HTMLDivElement>) => void;

package/dist/npm/splitter/SplitterBar.js

@@ -142,7 +142,7 @@ var SplitterBar = /** @class */ (function (_super) {
             _a['k-splitbar-static-vertical'] = !isHorizontal && isStatic,
             _a));
         return (React.createElement(kendo_react_common_1.Draggable, { onPress: function (event) { return _this.onDrag(event, true, false); }, onDrag: function (event) { return _this.onDrag(event, false, false); }, onRelease: function (event) { return _this.onDrag(event, false, true); }, ref: function (component) { _this.draggable = component; } },
-            React.createElement("div", { tabIndex: isStatic ? -1 : 0, role: 'separator', className: barClasses, style: { touchAction: 'none' }, onFocus: this.onFocus, onBlur: this.onBlur, onDoubleClick: this.onToggle, onKeyDown: this.onKeyDown },
+            React.createElement("div", { tabIndex: isStatic ? -1 : 0, role: 'separator', "aria-valuenow": 0, "aria-label": this.props.ariaLabel, "aria-orientation": isHorizontal ? 'vertical' : undefined, className: barClasses, style: { touchAction: 'none' }, onFocus: this.onFocus, onBlur: this.onBlur, onDoubleClick: this.onToggle, onKeyDown: this.onKeyDown },
                 this.props.prev.collapsible && React.createElement("div", { className: 'k-collapse-prev', onClick: this.onPrevToggle },
                     React.createElement(kendo_react_common_1.IconWrap, { name: this.props.prev.collapsible
                             ? isHorizontal

package/dist/npm/splitter/SplitterPane.js

@@ -40,7 +40,7 @@ var SplitterPane = /** @class */ (function (_super) {
             _a['k-pane-static'] = !resizable && !collapsible || fixedSize,
             _a['k-scrollable'] = scrollable,
             _a));
-        return (React.createElement("div", { id: id, style: style, className: paneClasses },
+        return (React.createElement("div", { id: id, role: 'group', style: style, className: paneClasses },
             !collapsed || keepMounted ? this.props.children : undefined,
             overlay ? React.createElement("div", { className: 'k-splitter-overlay k-overlay' }) : undefined));
     };

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

@@ -0,0 +1,10 @@
+/**
+ * @hidden
+ */
+export declare const splitBarLabel = "splitBarLabel";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    splitBarLabel: string;
+};

package/dist/npm/splitter/messages/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.messages = exports.splitBarLabel = void 0;
+/**
+ * @hidden
+ */
+exports.splitBarLabel = 'splitBarLabel';
+/**
+ * @hidden
+ */
+exports.messages = (_a = {},
+    _a[exports.splitBarLabel] = 'split bar',
+    _a);

package/dist/npm/stepper/Step.js

@@ -120,7 +120,7 @@ exports.Step = React.forwardRef(function (props, target) {
         stepIndicator,
         stepLabel));
     return (React.createElement("li", __assign({ ref: elementRef, className: itemClassNames, style: itemStyles }, others),
-        React.createElement("a", { className: "k-step-link", title: label ? label : undefined, onClick: handleClick, onFocus: handleFocus, tabIndex: tabIndex ? tabIndex : focused ? 0 : -1, "aria-current": current ? 'step' : undefined, "aria-disabled": disabled || !allowClick || undefined, "aria-invalid": isValid !== undefined && !isValid || undefined }, !item ? stepLink : children)));
+        React.createElement("a", { className: "k-step-link", title: label ? label : undefined, onClick: handleClick, onFocus: handleFocus, tabIndex: tabIndex ? tabIndex : focused ? 0 : -1, "aria-current": current, "aria-disabled": disabled || !allowClick || undefined, "aria-invalid": isValid !== undefined && !isValid || undefined }, !item ? stepLink : children)));
 });
 exports.Step.propTypes = {
     children: PropTypes.any,

package/dist/npm/stepper/Stepper.js

@@ -21,6 +21,8 @@ var kendo_react_progressbars_1 = require("@progress/kendo-react-progressbars");
 var contants_1 = require("./contants");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var messages_1 = require("./messages");
 /**
  * Represents the [KendoReact Stepper component]({% slug overview_stepper %}).
  *
@@ -43,6 +45,8 @@ var package_metadata_1 = require("../package-metadata");
 exports.Stepper = React.forwardRef(function (props, target) {
     (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
     var animationDuration = props.animationDuration, children = props.children, className = props.className, disabled = props.disabled, errorIcon = props.errorIcon, errorSVGIcon = props.errorSVGIcon, item = props.item, items = props.items, linear = props.linear, mode = props.mode, orientation = props.orientation, style = props.style, successIcon = props.successIcon, successSVGIcon = props.successSVGIcon, onChange = props.onChange, onFocus = props.onFocus;
+    var localizationService = (0, kendo_react_intl_1.useLocalization)();
+    var pbAriaLabel = localizationService.toLanguageString(messages_1.progBarAriaLabel, messages_1.messages[messages_1.progBarAriaLabel]);
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
@@ -191,7 +195,7 @@ exports.Stepper = React.forwardRef(function (props, target) {
         } },
         React.createElement("nav", { className: stepperClasses, style: stepperStyles, dir: dir, onKeyDown: handleKeyDown },
             React.createElement("ol", { className: listClasses, style: listStyles }, steps ? steps : children),
-            React.createElement(kendo_react_progressbars_1.ProgressBar, { style: progressbarStyles, animation: { duration: animation }, "aria-hidden": true, max: numOfSteps - 1, labelVisible: false, orientation: orientation, reverse: orientation === 'vertical', value: value, disabled: disabled, tabIndex: -1 }))));
+            React.createElement(kendo_react_progressbars_1.ProgressBar, { style: progressbarStyles, animation: { duration: animation }, ariaLabel: pbAriaLabel, "aria-hidden": true, max: numOfSteps - 1, labelVisible: false, orientation: orientation, reverse: orientation === 'vertical', value: value, disabled: disabled, tabIndex: -1 }))));
 });
 exports.Stepper.propTypes = {
     animationDuration: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),

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

@@ -2,9 +2,14 @@
  * @hidden
  */
 export declare const optionalText = "stepper.optionalText";
+/**
+ * @hidden
+ */
+export declare const progBarAriaLabel = "stepper.progBarAriaLabel";
 /**
  * @hidden
  */
 export declare const messages: {
     "stepper.optionalText": string;
+    "stepper.progBarAriaLabel": string;
 };

package/dist/npm/stepper/messages/index.js

@@ -1,14 +1,19 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.messages = exports.optionalText = void 0;
+exports.messages = exports.progBarAriaLabel = exports.optionalText = void 0;
 /**
  * @hidden
  */
 exports.optionalText = 'stepper.optionalText';
+/**
+ * @hidden
+ */
+exports.progBarAriaLabel = 'stepper.progBarAriaLabel';
 /**
  * @hidden
  */
 exports.messages = (_a = {},
     _a[exports.optionalText] = '(Optional)',
+    _a[exports.progBarAriaLabel] = 'progressbar',
     _a);