Skip to content

fix(modal): add conditional tabIndex for handle cycling #30510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 30, 2025
Merged

fix(modal): add conditional tabIndex for handle cycling #30510

merged 7 commits into from
Jun 30, 2025

Conversation

ShaneK
Copy link
Member

@ShaneK ShaneK commented Jun 24, 2025

Issue number: resolves internal


What is the current behavior?

Currently, you cannot tab into a sheet modal from outside of it (the background), even with handleBehavior set to cycle. This destroys the accessibility of moving from the background behind a sheet modal to the contents of a sheet modal/the drag bar to be able to cycle the size.

What is the new behavior?

Now you can get into a sheet modal from outside of it and interact with its contents/drag handle when handleBehavior is set to cycle. This opens up the accessibility of the sheet modal and allows for interacting with background elements with sheet modals open using accessibility tools like VoiceOver and TalkBack.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Relevant test screen

Dev build: 8.6.3-dev.11750971489.140836b0

@ShaneK ShaneK requested a review from a team as a code owner June 24, 2025 20:56
@ShaneK ShaneK requested a review from brandyscarney June 24, 2025 20:56
Copy link

vercel bot commented Jun 24, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 30, 2025 1:23pm

@github-actions github-actions bot added the package: core @ionic/core package label Jun 24, 2025
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

When testing the dev build on the minimal repro, I noticed that I have to tab twice from the increment button to get to the first interactable element within the modal. Is that expected? I would have thought that I only need one tab.

Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

Let's try to add a test to prevent regression.

@brandyscarney brandyscarney dismissed thetaPC’s stale review June 30, 2025 16:19

Maria is out on leave and cannot re-review

Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

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

Works great! 👍

@ShaneK ShaneK added this pull request to the merge queue Jun 30, 2025
Merged via the queue into main with commit ee47660 Jun 30, 2025
51 checks passed
@ShaneK ShaneK deleted the FW-6523 branch June 30, 2025 16:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants