a11y: Fix keyboard navigation, role, aria-labels and focus display issues on the side navigation component

[nwmac]

a11y Issues: 35, 40, 41

Issue 35
The side navigation expand/collapse button (see below) does not show keyboard focus and does not response to enter/space to activate.

Issue 40

A focus indicator is not visually available as user tabs through mentioned interactive elements using a keyboard resulting in users with learning and mobility impairments as well as those with low vision not being able to easily find out which element currently has the focus.

Header Area

• Import YAML
• Kubectl Shell
• Download KubeConfig
• Copy KubeConfig to Clipboard
• Resource Search
• Projects/Namespaces
• Nodes 1
• Cluster and Project Members
• Events 0 and so on.

Issue 41

On activating the mentioned instances, the content below gets expanded/collapsed dynamically, although the dynamic change in the content is easier to understand for sighted users, it is not intuitive for screen reader users.

• Main Content
• Starred
• Cluster
• Workloads
• Apps
• Service Discovery
  and so on.

[yonasberhe23]

Needs manual validation.

[IsaSih]

Observations:
for the side menu, the space bar does not select the sub-options of the side menu, just the main options. Is this expected?

Also, I observed that by selecting a cluster in the burger menu bar, the tab navigation doesnt change the focus to the side navigation component, but stays in the burger menu bar. In terms of usability, I suggest that once a cluster is selected from the burger menu, that the focus should then move to the side navigation so that the user accesses the cluster resources

[IsaSih]

As shown in the screenshot, the test fails issue 40. There's no focus nor tab navigation in the header area. Feature is working only for the Projects/Namespaces selection and the user logout icon.

Tested in

Rancher	v2.11-a1bda936c809e0394520c9d40d2998529223401e-head
Dashboard	master c987984
Rancher CLI	v2.11.0-rc.1

[aalves08]

As shown in the screenshot, the test fails issue 40. There's no focus nor tab navigation in the header area. Feature is working only for the Projects/Namespaces selection and the user logout icon.

Tested in

Rancher v2.11-a1bda936c809e0394520c9d40d2998529223401e-head
Dashboard master c987984
Rancher CLI v2.11.0-rc.1

I forgot that this had header items associated with the issue. Please ignore those 🙏

We've decided to tackle the header part in one go, since it's a problematic area to fix in terms of accessibility, especially because of the modals part. I would say that the following issues track the work needed on the header:

#12790
#12772
#8113
#12779
#12778

I've got a WIP PR for the header: #13011, which I am tackling at the moment.

So I would say to ignore the header part on this issue for now.

FYI @rak-phillip

[aalves08]

Observations: for the side menu, the space bar does not select the sub-options of the side menu, just the main options. Is this expected?

As per #12959 (comment), we should not use the space key for links, hence my decision on the sub-options. The main options, imo, have a double role here: they act as a link but they also expand their sub-menu. I've decided to keep the space as an action key because of that.

Also, I observed that by selecting a cluster in the burger menu bar, the tab navigation doesnt change the focus to the side navigation component, but stays in the burger menu bar. In terms of usability, I suggest that once a cluster is selected from the burger menu, that the focus should then move to the side navigation so that the user accesses the cluster resources

I think we need input from UX on this part @kwwii @edenhernandez-suse

[edenhernandez-suse]

Also, I observed that by selecting a cluster in the burger menu bar, the tab navigation doesnt change the focus to the side navigation component, but stays in the burger menu bar. In terms of usability, I suggest that once a cluster is selected from the burger menu, that the focus should then move to the side navigation so that the user accesses the cluster resources

This is a tricky one in our environment since our title (the cluster name) is in the top bar and not inside the main content. My approach to this one would be to shift focus to the side navigation, with a first hidden tab element for "Skip to content" before the first navigation item (in case of doubts, I'm talking about this: Skip to main content). That would allow users to directly jump to the cluster dashboard without tabbing through the entire side navigation.

[aalves08]

@IsaSih , I've created #13253 to track your suggestion + @edenhernandez-suse solution.

Given the fact that I've answered about the part that reopened this issue #12780 (comment), can we close this one?

FYI @nwmac @rak-phillip