VoiceOver traverses links in closed SideNav

[wkeese]

VoiceOver traverses the link in a closed SideNav.

Environment

iOS 13.

Detailed description

Test on Carbon 10.11.

When you turn on VoiceOver and swipe through the elements, it ends up going over every link in the SideNav, even though the SideNav is width: 0.

Steps to reproduce the issue

See https://react.carbondesignsystem.com/?path=/story/ui-shell--header-base-w-navigation-actions-and-sidenav for example, but it's an issue with the CSS from this repository, not anything particular with react.

1. Navigate to https://react.carbondesignsystem.com/?path=/story/ui-shell--header-base-w-navigation-actions-and-sidenav.
2. Triple click home button or use settings to turn on VoiceOver.
3. Click "app switcher" button on right edge of header.
4. swipe right
5. focus goes to sidenav even though it was (and remains) closed.

Additional information

Not sure how to fix this as setting display:none breaks the slide-in / slide-out animation.

[tw15egan]

Looks like we can solve this by toggling the aria-hidden attribute based on the SideNav expanded state

[wkeese]

Sounds good, I've also found that (in general) VoiceOver skips traversing aria-hidden nodes.