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> = input<string>('')
}

Inputs

rti

InputSignal

Default	`input<string>('')`
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

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 {
  readonly effectiveBoundary: Signal<string> = computed(() => this.rtiBoundary() || this._uniqueId)

  readonly rtiBoundary: InputSignal<string> = input<string | null>(null)
}

Inputs

rtiBoundary

InputSignal

Default	`input<string \| null>(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

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