fix(a11y)6-7-8: replace menu with list and make cluster chooser focusable

[Sagar-6203620715]

Summary

This PR fixes multiple accessibility issues in ClusterChooserPopup by correcting ARIA roles, list structure, and focus behavior.

Related Issue

Partially fixes #4385
Addresses points 6, 7, and 8 from issue #4385

Changes

• Replaced MenuList / MenuItem with semantic List / ListItemButton
• Fixed invalid ARIA menu role and required-children violations
• Ensured ListSubheader is contained within a proper list parent
• Made the scrollable cluster list focusable using tabIndex={0}
• Avoided introducing new ARIA role violations by not using role="listbox"

Tested by:

# Install frontend dependencies if not already installed
npm run install:frontend

# Check if TypeScript compiles (most important)
npm run frontend:tsc

# Run linting
npm run frontend:lint

# (Optional) Start Storybook after dependencies are installed
npm run frontend:storybook

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Sagar-6203620715
Once this PR has been reviewed and has the lgtm label, please assign sniok for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[Copilot]

Pull request overview

This PR addresses three accessibility violations in the ClusterChooserPopup component identified in issue #4385:

• Fixes ARIA required children violations (point 6) by replacing MenuList/MenuItem with List/ListItemButton
• Fixes list item structure violations (point 7) by ensuring ListSubheader is contained within a proper List parent
• Addresses scrollable region focusability (point 8) by adding tabIndex={0} to the List

Changes:

• Replaced MenuList with List and MenuItem with ListItemButton to use semantic HTML list structure instead of ARIA menu roles
• Added tabIndex={0} to make the scrollable List keyboard focusable
• Updated imports to reflect the component changes

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Adding tabIndex={0} to the List makes it focusable, but there's no onKeyDown handler on the List itself - the keyboard navigation handler is on the TextField (line 247). This means:

1. Users can tab to the List, but keyboard navigation (Arrow Up/Down, Enter) only works when the TextField is focused
2. This creates a confusing UX where tabbing to the List provides no interactive functionality

Consider either:

• Removing tabIndex={0} from the List since the ListItemButton children are already focusable and keyboard-navigable
• Or moving/duplicating the onKeyDown handler to the List component to enable keyboard navigation from the List itself

The scrollable region accessibility requirement is likely already satisfied by having focusable children (ListItemButtons) within the scrollable container.

Suggested change

tabIndex={0}

[Copilot]

The key prop on line 49 is redundant. The key prop is already correctly specified where ClusterListItem is rendered (lines 292 and 303). React does not pass the key prop to child components, so this has no effect. Consider removing it to avoid confusion.

Suggested change

key={`recent_cluster_${cluster.name}`}

[illume]

Thanks for this!

To update the snapshots you can run this.

npm run test -- -u

You can check things locally with these commands.

npm run tsc
npm run lint
npm run test
npm run format

Please check the open comments?

[k8s-ci-robot]

PR needs rebase.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[illume]

hey hey.

I'll mark this as draft for now to make it easier on reviewers. If you want to continue it, please mark it as ready to review when you've pushed changes.