diff --git a/packages/react-collapsed/src/index.ts b/packages/react-collapsed/src/index.ts index c630ec5..8c38707 100644 --- a/packages/react-collapsed/src/index.ts +++ b/packages/react-collapsed/src/index.ts @@ -314,6 +314,7 @@ export function useCollapse({ return { id: `react-collapsed-panel-${uniqueId}`, 'aria-hidden': !isExpanded, + 'aria-labelledby': `react-collapsed-toggle-${uniqueId}`, role: 'region', ...args, [refKey || 'ref']: mergeRefs(collapseElRef, theirRef), diff --git a/packages/react-collapsed/tests/index.test.tsx b/packages/react-collapsed/tests/index.test.tsx index bf3990e..155e444 100644 --- a/packages/react-collapsed/tests/index.test.tsx +++ b/packages/react-collapsed/tests/index.test.tsx @@ -143,3 +143,8 @@ test('id will be overridden by prop getters', () => { expect(container.querySelector('#baz')).toBeInTheDocument() expect(container.querySelector('#bar')).toBeInTheDocument() }) + +test('collapse element labelled by toggle', () => { + render() + expect(screen.getByLabelText('Toggle')).toEqual(screen.getByTestId('collapse')) +})