Skip to content

Latest commit

 

History

History
53 lines (41 loc) · 2.37 KB

README.md

File metadata and controls

53 lines (41 loc) · 2.37 KB

Focusgroup Examples

Interactive examples inspired by the Open UI explainer for Focusgroup: https://open-ui.org/components/scoped-focusgroup.explainer/

Browser Requirements

To use the browser's focusgroup implementation, please ensure you are on a Chromium-based browser (version 144+) and have the following flag enabled: chrome://flags/#enable-experimental-web-platform-features

Source Code

For the best context when viewing these examples, please refer to the source file to see the implementation details.

Contents

  • index.html — examples and explanations
  • styles.css — minimal styling
  • scripts.js — no polyfill; only a small feature-detection console note

Shared classes

  • menubar, list-reset: layout for menubar lists
  • popover-menu: layout for popover menus
  • visual-reorder: flex row-reverse helper for reading-flow demos

Run locally (Windows)

Open index.html in your browser, or start a simple local server:

# From the c:\focusgroup_examples folder
# Using PowerShell's Start-Process to open default browser
Start-Process .\index.html

# Optional: serve with Python if installed
python -m http.server 8080
# then open http://localhost:8080/index.html

Keyboard behavior (native)

  • Linear focus: Arrow keys move within the group; Tab exits.
  • Axis limits: inline (Left/Right) or block (Up/Down).
  • Wrapping: wrap wraps from ends.
  • Memory: remembers last focused item unless no-memory is set.
  • Entry: focusgroup-entry-priority chooses initial focus when memory doesn’t apply.
  • Opt-out: focusgroup="none" creates sequential navigation segments; arrows skip.
  • Reading-flow: when supported, arrow keys follow visual order.
  • Shadow DOM: focusgroup can traverse into shadow trees from a host.
  • Descendants: non-focusable wrappers are ignored; focusable descendants participate.
  • Backward nav: Shift+Tab enters the previous segment; memory applies per segment.

Notes

  • These examples rely on the native focusgroup attribute. Support may be behind a browser flag.
  • Try enabling “Experimental Web Platform features” (e.g., Chrome/Edge) if needed.
  • Add ARIA roles where appropriate for semantics (e.g., role="tab", role="menuitem").
  • Popover demos use the HTML Popover API (popover, popovertarget, autofocus). Ensure your browser supports it.