Skip to content

fix(a11y): forward host tabindex to the native element - #31720

Open
ShaneK wants to merge 2 commits into
mainfrom
FW-7907
Open

ShaneK wants to merge 2 commits into
mainfrom
FW-7907

Conversation

@ShaneK

@ShaneK ShaneK commented Nov 9, 2026

Copy link
Copy Markdown
Member

Issue number: resolves #31623


What is the current behavior?

Currently, setting tabindex="0" on ion-button, ion-back-button, ion-menu-button, ion-select, or a clickable ion-item or ion-card leaves it on the host, so the host becomes its own tab stop in front of the native <button> or <a> inside the shadow root. With Full Keyboard Access on iOS, each of these controls takes two Tab presses, and the first stop has no accessible name.

What is the new behavior?

  • A non-negative tabindex on the host now moves to the native element, so each control is a single tab stop with the right name. It also stays off the host when a framework binding writes it after load.
  • A negative tabindex stays on the host, where it already takes the control out of the tab order and where the overlay focus trap and focusManagerPriority expect to find it.
  • An ion-item or ion-card that isn't clickable has no native button or link, so it keeps tabindex on the host like before.

We do this with a new createTabindexController, built on createAttributeController, which now takes a moveFromHost check that decides per value whether an attribute moves off the host or stays there.

Does this introduce a breaking change?

  • Yes
  • No

Other information

This doesn't change the other case from the issue, where a button with no tabindex is skipped by plain Tab in WKWebView, since that's WebKit's default behavior.

… fab-button, item-option, router-link, segment-button and tab-button
@ShaneK
ShaneK requested a review from a team as a code owner November 9, 2026 22:11
@ShaneK
ShaneK requested a review from thetaPC November 9, 2026 22:11
@vercel

vercel Bot commented Nov 9, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
ionic-framework Ready Ready Preview Nov 9, 2026 10:15pm UTC

Request Review

This branch was successfully deployed

1 active deployment
Preview — 449f7a4b Deployed Nov 9, 2026 by vercel[bot]
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.

bug: tabindex on the host is not forwarded to the native element in the shadow DOM - double tab stop with Full Keyboard Access on iOS

1 participant