FocusManagement

Read as Markdown

import { FocusManagement, Rectangle } from "@pibbl/core";

FocusManagement uses FocusManagementProps and wraps one recursive PibblNode subtree. It installs the Canvas as the only native focus host and adds logical focus events, source-order Tab traversal, press focus, activation, and focus-visible modality. It does not generate semantic DOM or an accessibility tree.

<FocusManagement>
  <Rectangle style={{ width: 80, height: 32, fill: "#2563eb" }} />
</FocusManagement>

Try the Focus management live example.

API details from source

Adds one logical focus manager to exactly one child without adding identity.

FocusManagement: PibblComponent<FocusManagementProps>

Related API: FocusManagement, PibblComponent, FocusManagementProps.

Parameters

• props — Authored component inputs, supplied through JSX or createElement. See the linked props and style types.

Throws

When called directly; Pibbl mounts this component through JSX or createElement.

See also

FocusManagementProps

View source — packages/core/src/lib/focus/policy-components.ts:99

Implementation guidance for agents

Read the Input, focus, and native HTML companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

• Focus and arrow navigation: Two logical targets participate in Tab focus and directional keyboard navigation. Plain source

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.