Tree Focus Group Test

This demonstrates a tree-like structure using nested <details> elements with focus groups. Each details contains a focus group for vertical arrow navigation within its content.

Debug Info

Input before tree (Tab test):

File System Tree

📁 Projects

📁 src

📁 components

📄 Button.jsx

📄 Modal.jsx

📁 utils

📄 helpers.js

📄 config.js

📄 README.md

📄 package.json

� .gitignore

Input after tree (Tab test):

Expected Focus Group Behavior

Tab Navigation: Should skip over focus groups entirely - from "Input before tree" directly to "Input after tree"
Arrow Up/Down: Navigates within the current focus group (vertical)
Future Implementation: Arrow Left/Right to collapse/expand or move between sibling groups

Tab Navigation Test

Click on "Input before tree" field above
Press Tab - should jump directly to "Input after tree" (skipping all focus groups)
Press Shift+Tab - should jump back to "Input before tree"
To enter a focus group: click on any file/folder item, then use arrows

Focus Group Configuration

Each details element would be initialized as:

initFocusGroup(element, {
  direction: "vertical",  // Only up/down arrows
  loop: false,           // Stay at boundaries
  skipTab: true          // Tab exits the group
});