@progress/kendo-react-layout 5.3.0-dev.202205040828 → 5.3.0-dev.202205041217

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -19,13 +19,13 @@ export var BreadcrumbLink = React.forwardRef(function (props, ref) {
19
19
  }); });
20
20
  React.useImperativeHandle(ref, function () { return target.current; });
21
21
  var handleItemSelect = React.useCallback(function (event) {
22
- if (target.current && event.target.id) {
23
- dispatchEvent(props.onItemSelect, event, event.target, { id: event.target.id });
22
+ if (props.id) {
23
+ dispatchEvent(props.onItemSelect, event, event.target, { id: props.id });
24
24
  }
25
25
  }, [props.onItemSelect]);
26
26
  var handleKeyDown = React.useCallback(function (event) {
27
- if (target.current && event.target.id) {
28
- dispatchEvent(props.onKeyDown, event, event.target, { id: event.target.id });
27
+ if (props.id) {
28
+ dispatchEvent(props.onKeyDown, event, event.target, { id: props.id });
29
29
  }
30
30
  }, [props.onKeyDown]);
31
31
  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', {
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-layout',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1651652180,
8
+ publishDate: 1651665871,
9
9
  version: '',
10
10
  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'
11
11
  };
@@ -59,6 +59,7 @@ var TabStripContent = /** @class */ (function (_super) {
59
59
  var contentProps = {
60
60
  'role': 'tabpanel',
61
61
  'aria-expanded': true,
62
+ 'aria-labelledby': idx.toString(),
62
63
  'style': {
63
64
  'display': visible ? undefined : 'none'
64
65
  }
@@ -4,6 +4,10 @@ import * as PropTypes from 'prop-types';
4
4
  * The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
5
5
  */
6
6
  export interface TabStripNavigationItemProps {
7
+ /**
8
+ * Sets the `id` property of the top element of the TabStripNavigationItem.
9
+ */
10
+ id?: string;
7
11
  /**
8
12
  * Defines whether the current TabStripNavigationItem is selected.
9
13
  */
@@ -41,9 +41,13 @@ var TabStripNavigationItem = /** @class */ (function (_super) {
41
41
  */
42
42
  TabStripNavigationItem.prototype.render = function () {
43
43
  var _a;
44
- var _b = this.props, active = _b.active, disabled = _b.disabled, _c = _b.title, title = _c === void 0 ? 'Untitled' : _c, first = _b.first, last = _b.last;
44
+ var _b = this.props, id = _b.id, active = _b.active, disabled = _b.disabled, _c = _b.title, title = _c === void 0 ? 'Untitled' : _c, first = _b.first, last = _b.last;
45
45
  var props = {
46
+ 'id': id,
46
47
  'aria-selected': active,
48
+ 'aria-controls': id,
49
+ 'aria-disabled': disabled,
50
+ 'aria-hidden': disabled,
47
51
  'role': 'tab',
48
52
  onClick: !disabled ? this.onClick : undefined
49
53
  };
@@ -21,13 +21,13 @@ exports.BreadcrumbLink = React.forwardRef(function (props, ref) {
21
21
  }); });
22
22
  React.useImperativeHandle(ref, function () { return target.current; });
23
23
  var handleItemSelect = React.useCallback(function (event) {
24
- if (target.current && event.target.id) {
25
- kendo_react_common_1.dispatchEvent(props.onItemSelect, event, event.target, { id: event.target.id });
24
+ if (props.id) {
25
+ kendo_react_common_1.dispatchEvent(props.onItemSelect, event, event.target, { id: props.id });
26
26
  }
27
27
  }, [props.onItemSelect]);
28
28
  var handleKeyDown = React.useCallback(function (event) {
29
- if (target.current && event.target.id) {
30
- kendo_react_common_1.dispatchEvent(props.onKeyDown, event, event.target, { id: event.target.id });
29
+ if (props.id) {
30
+ kendo_react_common_1.dispatchEvent(props.onKeyDown, event, event.target, { id: props.id });
31
31
  }
32
32
  }, [props.onKeyDown]);
33
33
  return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, id: props.id, ref: linkRef, style: props.style, dir: kendo_react_common_1.useDir(linkRef, props.dir), tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled), className: kendo_react_common_1.classNames('k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icontext-link', {
@@ -7,7 +7,7 @@ exports.packageMetadata = {
7
7
  name: '@progress/kendo-react-layout',
8
8
  productName: 'KendoReact',
9
9
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
10
- publishDate: 1651652180,
10
+ publishDate: 1651665871,
11
11
  version: '',
12
12
  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'
13
13
  };
@@ -61,6 +61,7 @@ var TabStripContent = /** @class */ (function (_super) {
61
61
  var contentProps = {
62
62
  'role': 'tabpanel',
63
63
  'aria-expanded': true,
64
+ 'aria-labelledby': idx.toString(),
64
65
  'style': {
65
66
  'display': visible ? undefined : 'none'
66
67
  }
@@ -4,6 +4,10 @@ import * as PropTypes from 'prop-types';
4
4
  * The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
5
5
  */
6
6
  export interface TabStripNavigationItemProps {
7
+ /**
8
+ * Sets the `id` property of the top element of the TabStripNavigationItem.
9
+ */
10
+ id?: string;
7
11
  /**
8
12
  * Defines whether the current TabStripNavigationItem is selected.
9
13
  */
@@ -43,9 +43,13 @@ var TabStripNavigationItem = /** @class */ (function (_super) {
43
43
  */
44
44
  TabStripNavigationItem.prototype.render = function () {
45
45
  var _a;
46
- var _b = this.props, active = _b.active, disabled = _b.disabled, _c = _b.title, title = _c === void 0 ? 'Untitled' : _c, first = _b.first, last = _b.last;
46
+ var _b = this.props, id = _b.id, active = _b.active, disabled = _b.disabled, _c = _b.title, title = _c === void 0 ? 'Untitled' : _c, first = _b.first, last = _b.last;
47
47
  var props = {
48
+ 'id': id,
48
49
  'aria-selected': active,
50
+ 'aria-controls': id,
51
+ 'aria-disabled': disabled,
52
+ 'aria-hidden': disabled,
49
53
  'role': 'tab',
50
54
  onClick: !disabled ? this.onClick : undefined
51
55
  };