KeyboardNavigation

Read as Markdown

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

KeyboardNavigation uses KeyboardNavigationProps and wraps recursive PibblNode children. Place it inside FocusManagement to opt into deterministic arrow-key movement among logical focus targets. It does not create native DOM controls or infer an accessibility tree.

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

See the Directional navigation live example.

API details from source

Adds one directional-navigation boundary without adding identity.

KeyboardNavigation: PibblComponent<KeyboardNavigationProps>

Related API: KeyboardNavigation, PibblComponent, KeyboardNavigationProps.

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

KeyboardNavigationProps

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

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.