logo svelte /json view lite v0.2.0
FIG-001/ A11Y

aria treeview.

Inspect how the viewer exposes tree roles, expansion state, labelled controls, and keyboard-ready focus behavior.

  • Containers render as role="tree" / role="group" nodes with aria-expanded and aria-controls wiring each disclosure to its children.
  • Arrow keys walk the tree and Enter / Space toggle a node — the same keyboard model ships in the packaged component.
  • A roving tabindex keeps a single tab stop for the whole tree so focus never gets trapped inside deep nesting.
↩ all examples
role · treefocus · roving mode · live running source
{
    tree:{
      role:"tree",
      keyboard:[
        "ArrowUp",
        "ArrowDown",
        "ArrowLeft",
        "ArrowRight",
        "Enter",
        "Space"
      ],
      nodes:[
        {
          label:"request",
          expanded:true,
          controls:"request-panel",
          children:[
            "headers",
            "body",
            "metadata"
          ]
        },
        {
          label:"response",
          expanded:true,
          controls:"response-panel",
          children:[
            "status",
            "headers",
            "body"
          ]
        }
      ]
    },
    aria:{
      labelledBy:"json-tree-label",
      expandedState:"mirrors disclosure state",
      focus:"roving tabindex inside the viewer"
    }
}
category · a11y
sheet · sheet 01 / 01
⟳ to re-run

ARIA Treeview