@rc-component/tree - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

assets/index.css

@@ -5,4 +5,4 @@ .rc-tree {
 }
-.rc-tree-focused:not(.rc-tree-active-focused) {
-  border-color: cyan;
+.rc-tree-list:focus-visible {
+  outline: none;
 }
@@ -160,4 +160,5 @@ .rc-tree .rc-tree-treenode {
 }
-.rc-tree-treenode-active {
+.rc-tree-list:focus-visible .rc-tree-treenode-active {
   background: rgba(0, 0, 0, 0.1);
+  outline: 1px solid black;
 }
@@ -164,0 +165,0 @@ .rc-tree-node-selected {

assets/index.less

@@ -8,4 +8,4 @@ @treePrefixCls: ~'rc-tree';
 
-  &-focused:not(&-active-focused) {
-    border-color: cyan;
+  &-list:focus-visible {
+    outline: none;
   }
@@ -190,8 +190,7 @@
   }
-  &-treenode-active {
+
+  // only keyboard focus ring
+  &-list:focus-visible &-treenode-active {
     background: rgba(0, 0, 0, 0.1);
-
-    // .@{treePrefixCls}-node-content-wrapper {
-    //   background: rgba(0, 0, 0, 0.1);
-    // }
+    outline: 1px solid black;
   }
@@ -198,0 +197,0 @@ &-node-selected {

es/NodeList.d.ts

@@ -19,3 +19,2 @@ /**
     activeItem: FlattenNode<TreeDataType>;
-    focused?: boolean;
     tabIndex: number;
@@ -22,0 +21,0 @@ checkable?: boolean;

es/NodeList.js

@@ -12,13 +12,2 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { getKey, getTreeNodeProps } from "./utils/treeUtil";
-const HIDDEN_STYLE = {
-  width: 0,
-  height: 0,
-  display: 'flex',
-  overflow: 'hidden',
-  opacity: 0,
-  border: 0,
-  padding: 0,
-  margin: 0
-};
-const noop = () => {};
 export const MOTION_KEY = `RC_TREE_MOTION_${Math.random()}`;
@@ -63,11 +52,2 @@ const MotionNode = {
 }
-function getAccessibilityPath(item) {
-  let path = String(item.data.key);
-  let current = item;
-  while (current.parent) {
-    current = current.parent;
-    path = `${current.data.key} > ${path}`;
-  }
-  return path;
-}
 const NodeList = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -97,3 +77,2 @@ const {
     activeItem,
-    focused,
     tabIndex,
@@ -190,16 +169,3 @@ onKeyDown,
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, focused && activeItem && /*#__PURE__*/React.createElement("span", {
-    style: HIDDEN_STYLE,
-    "aria-live": "assertive"
-  }, getAccessibilityPath(activeItem)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-    style: HIDDEN_STYLE,
-    disabled: focusable === false || disabled,
-    tabIndex: focusable !== false ? tabIndex : null,
-    onKeyDown: onKeyDown,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    value: "",
-    onChange: noop,
-    "aria-label": "for screen reader"
-  })), /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-treenode`,
@@ -232,2 +198,7 @@ "aria-hidden": true,
     role: "tree",
+    tabIndex: focusable !== false && !disabled ? tabIndex : undefined,
+    "aria-activedescendant": activeItem ? activeItem.key : undefined,
+    onKeyDown: onKeyDown,
+    onFocus: onFocus,
+    onBlur: onBlur,
     onVisibleChange: originList => {
@@ -234,0 +205,0 @@ // The best match is using `fullList` - `originList` = `restList`

es/Tree.d.ts

@@ -153,3 +153,2 @@ import * as React from 'react';
     flattenNodes: FlattenNode<TreeDataType>[];
-    focused: boolean;
     activeKey: Key | null;
@@ -156,0 +155,0 @@ listChanging: boolean;

es/Tree.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-// TODO: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/treeview/treeview-2/treeview-2a.html
-// Fully accessibility support
+// TODO: Fully accessibility support
+// Reference: https://www.w3.org/WAI/ARIA/apg/patterns/treeview
 
 import { clsx } from 'clsx';
-import KeyCode from "@rc-component/util/es/KeyCode";
 import pickAttrs from "@rc-component/util/es/pickAttrs";
@@ -17,3 +16,3 @@ import warning from "@rc-component/util/es/warning";
 import getEntity from "./utils/keyUtil";
-import { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getTreeNodeProps, warningWithoutKey } from "./utils/treeUtil";
+import { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getTreeNodeProps, isLeafNode, warningWithoutKey } from "./utils/treeUtil";
 const MAX_RETRY_TIMES = 10;
@@ -76,3 +75,2 @@ class Tree extends React.Component {
     flattenNodes: [],
-    focused: false,
     activeKey: null,
@@ -813,7 +811,20 @@ listChanging: false,
     const {
-      onFocus
+      onFocus,
+      disabled
     } = this.props;
-    this.setState({
-      focused: true
-    });
+    const {
+      activeKey,
+      selectedKeys,
+      flattenNodes
+    } = this.state;
+    if (!disabled && activeKey === null) {
+      const visibleSelectedKey = selectedKeys.find(key => {
+        return flattenNodes.some(nodeItem => nodeItem.key === key);
+      });
+      if (visibleSelectedKey !== undefined) {
+        this.onActiveChange(visibleSelectedKey);
+      } else {
+        this.onActiveChange(flattenNodes?.[0]?.key || null);
+      }
+    }
     onFocus?.(...args);
@@ -825,5 +836,2 @@ };
     } = this.props;
-    this.setState({
-      focused: false
-    });
     this.onActiveChange(null);
@@ -1001,3 +1009,4 @@ onBlur?.(...args);
       checkedKeys,
-      fieldNames
+      flattenNodes,
+      keyEntities
     } = this.state;
@@ -1007,8 +1016,13 @@ const {
       checkable,
-      selectable
+      selectable,
+      disabled,
+      loadData
     } = this.props;
+    if (disabled) {
+      return;
+    }
 
     // >>>>>>>>>> Direction
-    switch (event.which) {
-      case KeyCode.UP:
+    switch (event.key) {
+      case 'ArrowUp':
         {
@@ -1019,3 +1033,3 @@ this.offsetActiveKey(-1);
         }
-      case KeyCode.DOWN:
+      case 'ArrowDown':
         {
@@ -1026,2 +1040,14 @@ this.offsetActiveKey(1);
         }
+      case 'Home':
+        {
+          this.onActiveChange(flattenNodes?.[0]?.key);
+          event.preventDefault();
+          break;
+        }
+      case 'End':
+        {
+          this.onActiveChange(flattenNodes?.[flattenNodes.length - 1]?.key);
+          event.preventDefault();
+          break;
+        }
     }
@@ -1033,3 +1059,2 @@
       const treeNodeRequiredProps = this.getTreeNodeRequiredProps();
-      const expandable = activeItem.data.isLeaf === false || !!(activeItem.data[fieldNames.children] || []).length;
       const eventNode = convertNodePropsToEventData({
@@ -1040,5 +1065,10 @@ ...getTreeNodeProps(activeKey, treeNodeRequiredProps),
       });
-      switch (event.which) {
+      const entity = getEntity(keyEntities, activeKey);
+      const hasChildren = !!entity?.children?.length;
+      const expandable = !isLeafNode(activeItem.data.isLeaf, loadData, hasChildren, eventNode.loaded);
+      const canCheck = checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox;
+      const canSelect = !checkable && selectable && !eventNode.disabled && eventNode.selectable !== false;
+      switch (event.key) {
         // >>> Expand
-        case KeyCode.LEFT:
+        case 'ArrowLeft':
           {
@@ -1054,3 +1084,3 @@ // Collapse if possible
           }
-        case KeyCode.RIGHT:
+        case 'ArrowRight':
           {
@@ -1066,10 +1096,25 @@ // Expand if possible
           }
-
-        // Selection
-        case KeyCode.ENTER:
-        case KeyCode.SPACE:
+        case 'Enter':
           {
-            if (checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox) {
+            if (expandable) {
+              event.preventDefault();
+              this.onNodeExpand({}, eventNode);
+            } else if (canCheck) {
+              if (!checkedKeys.includes(activeKey)) {
+                event.preventDefault();
+                this.onNodeCheck({}, eventNode, true);
+              }
+            } else if (canSelect && !eventNode.selected) {
+              event.preventDefault();
+              this.onNodeSelect({}, eventNode);
+            }
+            break;
+          }
+        case ' ':
+          {
+            if (canCheck) {
+              event.preventDefault();
               this.onNodeCheck({}, eventNode, !checkedKeys.includes(activeKey));
-            } else if (!checkable && selectable && !eventNode.disabled && eventNode.selectable !== false) {
+            } else if (canSelect) {
+              event.preventDefault();
               this.onNodeSelect({}, eventNode);
@@ -1113,7 +1158,5 @@ }
     const {
-      focused,
       flattenNodes,
       keyEntities,
       draggingNodeKey,
-      activeKey,
       dropLevelOffset,
@@ -1221,5 +1264,3 @@ dropContainerKey,
       className: clsx(prefixCls, className, rootClassName, {
-        [`${prefixCls}-show-line`]: showLine,
-        [`${prefixCls}-focused`]: focused,
-        [`${prefixCls}-active-focused`]: activeKey !== null
+        [`${prefixCls}-show-line`]: showLine
       }),
@@ -1241,3 +1282,2 @@ style: rootStyle
       focusable: focusable,
-      focused: focused,
       tabIndex: tabIndex,
@@ -1244,0 +1284,0 @@ activeItem: this.getActiveItem(),

es/TreeNode.js

@@ -8,3 +8,3 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import getEntity from "./utils/keyUtil";
-import { convertNodePropsToEventData } from "./utils/treeUtil";
+import { convertNodePropsToEventData, isLeafNode } from "./utils/treeUtil";
 const ICON_OPEN = 'open';
@@ -164,6 +164,3 @@ const ICON_CLOSE = 'close';
   const memoizedIsLeaf = React.useMemo(() => {
-    if (isLeaf === false) {
-      return false;
-    }
-    return isLeaf || !context.loadData && !hasChildren || context.loadData && props.loaded && !hasChildren;
+    return isLeafNode(isLeaf, context.loadData, hasChildren, props.loaded);
   }, [isLeaf, context.loadData, hasChildren, props.loaded]);
@@ -241,4 +238,3 @@
       "aria-checked": halfChecked ? 'mixed' : checked,
-      "aria-disabled": isDisabled || props.disableCheckbox,
-      "aria-label": `Select ${typeof props.title === 'string' ? props.title : 'tree node'}`
+      "aria-disabled": isDisabled || props.disableCheckbox
     }, $custom);
@@ -336,9 +332,10 @@ }, [isCheckable, checked, halfChecked, isDisabled, props.disableCheckbox, props.title]);
   const dragging = context.draggingNodeKey === eventKey;
-  const ariaSelected = selectable !== undefined ? {
-    'aria-selected': !!selectable
-  } : undefined;
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: domRef,
     role: "treeitem",
-    "aria-expanded": isLeaf ? undefined : expanded,
+    id: eventKey,
+    "aria-expanded": memoizedIsLeaf ? undefined : expanded,
+    "aria-selected": isSelectable && !isDisabled ? selected : undefined,
+    "aria-checked": isCheckable && !isDisabled ? halfChecked ? 'mixed' : checked : undefined,
+    "aria-disabled": isDisabled,
     className: clsx(className, `${context.prefixCls}-treenode`, treeClassNames?.item, {
@@ -379,3 +376,3 @@ [`${context.prefixCls}-treenode-disabled`]: isDisabled,
     onMouseMove: onMouseMove
-  }, ariaSelected, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement(Indent, {
+  }, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement(Indent, {
     prefixCls: context.prefixCls,
@@ -382,0 +379,0 @@ level: level,

es/utils/treeUtil.d.ts

@@ -69,2 +69,3 @@ import * as React from 'react';
 }
+export declare function isLeafNode<TreeDataType extends BasicDataNode = DataNode>(isLeaf: boolean | undefined, loadData: ((node: EventDataNode<TreeDataType>) => Promise<any>) | undefined, hasChildren: boolean, loaded: boolean): boolean;
 /**
@@ -71,0 +72,0 @@ * Get TreeNode props with Tree props.

es/utils/treeUtil.js

@@ -279,2 +279,9 @@ import toArray from "@rc-component/util/es/Children/toArray";
 }
+export function isLeafNode(isLeaf, loadData, hasChildren, loaded) {
+  if (isLeaf === false) {
+    return false;
+  }
+  return isLeaf || !loadData && !hasChildren || loadData && loaded && !hasChildren;
+}
+
 /**
@@ -281,0 +288,0 @@ * Get TreeNode props with Tree props.

lib/NodeList.d.ts

@@ -19,3 +19,2 @@ /**
     activeItem: FlattenNode<TreeDataType>;
-    focused?: boolean;
     tabIndex: number;
@@ -22,0 +21,0 @@ checkable?: boolean;

lib/NodeList.js

@@ -20,13 +20,2 @@ "use strict";
  */
-const HIDDEN_STYLE = {
-  width: 0,
-  height: 0,
-  display: 'flex',
-  overflow: 'hidden',
-  opacity: 0,
-  border: 0,
-  padding: 0,
-  margin: 0
-};
-const noop = () => {};
 const MOTION_KEY = exports.MOTION_KEY = `RC_TREE_MOTION_${Math.random()}`;
@@ -71,11 +60,2 @@ const MotionNode = {
 }
-function getAccessibilityPath(item) {
-  let path = String(item.data.key);
-  let current = item;
-  while (current.parent) {
-    current = current.parent;
-    path = `${current.data.key} > ${path}`;
-  }
-  return path;
-}
 const NodeList = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -105,3 +85,2 @@ const {
     activeItem,
-    focused,
     tabIndex,
@@ -198,16 +177,3 @@ onKeyDown,
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, focused && activeItem && /*#__PURE__*/React.createElement("span", {
-    style: HIDDEN_STYLE,
-    "aria-live": "assertive"
-  }, getAccessibilityPath(activeItem)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
-    style: HIDDEN_STYLE,
-    disabled: focusable === false || disabled,
-    tabIndex: focusable !== false ? tabIndex : null,
-    onKeyDown: onKeyDown,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    value: "",
-    onChange: noop,
-    "aria-label": "for screen reader"
-  })), /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-treenode`,
@@ -240,2 +206,7 @@ "aria-hidden": true,
     role: "tree",
+    tabIndex: focusable !== false && !disabled ? tabIndex : undefined,
+    "aria-activedescendant": activeItem ? activeItem.key : undefined,
+    onKeyDown: onKeyDown,
+    onFocus: onFocus,
+    onBlur: onBlur,
     onVisibleChange: originList => {
@@ -242,0 +213,0 @@ // The best match is using `fullList` - `originList` = `restList`

lib/Tree.d.ts

@@ -153,3 +153,2 @@ import * as React from 'react';
     flattenNodes: FlattenNode<TreeDataType>[];
-    focused: boolean;
     activeKey: Key | null;
@@ -156,0 +155,0 @@ listChanging: boolean;

lib/Tree.js

@@ -8,3 +8,2 @@ "use strict";
 var _clsx = require("clsx");
-var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"));
 var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
@@ -24,4 +23,4 @@ var _warning = _interopRequireDefault(require("@rc-component/util/lib/warning"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // TODO: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/treeview/treeview-2/treeview-2a.html
-// Fully accessibility support
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // TODO: Fully accessibility support
+// Reference: https://www.w3.org/WAI/ARIA/apg/patterns/treeview
 const MAX_RETRY_TIMES = 10;
@@ -84,3 +83,2 @@ class Tree extends React.Component {
     flattenNodes: [],
-    focused: false,
     activeKey: null,
@@ -821,7 +819,20 @@ listChanging: false,
     const {
-      onFocus
+      onFocus,
+      disabled
     } = this.props;
-    this.setState({
-      focused: true
-    });
+    const {
+      activeKey,
+      selectedKeys,
+      flattenNodes
+    } = this.state;
+    if (!disabled && activeKey === null) {
+      const visibleSelectedKey = selectedKeys.find(key => {
+        return flattenNodes.some(nodeItem => nodeItem.key === key);
+      });
+      if (visibleSelectedKey !== undefined) {
+        this.onActiveChange(visibleSelectedKey);
+      } else {
+        this.onActiveChange(flattenNodes?.[0]?.key || null);
+      }
+    }
     onFocus?.(...args);
@@ -833,5 +844,2 @@ };
     } = this.props;
-    this.setState({
-      focused: false
-    });
     this.onActiveChange(null);
@@ -1009,3 +1017,4 @@ onBlur?.(...args);
       checkedKeys,
-      fieldNames
+      flattenNodes,
+      keyEntities
     } = this.state;
@@ -1015,8 +1024,13 @@ const {
       checkable,
-      selectable
+      selectable,
+      disabled,
+      loadData
     } = this.props;
+    if (disabled) {
+      return;
+    }
 
     // >>>>>>>>>> Direction
-    switch (event.which) {
-      case _KeyCode.default.UP:
+    switch (event.key) {
+      case 'ArrowUp':
         {
@@ -1027,3 +1041,3 @@ this.offsetActiveKey(-1);
         }
-      case _KeyCode.default.DOWN:
+      case 'ArrowDown':
         {
@@ -1034,2 +1048,14 @@ this.offsetActiveKey(1);
         }
+      case 'Home':
+        {
+          this.onActiveChange(flattenNodes?.[0]?.key);
+          event.preventDefault();
+          break;
+        }
+      case 'End':
+        {
+          this.onActiveChange(flattenNodes?.[flattenNodes.length - 1]?.key);
+          event.preventDefault();
+          break;
+        }
     }
@@ -1041,3 +1067,2 @@
       const treeNodeRequiredProps = this.getTreeNodeRequiredProps();
-      const expandable = activeItem.data.isLeaf === false || !!(activeItem.data[fieldNames.children] || []).length;
       const eventNode = (0, _treeUtil.convertNodePropsToEventData)({
@@ -1048,5 +1073,10 @@ ...(0, _treeUtil.getTreeNodeProps)(activeKey, treeNodeRequiredProps),
       });
-      switch (event.which) {
+      const entity = (0, _keyUtil.default)(keyEntities, activeKey);
+      const hasChildren = !!entity?.children?.length;
+      const expandable = !(0, _treeUtil.isLeafNode)(activeItem.data.isLeaf, loadData, hasChildren, eventNode.loaded);
+      const canCheck = checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox;
+      const canSelect = !checkable && selectable && !eventNode.disabled && eventNode.selectable !== false;
+      switch (event.key) {
         // >>> Expand
-        case _KeyCode.default.LEFT:
+        case 'ArrowLeft':
           {
@@ -1062,3 +1092,3 @@ // Collapse if possible
           }
-        case _KeyCode.default.RIGHT:
+        case 'ArrowRight':
           {
@@ -1074,10 +1104,25 @@ // Expand if possible
           }
-
-        // Selection
-        case _KeyCode.default.ENTER:
-        case _KeyCode.default.SPACE:
+        case 'Enter':
           {
-            if (checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox) {
+            if (expandable) {
+              event.preventDefault();
+              this.onNodeExpand({}, eventNode);
+            } else if (canCheck) {
+              if (!checkedKeys.includes(activeKey)) {
+                event.preventDefault();
+                this.onNodeCheck({}, eventNode, true);
+              }
+            } else if (canSelect && !eventNode.selected) {
+              event.preventDefault();
+              this.onNodeSelect({}, eventNode);
+            }
+            break;
+          }
+        case ' ':
+          {
+            if (canCheck) {
+              event.preventDefault();
               this.onNodeCheck({}, eventNode, !checkedKeys.includes(activeKey));
-            } else if (!checkable && selectable && !eventNode.disabled && eventNode.selectable !== false) {
+            } else if (canSelect) {
+              event.preventDefault();
               this.onNodeSelect({}, eventNode);
@@ -1121,7 +1166,5 @@ }
     const {
-      focused,
       flattenNodes,
       keyEntities,
       draggingNodeKey,
-      activeKey,
       dropLevelOffset,
@@ -1229,5 +1272,3 @@ dropContainerKey,
       className: (0, _clsx.clsx)(prefixCls, className, rootClassName, {
-        [`${prefixCls}-show-line`]: showLine,
-        [`${prefixCls}-focused`]: focused,
-        [`${prefixCls}-active-focused`]: activeKey !== null
+        [`${prefixCls}-show-line`]: showLine
       }),
@@ -1249,3 +1290,2 @@ style: rootStyle
       focusable: focusable,
-      focused: focused,
       tabIndex: tabIndex,
@@ -1252,0 +1292,0 @@ activeItem: this.getActiveItem(),

lib/TreeNode.js

@@ -170,6 +170,3 @@ "use strict";
   const memoizedIsLeaf = _react.default.useMemo(() => {
-    if (isLeaf === false) {
-      return false;
-    }
-    return isLeaf || !context.loadData && !hasChildren || context.loadData && props.loaded && !hasChildren;
+    return (0, _treeUtil.isLeafNode)(isLeaf, context.loadData, hasChildren, props.loaded);
   }, [isLeaf, context.loadData, hasChildren, props.loaded]);
@@ -247,4 +244,3 @@
       "aria-checked": halfChecked ? 'mixed' : checked,
-      "aria-disabled": isDisabled || props.disableCheckbox,
-      "aria-label": `Select ${typeof props.title === 'string' ? props.title : 'tree node'}`
+      "aria-disabled": isDisabled || props.disableCheckbox
     }, $custom);
@@ -342,9 +338,10 @@ }, [isCheckable, checked, halfChecked, isDisabled, props.disableCheckbox, props.title]);
   const dragging = context.draggingNodeKey === eventKey;
-  const ariaSelected = selectable !== undefined ? {
-    'aria-selected': !!selectable
-  } : undefined;
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     ref: domRef,
     role: "treeitem",
-    "aria-expanded": isLeaf ? undefined : expanded,
+    id: eventKey,
+    "aria-expanded": memoizedIsLeaf ? undefined : expanded,
+    "aria-selected": isSelectable && !isDisabled ? selected : undefined,
+    "aria-checked": isCheckable && !isDisabled ? halfChecked ? 'mixed' : checked : undefined,
+    "aria-disabled": isDisabled,
     className: (0, _clsx.clsx)(className, `${context.prefixCls}-treenode`, treeClassNames?.item, {
@@ -385,3 +382,3 @@ [`${context.prefixCls}-treenode-disabled`]: isDisabled,
     onMouseMove: onMouseMove
-  }, ariaSelected, dataOrAriaAttributeProps), /*#__PURE__*/_react.default.createElement(_Indent.default, {
+  }, dataOrAriaAttributeProps), /*#__PURE__*/_react.default.createElement(_Indent.default, {
     prefixCls: context.prefixCls,
@@ -388,0 +385,0 @@ level: level,

lib/utils/treeUtil.d.ts

@@ -69,2 +69,3 @@ import * as React from 'react';
 }
+export declare function isLeafNode<TreeDataType extends BasicDataNode = DataNode>(isLeaf: boolean | undefined, loadData: ((node: EventDataNode<TreeDataType>) => Promise<any>) | undefined, hasChildren: boolean, loaded: boolean): boolean;
 /**
@@ -71,0 +72,0 @@ * Get TreeNode props with Tree props.

lib/utils/treeUtil.js

@@ -14,2 +14,3 @@ "use strict";
 exports.getTreeNodeProps = getTreeNodeProps;
+exports.isLeafNode = isLeafNode;
 exports.isTreeNode = isTreeNode;
@@ -297,2 +298,9 @@ exports.traverseDataNodes = traverseDataNodes;
 }
+function isLeafNode(isLeaf, loadData, hasChildren, loaded) {
+  if (isLeaf === false) {
+    return false;
+  }
+  return isLeaf || !loadData && !hasChildren || loadData && loaded && !hasChildren;
+}
+
 /**
@@ -299,0 +307,0 @@ * Get TreeNode props with Tree props.

package.json

 {
   "name": "@rc-component/tree",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "tree ui component for react",
@@ -5,0 +5,0 @@ "engines": {

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

314304

0.53%

Lines of code

7593

0.4%

Worsened metrics

Number of low supply chain risk alerts

37

12.12%

No dependency changes