Skip to content

fix(stepper): make step title keyboard and screen-reader accessible - #1397

Merged
anusha-c18 merged 1 commit into
canonical:mainfrom
anusha-c18:fix-stepper-focus
Jul 16, 2026
Merged

fix(stepper): make step title keyboard and screen-reader accessible#1397
anusha-c18 merged 1 commit into
canonical:mainfrom
anusha-c18:fix-stepper-focus

Conversation

@anusha-c18

@anusha-c18 anusha-c18 commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

Done

  • Made the Step title keyboard and screen-reader accessible
  • Added relevant tests.
  • Updated Stepper snapshot for the new aria attributes.

QA

Pinging @canonical/react-library-maintainers for a review.

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

  • In Storybook, open Stepper, Default
  • Tab to an enabled step (Step 1/2) and verify that the focus ring shows
  • Verify that the disabled steps (Step 3/4) are skipped on tab

Fixes

AC-4869

Copilot AI left a comment

Copy link
Copy Markdown

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 improves the Stepper’s accessibility by making the step title operable via keyboard and exposing it to assistive technologies as an interactive control, with corresponding test and snapshot updates.

Changes:

  • Add keyboard interaction + ARIA attributes to the Step title element.
  • Add unit tests for keyboard/focus/ARIA behavior of the Step title.
  • Update Stepper snapshot output for the new attributes and add focus styling.

Reviewed changes

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

File Description
src/components/Stepper/Step/Step.tsx Adds role="button", tabIndex, aria-disabled, and key handling to make the step title keyboard/AT accessible.
src/components/Stepper/Step/Step.test.tsx Adds tests to validate role, focusability, ARIA disabled state, and keyboard activation.
src/components/Stepper/Step/Step.scss Adds focus styling for enabled steps.
src/components/Stepper/__snapshots__/Stepper.test.tsx.snap Updates snapshots to include the newly rendered ARIA/role/tabindex attributes.

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

Comment thread src/components/Stepper/Step/Step.tsx
Comment thread src/components/Stepper/Step/Step.tsx
Comment thread src/components/Stepper/Step/Step.test.tsx

@tarek-hanna tarek-hanna left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM :) thanks Anusha 👍

@anusha-c18
anusha-c18 merged commit 24313d6 into canonical:main Jul 16, 2026
8 checks passed
@anusha-c18
anusha-c18 deleted the fix-stepper-focus branch July 16, 2026 11:51
@github-actions

Copy link
Copy Markdown

🎉 This PR is included in version 4.8.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants