SideNavigation a11y fix

[xman343]

Changes

#1148 - All SideNavigation examples are failing due to button-name Axe violations. In all examples it occurs in the expand button, and in SubmenuExample it also occurs in the settings button within the submenu. The examples and / or component will be modified to resolve these rule violations.

• Passing solution: Button name added by implementing label Expand or collapse side menu in the expand button in SideNavigation.
• Passing solution: Button name added to SubMenuExample SubMenu Settings Button through label Submenu settings.

Testing

Testing will be conducted through the Cypress web a11y script. Any breaking changes will be evaluated through unit testing & visual tests.

I am also reading the examples with NVDA to assess their screen reader compatibility.

Docs

N/A

[xman343]

I'm still conflicted on the label for the expand button. "Expand or collapse side menu" describes both of the actions that the user is meant to perform with the element, but I fear that it ironically runs the risk of making the button's purpose confusing.

"Toggle" was another idea I had, but it's kind of vague as to what exactly it's toggling. I could have it as "Toggle side menu," but then the question is... toggle what about the side menu, exactly?

I could just leave it as "Expand side menu," and the user would likely assume that the button would also collapse the side menu if it's already expanded (a common design pattern), but again, I don't want to run the risk of being too vague.

I have the label as "Expand or collapse side menu" for now because I'd rather run the risk of giving too much information at first than not enough. It's less work to have the full intent established before we whittle it down into something better, than to build something new from the ground up imo.

[xman343]

On another note: even when the expand button has an accessible label, my other concern now is that it doesn't read out whether the side menu is expanded or collapsed, when I'm pretty sure that widgets like this are supposed to read out their expand/collapse status. Even though the purpose for this particular example is just to reveal the text labels for each button, I feel that it's still important to communicate that context to the user.

[mayank99]

LGTM. i believe your concerns from above have been addressed now