plugins/aks-desktop: CreateAKSProject: Make errors more accessible

[illume]

• Have a focus outline.
• Make errors keyboard scrollable.
• Also add an aria title.

Keyboard-only users couldn't Tab into scrollable regions (project creation failure panel, access control assignees list in Review step), making full error content unreachable without a mouse.

Fixes #300

• [Accessibility team] Unable to scroll failure / error message using keyboard #300

Description

Adds tabIndex={0}, role="region", aria-label, and a visible :focus outline to the two scrollable Box containers that were previously keyboard-inaccessible. Once focused, users can scroll with Arrow keys, Page Up/Down, and Home/End.

<Box
  tabIndex={0}
  role="region"
  aria-label={t('Error details')}
  sx={{
    overflowY: 'auto',
    '&:focus': { outline: '2px solid', outlineColor: 'error.main', outlineOffset: '2px' },
  }}
>

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Performance improvement
• Code refactoring
• CI/CD changes
• Other: ___

Related Issues

Changes Made

• CreateAKSProject.tsx: tabIndex={0} + role="region" + aria-label + focus outline on the scrollable error details panel
• ReviewStep.tsx: same treatment on the scrollable access control assignees list

Testing

• Unit tests pass
• Integration tests pass
• Manual testing completed
• Performance tested (if applicable)
• Accessibility tested (if applicable)

Test Cases

1. Tab to the error panel after a failed project creation — focus lands on the region and a visible outline appears; Arrow keys / Page Up/Down scroll the content
2. Tab to the Access Control list in the Review step — same focus and scroll behavior
3. Screen reader announces the region label on focus

Screenshots/Videos

If applicable, add screenshots or videos to demonstrate the changes.

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published

Breaking Changes

N/A

Performance Impact

• No performance impact
• Performance improved
• Performance degraded (explain why this is acceptable)

Documentation Updates

• README.md updated
• API documentation updated
• Code comments updated
• User guide updated
• No documentation updates needed

Reviewer Notes

Both scrollable containers now receive the same accessibility treatment for consistency. Focus outline color matches the context: error.main for the failure panel, primary.main for the access control list.

[Copilot]

Pull request overview

Improves keyboard accessibility in the AKS Desktop “Create AKS Project” flow by making scrollable content regions (assignees list + error details) focusable and giving them a visible focus outline, with ARIA labeling for screen readers.

Changes:

• Make the “Access control assignees” list container keyboard-focusable and scrollable, with a focus outline and ARIA region label.
• Make the error details panel focusable for keyboard scrolling, with a focus outline and ARIA region label.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
plugins/aks-desktop/src/components/CreateAKSProject/components/ReviewStep.tsx	Adds focusability, region semantics, and focus outline to the assignees list container.
plugins/aks-desktop/src/components/CreateAKSProject/CreateAKSProject.tsx	Adds focusability, region semantics, and focus outline to the scrollable error details area.

---

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

[Copilot]

Pull request overview

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

---

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

[Copilot]

Pull request overview

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

---

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

[Copilot]

aria-label uses t('Error details'), but there is no corresponding i18n key in plugins/aks-desktop/locales/*/translation.json (search shows no matches). This will fall back to the raw key string and won’t be localized; please add the translation key (and required plural/locale entries as needed) or reuse an existing translation key that already exists.