Add aria-labelledby (#164)

Co-authored-by: Rogin Farrer <[email protected]>

Author: roginfarrer

.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.

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),

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'))
+})