Skip to content

[6.x] Fix/15401 nested interactive controls - #15580

Open
jaygeorge wants to merge 3 commits into
6.xfrom
fix/15401-nested-interactive-controls
Open

jaygeorge wants to merge 3 commits into
6.xfrom
fix/15401-nested-interactive-controls

Conversation

@jaygeorge

Copy link
Copy Markdown
Contributor

Description of the Problem

Three CP spots put a focusable element inside (or next to) a control that already claims an interactive role, which breaks keyboard/AT expectations (#15401):

  1. Login — positive tabindex values (1–6) pulled the form ahead of skip links
  2. Blueprint tabs — edit/delete controls lived inside role="tab" (nested-interactive)
  3. Blueprint tablist — Shopify Draggable’s Focusable plugin added tabindex to non-tab wrappers (aria-required-children)

The Remember me nested-checkbox shape from the issue is already fixed upstream in Reka (hidden input as a sibling).

What this PR Does

  • Removes positive login tabindexs so focus follows document order (skip links first)
  • Keeps “Forgot password?” visually by the Password label, but last in tab order (after Continue / passkey / OAuth) via CSS anchor positioning — no positive tabindex
  • Moves blueprint tab edit/delete UI out of TabTrigger
  • Moves overflow menus outside TabList (blueprints + publish tabs)
  • Excludes Draggable Focusable on sortable blueprint tabs so wrappers don’t get tabindex inside the tablist

Fixes #15401

How to Reproduce

  1. Login tab order — visit /cp/auth/login, Tab from the top of the page
    Before: form controls jump ahead of skip links
    After: skip links (if present), then Email → Password → Remember me → Continue → (passkey/OAuth) → Forgot password?
  2. Blueprint nested tab — open /cp/fields/blueprints/collections/{handle}/{blueprint}/edit with 2+ tabs, select a tab so the chevron shows
    document.querySelectorAll('[role="tab"] button').length → 0
  3. Blueprint tablist tabindex — same page after load
    document.querySelectorAll('.blueprint-tab[tabindex]').length → 0
  4. Overflow outside tablist — narrow until the ⋯ menu appears
    document.querySelector('[role="tablist"]')?.contains(document.querySelector('[aria-label="Open dropdown menu"]')) → false

Remove positive login tabindexes so focus follows DOM order. Keep
blueprint tab actions and overflow menus outside TabTrigger/TabList,
and disable Draggable Focusable so sortable wrappers do not get
tabindex inside the tablist.
…the tab order, because it's more likely people will want to tab to Passkey or other login options
@jaygeorge jaygeorge changed the title Fix/15401 nested interactive controls [6.x] Fix/15401 nested interactive controls Oct 5, 2026

This branch has not been deployed

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Interactive controls nested inside other interactive controls in login and blueprint tabs

1 participant