Skip to content

[docs][stepper] Fix focus management in examples#48494

Open
silviuaavram wants to merge 6 commits intomui:masterfrom
silviuaavram:docs/stepper-focus-management
Open

[docs][stepper] Fix focus management in examples#48494
silviuaavram wants to merge 6 commits intomui:masterfrom
silviuaavram:docs/stepper-focus-management

Conversation

@silviuaavram
Copy link
Copy Markdown
Member

@silviuaavram silviuaavram commented May 7, 2026

This PR addresses focus loss that occurs in interactive Stepper demos when the focused button is removed or disabled after a step transition.

Cases fixed per demo:

  • HorizontalLinearStepper — focuses Reset when Finish is clicked (completing all steps); focuses Next when Reset is clicked (returning to step 1); focuses Next when Skip is used and the next step is not optional
  • HorizontalNonLinearStepper — refactored helper functions (totalSteps, completedSteps, isLastStep, allStepsCompleted) from functions to derived variables; focuses Reset when all steps are completed; focuses Next when Reset is clicked; focuses Next when navigating back to the first step via Back
  • VerticalLinearStepper— focuses Continue when going forward; focuses Reset when Finish is clicked; focuses Continue when Reset is clicked (returning to step 1) or when reaching the first step via Back button; focuses Back when going backward; also removes the Back button from the DOM on the first step instead of just disabling it, so the ref always points to a mounted button
  • DotsMobileStepper / ProgressMobileStepper / TextMobileStepper — focuses Next when going back to the first step (Back becomes disabled); focuses Back when reaching the last step (Next becomes disabled)

Also adds aria-labels to the two examples showing a progress indicator:

  • ProgressMobileStepper
  • DotsMobileStepper

@silviuaavram silviuaavram added docs Improvements or additions to the documentation. scope: stepper Changes related to the stepper. labels May 7, 2026
@silviuaavram silviuaavram marked this pull request as ready for review May 7, 2026 13:20
Copilot AI review requested due to automatic review settings May 7, 2026 13:20
@silviuaavram silviuaavram force-pushed the docs/stepper-focus-management branch from 9f4162b to 2d480b7 Compare May 7, 2026 13:22
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates several Stepper documentation demos to preserve keyboard focus when step transitions disable or remove the currently focused button, by programmatically moving focus to an appropriate remaining control.

Changes:

  • Added focus-management refs and useEffect logic to Horizontal/Vertical Stepper demos to move focus to Next/Back/Reset during step transitions.
  • Added similar focus-management to MobileStepper demos (dots/progress/text) when reaching the first/last step where one control becomes disabled.

Reviewed changes

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

Show a summary per file
File Description
docs/data/material/components/steppers/VerticalLinearStepper.tsx Adds refs + effect to focus Continue/Back/Reset across step changes
docs/data/material/components/steppers/VerticalLinearStepper.js JS equivalent of the VerticalLinearStepper focus changes
docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx Adds refs + effects to focus Reset/Next on completion/reset and when navigating back to step 1
docs/data/material/components/steppers/HorizontalNonLinearStepper.js JS equivalent of the HorizontalNonLinearStepper focus changes
docs/data/material/components/steppers/HorizontalLinearStepper.tsx Adds refs + effect to focus Reset/Next for finish/reset/skip flows
docs/data/material/components/steppers/HorizontalLinearStepper.js JS equivalent of the HorizontalLinearStepper focus changes
docs/data/material/components/steppers/DotsMobileStepper.tsx Adds refs + effect to focus Next/Back when reaching first/last step
docs/data/material/components/steppers/DotsMobileStepper.js JS equivalent of the DotsMobileStepper focus changes
docs/data/material/components/steppers/ProgressMobileStepper.tsx Adds refs + effect to focus Next/Back when reaching first/last step
docs/data/material/components/steppers/ProgressMobileStepper.js JS equivalent of the ProgressMobileStepper focus changes
docs/data/material/components/steppers/TextMobileStepper.tsx Adds refs + effect to focus Next/Back when reaching first/last step
docs/data/material/components/steppers/TextMobileStepper.js JS equivalent of the TextMobileStepper focus changes

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

Comment thread docs/data/material/components/steppers/VerticalLinearStepper.tsx Outdated
Comment thread docs/data/material/components/steppers/VerticalLinearStepper.tsx Outdated
Comment thread docs/data/material/components/steppers/VerticalLinearStepper.js Outdated
Comment thread docs/data/material/components/steppers/VerticalLinearStepper.js Outdated
@code-infra-dashboard
Copy link
Copy Markdown

code-infra-dashboard Bot commented May 7, 2026

Deploy preview

https://deploy-preview-48494--material-ui.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/private-theming 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@silviuaavram silviuaavram requested a review from Copilot May 7, 2026 14:28
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

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

Comment thread docs/data/material/components/steppers/VerticalLinearStepper.tsx Outdated
Comment thread docs/data/material/components/steppers/VerticalLinearStepper.tsx
Comment thread docs/data/material/components/steppers/DotsMobileStepper.tsx Outdated
Comment thread docs/data/material/components/steppers/ProgressMobileStepper.tsx
Comment thread docs/data/material/components/steppers/HorizontalLinearStepper.tsx Outdated
Comment thread docs/data/material/components/steppers/VerticalLinearStepper.tsx
Comment thread docs/data/material/components/steppers/VerticalLinearStepper.tsx
Comment thread docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility a11y docs Improvements or additions to the documentation. scope: stepper Changes related to the stepper.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants