[a11y] SidePanel: toggle button aria-labelledby reference is broken when collapsed

[williamjstanton]

🐛 Bug Report

A clear and concise description of what the bug is.

When SidePanel component is in a collapsed state, the ToggleButton sub-component is still using the same aria-labelledby id reference to the heading that can no long be found in the DOM.

This issue can also be observed on the aria-labelledby reference on the <section> element.

To Reproduce

Steps to reproduce the behavior:
All browsers, all screen readers.

1. Turn on VoiceOver (macOS), launch Safari
2. Navigate to Storybook Basic Example
3. Set rotor to "landmarks": Ctrl + Opt + Cmd + RightArrow
4. Jump to landmark "Tasks Panel, region": Ctrl + Opt + Cmd + DownArrow
5. Observe: VoiceOver finds the Side Panel Basic example
6. Read Toggle Button: Ctrl + Opt + RightArrow
7. Observe: "Tasks Panel, expanded button"
8. Activate button: Ctrl + Opt + SpaceBar
9. Read backward to previous heading: Ctrl + Opt + Cmd + Shift + h
10. Repeat STEP 4: Jump to landmark
11. (ISSUE) Observe VoiceOver cannot find landmark anymore
12. (ISSUE) Observe toggle button is now described as "collapsed button"

Expected Behavior

A clear and concise description of what you expected to happen.

The Side Panel landmark region should work regardless of expanded / collapsed state. The <section> element must have a valid accessible name.

The Toggle Button must have a valid accessible name.

Actual Results

A clear and concise description of what actually happens

Please refer to steps 11, 12 in the reproduction steps. Refer to attached screen shots.

Browser (if applicable)

If this was a visual bug, what browser did you spot it on?

All of them.

Link to repl or repo (highly encouraged)

Please provide a reference to a repo or branch to help us reproduce this bug.
Storybook Basic Example

Include a screenshot of a visual bug

[williamjstanton]

It occurs to me with the release of the new AccessibleHide component, I wonder if that can be used in the SidePanel component when it is in a collapsed state. This would preserve the 'aria-labelledby' id reference even while the element is not visible on screen.