Primitives / foldkit-primitives/interaction

FocusVisible

namespace · packages/primitives/src/interaction/focus-visible.ts:8

export * as FocusVisible from './focus-visible.js'

FocusVisible as a Behavior over a placed InputModality: the target gets data-focus-visible while the page is being driven by keyboard, so a stylesheet can show a ring with [data-focus-visible]:focus and hide it for pointer users. CSS :focus-visible does this without any of it; this is for a design system that must decide in the Model.

In the guides

Members

FocusVisible.behavior

function · packages/primitives/src/interaction/focus-visible.ts:20

function behavior<Field extends string>(
  declared: Declared<typeof InputModality, Field>,
): <Slots>(
  slots: Slots,
) => <
  Input extends { readonly [K in Field]: InputModalityModel },
  ParentMessage,
>(
  options: BehaviorOptions<Slots>,
) => Behavior.NamedBehavior<Slots, Input, ParentMessage>

FocusVisible.BehaviorOptions

interface · packages/primitives/src/interaction/focus-visible.ts:16

interface BehaviorOptions<Slots> {
  readonly target: keyof Slots & string
}

FocusVisible.bundle

const · packages/primitives/src/events/input-modality.ts:44

const bundle: Bundle.Bundle<
  'InputModality',
  void,
  { readonly modality: 'keyboard' | 'pointer' | 'unknown' },
  {
    readonly _tag: 'Changed'
    readonly modality: 'keyboard' | 'pointer' | 'unknown'
  },
  never,
  never,
  never,
  void,
  {},
  {}
>

Input modality as a bundle: whether the user last drove the page by keyboard or by pointer. The browser reports the facts; the Model keeps the answer, so a view can show a focus ring only for keyboard users without reading the DOM, and a replay sees the same answer. CSS :focus-visible is the floor; this is for JavaScript that must know.

FocusVisible.Modality

const · packages/primitives/src/events/input-modality.ts:6

const Modality: Schema.Literals<readonly ['keyboard', 'pointer', 'unknown']>

FocusVisible.modalityOfKey

function · packages/primitives/src/events/input-modality.ts:18

function modalityOfKey(key: string): Modality | null

A modifier alone says nothing about how the page is being driven.

FocusVisible.Model

const · packages/primitives/src/events/input-modality.ts:9

const Model: Schema.Struct<{
  readonly modality: Schema.Literals<
    readonly ['keyboard', 'pointer', 'unknown']
  >
}>