Add aria-labelledby (#164)

Co-authored-by: Rogin Farrer <rfarrer@wayfair.com>
roginfarrer · Nov 15, 2023 · cc68b19 · cc68b19
1 parent 6d4965c
commit cc68b19
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/tricky-feet-cheat.md b/.changeset/tricky-feet-cheat.md
@@ -0,0 +1,5 @@
+---
+'react-collapsed': patch
+---
+
+Added `aria-labelledby` to the collapse panel, to be labelled by the toggle.
diff --git 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
@@ -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(<Collapse />)
+  expect(screen.getByLabelText('Toggle')).toEqual(screen.getByTestId('collapse'))
+})