diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx index 590a4ce1c26..7c21ad49f84 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx @@ -448,15 +448,17 @@ function Example() { ## API + -```tsx links={{Tree: '#tree', TreeItem: '#treeitem', TreeItemContent: '#treeitemcontent', TreeSection: '#treesection', TreeHeader: '#treeheader', Button: 'Button', Checkbox: 'Checkbox', TreeLoadMoreItem: '#treeloadmoreitem', SelectionIndicator: 'selection#animated-selectionindicator'}} +```tsx links={{Tree: '#tree', TreeItem: '#treeitem', TreeItemContent: '#treeitemcontent', TreeSection: '#treesection', TreeHeader: '#treeheader', Button: 'Button', Checkbox: 'Checkbox', TreeLoadMoreItem: '#treeloadmoreitem', Text: 'Text', SelectionIndicator: 'selection#animated-selectionindicator'}} +
+ Projects + + Shared project files + +
+ + )} +
+ + +
+ Report + + Last updated today + +
+
+
+
+
+); + export const TreeExampleStatic: StoryObj = { render: args => , args: { diff --git a/packages/react-aria-components/test/Tree.test.tsx b/packages/react-aria-components/test/Tree.test.tsx index c0087e78fd9..8081c9aca2c 100644 --- a/packages/react-aria-components/test/Tree.test.tsx +++ b/packages/react-aria-components/test/Tree.test.tsx @@ -411,6 +411,47 @@ describe('Tree', () => { } }); + describe('descriptions', () => { + function DescriptionTree({ + hideDescription = false, + itemAriaLabel + }: { + hideDescription?: boolean; + itemAriaLabel?: string; + }) { + return ( + + + + Projects + {!hideDescription && ( + + Shared files + + )} + + + + ); + } + + it('includes the description in the row name', () => { + let {getByRole} = render(); + expect(getByRole('row')).toHaveAccessibleName('Projects Shared files'); + }); + + it('includes the description with an explicit item aria-label', () => { + let {getByRole} = render(); + expect(getByRole('row')).toHaveAccessibleName('Team projects Shared files'); + }); + + it('keeps the row name when there is no description', () => { + let {getByRole} = render(); + expect(getByRole('row')).toHaveAccessibleName('Projects'); + expect(getByRole('row')).not.toHaveAttribute('aria-labelledby'); + }); + }); + it('should render a Tree with custom classes', () => { let {getByRole, getAllByRole} = render(