a11y: Fix keyboard navigation and focus display issues on the home screen

[nwmac]

a11y Issues: 62, 64, 65, 69, 60

Fix keyboard navigation and focus issues on the home screen:

In the clusters table - sorting icons do not support keyboard navigation or show focus - these should be fixed in the Sortable Table component.

Preferences link in the banner - link does not support keyboard navigation or show focus

Banner Close Button - close button does not support keyboard navigation or show focus

Banner Image Close Button - close button does not support keyboard navigation or show focus

** Issue 60 - Textual description missing for interactive image**

These two images are missing the aria-label attribute:

[yonasberhe23]

Needs manual validation at this time as we dont have existing accessiblity tests. Follow-up ticket to create automated tests coverage rancher/qa-tasks#1639

[aalves08]

@yonasberhe23 there's already an issue for creating automated tests: #8986

where there's an associated PR with a WIP inclusion of cypress-axe: #12900

We wanted to knock out the priority 0 issues before spending time on tests, since I imagine that's going to take a while to configure and run.

[yonasberhe23]

@aalves08 ah thanks for pointing that out. I'll close the ticket I created.

[IsaSih]

Navigation using tab and return work as expected in
Rancher | v2.11-1e40bc40c55a020fc67dc3c3dde47b41dc94caf1-head
Dashboard | master 574248d
Rancher CLI | v2.11.0-rc.1
Helm | dev
Machine | v0.15.0-rancher125

However, the space bar does not perform click actions in elements inside the table. It works for elements outside tables.
Same as in #12786, want to confirm @nwmac if this is working as expected? I reopened the issue because I believe that space should also perform the same actions as the return/enter keyboard shortcut.

[aalves08]

The decision made is that "links" that appear as buttons are to have the space key as trigger as simple links, anchors, non-button links should not have the space key as trigger, as per #12959 (comment) + #12959 (comment)

[IsaSih]

I'm reopening this issue as I identified a regression from the version I tested last.
The closing X icon of the image in the home screen is not being selected by tab navigation. It's selected by tab just if the user first clicks the image with the mouse. This is demonstrated in the screenshot:

Screen.Recording.2025-01-28.at.16.28.34.mov

Tested in

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

[aalves08]

I'm reopening this issue as I identified a regression from the version I tested last. The closing X icon of the image in the home screen is not being selected by tab navigation. It's selected by tab just if the user first clicks the image with the mouse. This is demonstrated in the screenshot:

Screen.Recording.2025-01-28.at.16.28.34.mov
Tested in

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

Hi @IsaSih

I forgot about this. Thanks for reporting it.

I've opened #13228 to make the close button always visible (it was only visible on mouse hover). To note that the home page banner closeability is tied to a user preference as well, meaning that if that preference is set to false a user won't see the X to close it. I think it comes true (closable) as default. FYI @rak-phillip

[aalves08]

Since the solution is more complex, according to #13228 (comment) , I've created #13251 to track the reported situation from @IsaSih .

Can this issue be closed or is this a blocker @IsaSih @nwmac ? FYI @rak-phillip