Skip to content

Add top-layer element exclusion to focusgroup#1

Open
janewman wants to merge 2 commits into
focusgroupfrom
user/janewman/focusgroup-top-layer
Open

Add top-layer element exclusion to focusgroup#1
janewman wants to merge 2 commits into
focusgroupfrom
user/janewman/focusgroup-top-layer

Conversation

@janewman
Copy link
Copy Markdown
Owner

Summary

When an element enters the document's top layer (e.g., a popover shown via showPopover(), a modal <dialog>, or a fullscreen element), it and its shadow-including descendants are excluded from any ancestor focusgroup scope. This ensures arrow-key navigation in the ancestor focusgroup does not jump to content rendered in a separate layer.

Changes

Modified definitions

  • Focusgroup scope (~line 87006): Excludes elements in the top layer and shadow-including descendants of top-layer elements that are themselves descendants of the focusgroup owner. Qualified so the owner's own focusgroup is unaffected when the owner itself is in the top layer.
  • Focusgroup segment (~line 87021): Top-layer subtrees create segment boundaries for sequential focus navigation.
  • Entry element algorithm (~line 87328): Last-focused-item is ineligible while it or a shadow-including ancestor is in the top layer; the algorithm proceeds to focusgroupstart or the first sequentially focusable item.
  • Clearing conditions (~line 87370): Exception preserves last-focused-item when scope exit is solely due to top-layer membership (item becomes temporarily ineligible, not cleared).

New section

  • Top layer interaction (h5, after Concepts): Normative prose describing the exclusion behavior, re-entry semantics, last-focused-item preservation, and the fact that the element's own focusgroup continues to operate normally. Includes author guidance note and two examples (toolbar with plain popover, toolbar with popover having its own focusgroup="radiogroup").

Corresponding explainer change

Open UI focusgroup_popover branch — adds "Top layer elements" subsection under Opting-out.

Review notes

  • Build passes (./build.sh --fast)
  • All cross-references verified (top layer dfn at line 4007, dom-showPopover, etc.)
  • aria-expanded added to example trigger buttons
  • 100-char line width, 1-space indent, no tabs/trailing whitespace

janewman and others added 2 commits April 23, 2026 21:48
When an element enters the document's top layer (e.g., a popover shown
via showPopover(), a modal dialog, or a fullscreen element), exclude it
and its shadow-including descendants from any ancestor focusgroup scope.

Changes:
- focusgroup scope: exclude top-layer elements and their shadow-including
  descendants (qualified so the owner's own focusgroup is unaffected)
- focusgroup segment: top-layer subtrees create segment boundaries
- entry element algorithm: last-focused-item is ineligible while its
  subtree is in the top layer
- clearing conditions: exception preserves last-focused-item when scope
  exit is solely due to top-layer membership
- new "Top layer interaction" section with normative prose and examples

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Align the top-layer segment boundary clause with the focusgroup="none"
clause by requiring the top-layer element to be sequentially focusable.
This matches the Chromium implementation, which only creates segment
boundaries for excluded subtrees containing focusable content.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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.

1 participant