@progress/kendo-react-layout 5.12.0-dev.202302211107 → 5.12.0-dev.202303021526

package/dist/es/actionsheet/ActionSheet.d.ts

@@ -62,18 +62,33 @@ export interface ActionSheetProps {
      * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
      */
     navigatableElements: string[];
+    /**
+     * Controls the popup animation. By default, the open and close animations are disabled.
+     */
+    animation?: boolean;
+    /**
+     * The CSS classes that will be rendered on the inner ActionSheet element.
+     */
+    className?: string;
+    /**
+     * Specifies the state of the ActionSheet.
+     */
+    expand?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ActionSheetState {
+    show?: boolean;
+    slide?: boolean;
 }
 /**
  * Represents the [KendoReact ActionSheet]({% slug overview_actionsheet %}) component.
  */
-export declare class ActionSheet extends React.Component<ActionSheetProps> {
-    /**
-     * @hidden
-     */
+export declare class ActionSheet extends React.Component<ActionSheetProps, ActionSheetState> {
+    /** @hidden */
     static displayName: string;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     static propTypes: {
         items: PropTypes.Requireable<any[]>;
         subTitle: PropTypes.Requireable<string>;
@@ -81,28 +96,24 @@ export declare class ActionSheet extends React.Component<ActionSheetProps> {
         navigatable: PropTypes.Requireable<boolean>;
         navigatableElements: PropTypes.Requireable<any[]>;
     };
-    /**
-     * @hidden
-     */
+    /** @hidden */
     static defaultProps: {
         navigatable: boolean;
         navigatableElements: never[];
     };
-    private actionSheetAnimationRef;
+    private actionSheetRef;
     private actionSheetTitleClass;
     private ariaLabeledBy;
     private navigation?;
-    /**
-     * @hidden
-     */
+    private animationDuration;
+    private bottomPosition;
+    /** @hidden */
     constructor(props: ActionSheetProps);
-    /**
-     * @hidden
-     */
+    /** @hidden */
     componentDidMount(): void;
-    /**
-     * @hidden
-     */
+    /** @hidden */
+    componentDidUpdate(_prevProps: Readonly<ActionSheetProps>, prevState: Readonly<ActionSheetState>): void;
+    /** @hidden */
     render(): JSX.Element;
     private handleKeyDown;
     private onTab;
@@ -110,5 +121,6 @@ export declare class ActionSheet extends React.Component<ActionSheetProps> {
     private handleItemClick;
     private onEnter;
     private onEscape;
+    private hideActionSheet;
     private children;
 }

package/dist/es/actionsheet/ActionSheet.js

@@ -35,7 +35,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { validatePackage, Navigation, FOCUSABLE_ELEMENTS } from '@progress/kendo-react-common';
+import { Animation } from '@progress/kendo-react-animation';
+import { validatePackage, Navigation, FOCUSABLE_ELEMENTS, classNames } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { ActionSheetItem } from './ActionSheetItem';
 import { headerDisplayName } from './ActionSheetHeader';
@@ -46,14 +47,14 @@ import { contentDisplayName } from './ActionSheetContent';
  */
 var ActionSheet = /** @class */ (function (_super) {
     __extends(ActionSheet, _super);
-    /**
-     * @hidden
-     */
+    /** @hidden */
     function ActionSheet(props) {
         var _this = _super.call(this, props) || this;
-        _this.actionSheetAnimationRef = React.createRef();
+        _this.actionSheetRef = React.createRef();
         _this.actionSheetTitleClass = 'k-actionsheet-title';
         _this.ariaLabeledBy = _this.actionSheetTitleClass + 1;
+        _this.animationDuration = 300;
+        _this.bottomPosition = { bottom: '0', width: '100%' };
         _this.handleKeyDown = function (e) {
             if (_this.props.navigatable) {
                 _this.navigation.triggerKeyboardEvent(e);
@@ -69,24 +70,36 @@ var ActionSheet = /** @class */ (function (_super) {
             }
         };
         _this.handleOverlayClick = function (ev) {
+            /** Deprecated */
             if (_this.props.onOverlayClick) {
                 _this.props.onOverlayClick.call(undefined, ev);
             }
             if (_this.props.onClose) {
                 _this.props.onClose.call(undefined, ev);
             }
+            if (!_this.props.animation) {
+                _this.hideActionSheet();
+            }
         };
         _this.handleItemClick = function (ev) {
+            /** Deprecated */
             if (_this.props.onItemClick) {
                 _this.props.onItemClick.call(undefined, ev);
             }
             if (_this.props.onItemSelect) {
                 _this.props.onItemSelect.call(undefined, ev);
             }
+            if (!_this.props.animation) {
+                _this.hideActionSheet();
+            }
         };
         _this.onEnter = function (target, nav, ev) {
+            if (target.ariaDisabled) {
+                return;
+            }
             var isItem = target.className && target.className.indexOf('k-actionsheet-item') !== -1;
             var allItems = nav.elements.filter(function (e) { return e.className.indexOf('k-actionsheet-item') !== -1; });
+            /** Deprecated */
             if (isItem && _this.props.onItemClick) {
                 ev.preventDefault();
                 var item = _this.props.items[allItems.indexOf(target)];
@@ -105,8 +118,12 @@ var ActionSheet = /** @class */ (function (_super) {
                     title: item && item.title
                 });
             }
+            if (!_this.props.animation) {
+                _this.hideActionSheet();
+            }
         };
         _this.onEscape = function (_target, _nav, ev) {
+            /** Deprecated */
             if (_this.props.onOverlayClick) {
                 ev.preventDefault();
                 _this.props.onOverlayClick.call(undefined, ev);
@@ -115,22 +132,55 @@ var ActionSheet = /** @class */ (function (_super) {
                 ev.preventDefault();
                 _this.props.onClose.call(undefined, ev);
             }
+            if (!_this.props.animation) {
+                _this.hideActionSheet();
+            }
+        };
+        _this.hideActionSheet = function () {
+            _this.setState({ show: false });
+        };
+        _this.children = function (children) {
+            var components = {};
+            React.Children.forEach(children, function (child) {
+                components[child.type.displayName] = child;
+            });
+            return components;
+        };
+        _this.state = {
+            show: false,
+            slide: false
         };
         validatePackage(packageMetadata);
         return _this;
     }
-    /**
-     * @hidden
-     */
+    /** @hidden */
     ActionSheet.prototype.componentDidMount = function () {
+        if (this.props.expand && !this.state.show) {
+            this.setState({ show: true });
+        }
+    };
+    /** @hidden */
+    ActionSheet.prototype.componentDidUpdate = function (_prevProps, prevState) {
         var _this = this;
-        if (this.actionSheetAnimationRef.current) {
-            this.actionSheetAnimationRef.current.style.setProperty('--kendo-actionsheet-height', 'auto');
-            this.actionSheetAnimationRef.current.style.setProperty('--kendo-actionsheet-max-height', 'none');
+        var currentRef = this.actionSheetRef.current;
+        if (this.props.expand && !this.state.show) {
+            this.setState({ show: true });
+        }
+        if (this.props.expand && this.state.show && !this.state.slide) {
+            this.setState({ slide: true });
+        }
+        if (!this.props.expand && this.state.show && this.state.slide) {
+            this.setState({ slide: false });
+        }
+        if (prevState !== this.state && this.state.slide && currentRef && !this.props.className) {
+            currentRef.style.setProperty('--kendo-actionsheet-height', 'auto');
+            currentRef.style.setProperty('--kendo-actionsheet-max-height', 'none');
+        }
+        if (currentRef) {
             if (this.props.navigatable) {
                 this.navigation = new Navigation({
                     tabIndex: this.props.tabIndex || 0,
-                    root: this.actionSheetAnimationRef,
+                    root: this.actionSheetRef,
                     rovingTabIndex: false,
                     selectors: __spreadArray([
                         '.k-actionsheet-item'
@@ -153,9 +203,8 @@ var ActionSheet = /** @class */ (function (_super) {
             }
         }
     };
-    /**
-     * @hidden
-     */
+    ;
+    /** @hidden */
     ActionSheet.prototype.render = function () {
         var _this = this;
         var _a, _b;
@@ -163,43 +212,35 @@ var ActionSheet = /** @class */ (function (_super) {
         var bottomGroupItems = (_b = this.props.items) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.group === 'bottom'; });
         var shouldRenderSeparator = (topGroupItems && topGroupItems.length > 0) && (bottomGroupItems && bottomGroupItems.length > 0);
         var children = this.children(this.props.children);
-        return (React.createElement("div", { className: "k-actionsheet-container" },
-            React.createElement("div", { className: "k-overlay", onClick: this.handleOverlayClick }),
-            React.createElement("div", { className: "k-animation-container" },
-                React.createElement("div", { className: "k-child-animation-container", style: { bottom: '0px', width: '100%' } },
-                    React.createElement("div", { className: "k-actionsheet k-actionsheet-bottom", role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetAnimationRef, onKeyDown: this.handleKeyDown },
-                        (children[headerDisplayName] || this.props.title || this.props.subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar" },
-                            React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
-                                React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy }, children[headerDisplayName] ||
-                                    React.createElement(React.Fragment, null,
-                                        React.createElement("div", { className: "k-text-center" }, this.props.title),
-                                        this.props.subTitle && React.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, this.props.subTitle)))))),
-                        children[contentDisplayName] || React.createElement("div", { className: "k-actionsheet-content" },
-                            React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (item, idx) {
-                                return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
-                            })),
-                            shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
-                            React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (item, idx) {
-                                return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
-                            }))),
-                        children[footerDisplayName])))));
-    };
-    ;
-    ActionSheet.prototype.children = function (children) {
-        var components = {};
-        React.Children.forEach(children, function (child) {
-            components[child.type.displayName] = child;
-        });
-        return components;
+        var actionSheetPanel = this.state.slide && React.createElement("div", { className: classNames('k-actionsheet', this.props.className, {
+                'k-actionsheet-bottom': !this.props.className
+            }), role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetRef, onKeyDown: this.handleKeyDown },
+            (children[headerDisplayName] || this.props.title || this.props.subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar" },
+                React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
+                    React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy }, children[headerDisplayName] ||
+                        React.createElement(React.Fragment, null,
+                            React.createElement("div", { className: "k-text-center" }, this.props.title),
+                            this.props.subTitle && React.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, this.props.subTitle)))))),
+            children[contentDisplayName] || React.createElement("div", { className: "k-actionsheet-content" },
+                React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (item, idx) {
+                    return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
+                })),
+                shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
+                React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (item, idx) {
+                    return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
+                }))),
+            children[footerDisplayName]);
+        return (React.createElement(React.Fragment, null, this.props.expand || this.state.show ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "k-actionsheet-container" },
+                React.createElement("div", { className: "k-overlay", onClick: this.handleOverlayClick }),
+                this.props.animation ? React.createElement(Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: this.animationDuration, transitionExitDuration: this.animationDuration, animationEnteringStyle: this.bottomPosition, animationEnteredStyle: this.bottomPosition, animationExitingStyle: this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
+                    : actionSheetPanel)))
+            : null));
     };
     ;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     ActionSheet.displayName = 'KendoReactActionSheet';
-    /**
-     * @hidden
-     */
+    /** @hidden */
     ActionSheet.propTypes = {
         items: PropTypes.array,
         subTitle: PropTypes.string,
@@ -207,9 +248,7 @@ var ActionSheet = /** @class */ (function (_super) {
         navigatable: PropTypes.bool,
         navigatableElements: PropTypes.array
     };
-    /**
-     * @hidden
-     */
+    /** @hidden */
     ActionSheet.defaultProps = {
         navigatable: true,
         navigatableElements: []

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: 1676976120,
+    publishDate: 1677769327,
     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);