Breadcrumb: wrap steps at high text zoom for a11y compliance

[gambtho]

Description

At 200% text resize on 1280x768, the Create Project breadcrumb stepper clips the last steps ("Access", "Review") behind a horizontal scrollbar, violating MAS 1.4.4 (Resize Text).

This replaces the horizontal scroll overflow with flexWrap: 'wrap' so steps flow to the next line instead of being hidden.

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Related Issues

Closes #469

Changes Made

• Breadcrumb container: replaced overflowX: 'auto' with flexWrap: 'wrap' and gap: 1 so steps wrap instead of scrolling
• Breadcrumb container: removed flexDirection: 'column' at md breakpoint — flexWrap handles narrow widths
• Separators: moved > inside each step button so it wraps as a unit with its label
• Separators: added aria-hidden="true" so screen readers skip the decorative > character
• Storybook: added NarrowContainer story (fixed 500px width with border) to verify wrapped layout

Testing

• Unit tests pass
• Accessibility tested (if applicable)

Test Cases

1. Storybook NarrowContainer story shows all 5 steps wrapping correctly
2. At 1280x768 / 200% text size, all stepper steps are fully visible on the Create Project page
3. At normal (100%) text size, breadcrumb displays in a single row as before
4. Next/Back footer buttons navigate between steps correctly
5. Clicking a breadcrumb step navigates to that step
6. Screen reader does not announce > separators

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my own code
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes

Performance Impact

• No performance impact

[Copilot]

Pull request overview

Updates the AKS project creation breadcrumb to better reflow at high text zoom for accessibility compliance by allowing steps to wrap and adding a Storybook scenario to validate behavior.

Changes:

• Enable wrapping layout for the breadcrumb container (flex wrap + gap) and tighten separator spacing.
• Prevent breadcrumb step content from breaking within a step by applying whiteSpace: 'nowrap'.
• Add a Storybook story rendering the breadcrumb in a narrow container to verify wrapping.

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/Breadcrumb.tsx	Adjusts breadcrumb flex layout to wrap and tweaks spacing/whitespace behavior.
plugins/aks-desktop/src/components/CreateAKSProject/components/Breadcrumb.stories.tsx	Adds a narrow-container story to exercise wrap behavior under constrained width/high zoom.

---

💡 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.

[Copilot]

Pull request overview

Improves accessibility for the Create Project breadcrumb stepper at high text zoom by avoiding horizontal clipping and enabling wrapped breadcrumb steps.

Changes:

• Updated breadcrumb container layout to wrap steps (replacing horizontal overflow scrolling).
• Adjusted separator rendering/spacing to better fit the wrapped layout.
• Added a Storybook story to validate behavior in a narrow container.

Reviewed changes

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

File	Description
plugins/aks-desktop/src/components/CreateAKSProject/components/Breadcrumb.tsx	Switches breadcrumb layout to wrapping and tweaks separator placement/spacing for better high-zoom behavior.
plugins/aks-desktop/src/components/CreateAKSProject/components/Breadcrumb.stories.tsx	Adds a narrow-width Storybook scenario to visually verify wrapping.

---

💡 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.

[vyncent-t]

Looks about right to me, the > chevs act a little odd when resizing normally

other than that, this should satisfy the clipping issue from the audit team

Image of resized chevs