Roving Tab Index

Roving tab index (RTI) manages keyboard focus across groups of interactive elements.

Directives

DaffRovingTabIndexDirective

import { DaffRovingTabIndexDirective } from '@daffodil/design'

Declares that an element is an RTI target. Automatically applied to <a> and <button> elements.

@Directive()
class DaffRovingTabIndexDirective {
  readonly group: Signal<string> = computed(() => this.rti() || this.parent?.effectiveBoundary() || '')

  readonly rti: InputSignal<string> = ''
}

Inputs

rti

InputSignal<string>

Default	`''`
Description	Allows the RTI group to be overriden. By default it will be the nearest ancestor or the default root group if no boundary ancestor exists.

Properties

group

Signal<string>

Default	`computed(() => this.rti() \|\| this.parent?.effectiveBoundary() \|\| '')`
Description	The group in which this RTI target resides. See `DaffRovingTabIndexBoundaryDirective` to make an element act as the boundary of an RTI group.

DaffRovingTabIndexBoundaryDirective

import { DaffRovingTabIndexBoundaryDirective } from '@daffodil/design'

Defines the boundary of an RTI group.

@Directive()
class DaffRovingTabIndexBoundaryDirective implements DaffRovingTabIndexBoundary {
  readonly effectiveBoundary: Signal<string> = computed(() => this.rtiBoundary() || this._uniqueId)

  readonly rtiBoundary: InputSignal<string> = null
}

Inputs

rtiBoundary

InputSignal<string>

Default	`null`
Description	The name of the group for which that this element will act as boundary. Optional, will be autogenerated to a unique name if omitted.

Properties

effectiveBoundary

Signal<string>

Default	`computed(() => this.rtiBoundary() \|\| this._uniqueId)`
Description	The name of the group defined by this boundary.

Tokens

DAFF_ROVING_TAB_INDEX_BOUNDARY

import { DAFF_ROVING_TAB_INDEX_BOUNDARY } from '@daffodil/design'

Allows RTI targets to inject their nearest ancestor boundary without creating a circular import with the boundary directive.

const DAFF_ROVING_TAB_INDEX_BOUNDARY: InjectionToken<DaffRovingTabIndexBoundary>

Types

DaffRovingTabIndexBoundary

import { DaffRovingTabIndexBoundary } from '@daffodil/design'

The public shape of an RTI boundary, exposed to descendant RTI targets.

interface DaffRovingTabIndexBoundary {
  readonly effectiveBoundary: Signal<string>
}

Properties

effectiveBoundary `Signal<string>`
The name of the group defined by this boundary.