add leadingActionId and aria-hidden to LeadingAction subcomponent

primer · May 9, 2024 · f9b880d · f9b880d
1 parent 770e321
commit f9b880d
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx
@@ -45,6 +45,7 @@ const ItemContext = React.createContext<{
   setIsExpanded: (isExpanded: boolean) => void
   leadingVisualId: string
   trailingVisualId: string
+  leadingActionId: string
 }>({
   itemId: '',
   level: 1,
@@ -54,6 +55,7 @@ const ItemContext = React.createContext<{
   setIsExpanded: () => {},
   leadingVisualId: '',
   trailingVisualId: '',
+  leadingActionId: '',
 })
 
 // ----------------------------------------------------------------------------
@@ -374,6 +376,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
     const labelId = useId()
     const leadingVisualId = useId()
     const trailingVisualId = useId()
+    const leadingActionId = useId()
     const [isExpanded, setIsExpanded] = useControllableState({
       name: itemId,
       // If the item was previously mounted, it's expanded state might be cached.
@@ -449,6 +452,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
           setIsExpanded: setIsExpandedWithCache,
           leadingVisualId,
           trailingVisualId,
+          leadingActionId,
         }}
       >
         {/* @ts-ignore Box doesn't have type support for `ref` used in combination with `as` */}
@@ -459,7 +463,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
           id={itemId}
           role="treeitem"
           aria-labelledby={labelId}
-          aria-describedby={`${leadingVisualId} ${trailingVisualId}`}
+          aria-describedby={`${leadingActionId} ${leadingVisualId} ${trailingVisualId}`}
           aria-level={level}
           aria-expanded={isSubTreeEmpty ? undefined : isExpanded}
           aria-current={isCurrentItem ? 'true' : undefined}
@@ -850,14 +854,16 @@ TrailingVisual.displayName = 'TreeView.TrailingVisual'
 // TreeView.LeadingAction
 
 const LeadingAction: React.FC<TreeViewVisualProps> = props => {
-  const {isExpanded, leadingVisualId} = React.useContext(ItemContext)
+  const {isExpanded, leadingActionId} = React.useContext(ItemContext)
   const children = typeof props.children === 'function' ? props.children({isExpanded}) : props.children
   return (
     <>
-      <div className="PRIVATE_VisuallyHidden" aria-hidden={true} id={leadingVisualId}>
+      <div className="PRIVATE_VisuallyHidden" aria-hidden={true} id={leadingActionId}>
         {props.label}
       </div>
-      <div className="PRIVATE_TreeView-item-leading-action">{children}</div>
+      <div className="PRIVATE_TreeView-item-leading-action" aria-hidden={true}>
+        {children}
+      </div>
     </>
   )
 }