[re: Accessibility Audit] Keyboard focus order resets to top navigation after navigating Back / Next instead of landing on first interactive control

[vyncent-t]

Description

ADO ISSUE: https://dev.azure.com/msazure/CloudNativeCompute/_workitems/edit/36822313

This PR introduces a fix for the re-opened issue linked above where the tab navigation would not focus the first interactable input of that view. This was present in the "Create New AKS managed namespace" option and also the "Create new namespace" option.

Both of these views held the same partially fixed issue where using tab navigation would skip over the "Basics" step. The changes introduced in this PR makes sure the first input on the "Basics" step is always focused when opening to the page.

Related to the original PR #352
and the original issue #304

How to test

AKS managed namespace

• Launch the AKS desktop application and login with your v-id.
• TAB to "Home" page.
• Tab to "Projects" tab and press ENTER. Verify all the elements of "Projects" tab.
• TAB to "Create Project" button and press ENTER. "Create a Project" dialog will open. Verify the dialog.
• TAB to "AKS Managed Project" button and press ENTER.
• "New Project" page will open.
• Observe that keyboard focus now prioritizes the first input under the "Basics" step

Create new namespace

• Launch the AKS desktop application and login with your v-id.
• TAB to "Home" page.
• Tab to "Projects" tab and press ENTER. Verify all the elements of "Projects" tab.
• TAB to "Create Project" button and press ENTER. "Create a Project" dialog will open. Verify the dialog.
• TAB to "Create new namespace" button and press ENTER.
• "Create New Namespace" page will open.
• Observe that keyboard focus now prioritizes the first input under the "Basics" step

[Copilot]

Pull request overview

Fixes keyboard focus management in the AKS Desktop “Create AKS managed namespace / Create namespace” wizard flows so that after step navigation (Back/Next) focus lands on the first logical interactive control (typically the first form input on the Basics step), rather than returning to the top navigation or landing on alert action buttons.

Changes:

• Add step-level focus management to the Create Namespace wizard so the first focusable control within the step content is focused on step changes.
• Update the Create AKS Project wizard focus selector to prioritize form inputs over buttons/tabindex targets.
• Add a Basics-step mount focus fallback to ensure “Project Name” receives focus when step content mounting is delayed by AzureAuthGuard.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
plugins/aks-desktop/src/components/CreateNamespace/CreateNamespace.tsx	Adds a step content ref + effect to focus the first interactive control when activeStep changes.
plugins/aks-desktop/src/components/CreateAKSProject/hooks/useCreateAKSProjectWizard.ts	Adjusts focus selection logic to prefer inputs (avoiding alert buttons taking focus).
plugins/aks-desktop/src/components/CreateAKSProject/components/BasicsStep.tsx	Ensures the Project Name field is focused on mount to cover delayed mounting cases.

---

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

[Copilot]

Pull request overview

Fixes keyboard focus behavior in the AKS Desktop “create project / create namespace” flows so that after entering the page (and when moving between wizard steps), focus lands on the first logical interactive form control—specifically ensuring the “Basics” step doesn’t get skipped for keyboard users.

Changes:

• Add step-content refs + step-change focus management to the “Create New Namespace” wizard so the first form control is focused on step entry.
• Update the AKS managed-namespace wizard focus selector to prefer form inputs over alert action buttons.
• Add an explicit auto-focus on the “Project Name” field in the Basics step to handle delayed mounting via AzureAuthGuard.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
plugins/aks-desktop/src/components/CreateNamespace/CreateNamespace.tsx	Adds step container ref + effect to focus the first interactive form control when steps change.
plugins/aks-desktop/src/components/CreateAKSProject/hooks/useCreateAKSProjectWizard.ts	Adjusts focus logic to prioritize inputs over buttons/tabindex elements.
plugins/aks-desktop/src/components/CreateAKSProject/components/BasicsStep.tsx	Ensures “Project Name” input receives focus on mount to cover initial render timing.

---

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

You can also share your feedback on Copilot code review. Take the survey.

[illume]

@vyncent-t please consider some notes...

[illume]

code looks good to me.

(I didn't test it though)

[tejhan]

Tested & working as described, LGTM