diff --git a/.changeset/tender-dodos-walk.md b/.changeset/tender-dodos-walk.md new file mode 100644 index 00000000000..3ba0bcc752b --- /dev/null +++ b/.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 diff --git a/packages/react/src/TreeView/TreeView.test.tsx b/packages/react/src/TreeView/TreeView.test.tsx index 056b6714acb..7f54aecad2e 100644 --- a/packages/react/src/TreeView/TreeView.test.tsx +++ b/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( + + Item 1 + Item 2 + , + ) + + 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, diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx index b891aa97a74..e9f266f3493 100644 --- a/packages/react/src/TreeView/TreeView.tsx +++ b/packages/react/src/TreeView/TreeView.tsx @@ -458,6 +458,11 @@ const Item = React.forwardRef( [onSelect, setIsExpandedWithCache, toggle], ) + const ariaDescribedByIds = [ + slots.leadingVisual ? leadingVisualId : null, + slots.trailingVisual ? trailingVisualId : null, + ].filter(Boolean) + return ( ( 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 ? undefined : isExpanded} aria-current={isCurrentItem ? 'true' : undefined}