Browse documentation

UI / Foundations / Reference

Focusable: an explicit keyboard entry point

Reference deliberate tab stops: zero versus minus one, and the element that actually receives focus.

Focusable makes its host a keyboard entry point. tabIndex: 0 enters normal tab order; -1 permits programmatic focus without adding a stop. It does not install an interaction pattern.

import * as Focusable from "@typed/ui/Focusable";

export const ReportRegion = Focusable.Focusable({
  tabIndex: 0,
  role: "region",
  props: { "aria-label": "Report preview" },
  content: "Report",
});

Put the props on the element that receives focus. For roving keyboard movement, use Composite. Focusable API.