fix(Treevieew):do not add aria-describedby attribute when empty leadi…

…ng/trailing visual (#5196)

* fix(Treevieew):do not add aria-describedby attribute when empty leading/trailing visual

* Create tender-dodos-walk.md

.changeset/tender-dodos-walk.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(Treevieew):do not add aria-describedby attribute when empty leading/trailing visual

packages/react/src/TreeView/TreeView.test.tsx

@@ -189,6 +189,19 @@ describe('Markup', () => {
     expect(noDescription).toHaveAccessibleDescription(' ')
   })
 
+  it('should not have aria-describedby when no leading or trailing visual', () => {
+    const {getByLabelText} = renderWithTheme(
+      <TreeView aria-label="Test tree">
+        <TreeView.Item id="item-1">Item 1</TreeView.Item>
+        <TreeView.Item id="item-2">Item 2</TreeView.Item>
+      </TreeView>,
+    )
+
+    const noDescription = getByLabelText(/Item 1/)
+    expect(noDescription).not.toHaveAccessibleDescription()
+    expect(noDescription).not.toHaveAttribute('aria-describedby')
+  })
+
   it('should include `aria-expanded` when a SubTree contains content', async () => {
     const user = userEvent.setup({
       advanceTimers: jest.advanceTimersByTime,

packages/react/src/TreeView/TreeView.tsx

@@ -458,6 +458,11 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
       [onSelect, setIsExpandedWithCache, toggle],
     )
 
+    const ariaDescribedByIds = [
+      slots.leadingVisual ? leadingVisualId : null,
+      slots.trailingVisual ? trailingVisualId : null,
+    ].filter(Boolean)
+
     return (
       <ItemContext.Provider
         value={{
@@ -480,7 +485,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
           role="treeitem"
           aria-label={ariaLabel}
           aria-labelledby={ariaLabel ? undefined : ariaLabelledby || labelId}
-          aria-describedby={`${leadingVisualId} ${trailingVisualId}`}
+          aria-describedby={ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined}
           aria-level={level}
           aria-expanded={(isSubTreeEmpty && (!isExpanded || !hasSubTree)) || expanded === null ? undefined : isExpanded}
           aria-current={isCurrentItem ? 'true' : undefined}