CngxRovingItem

DirectivePrimaryv0.1.0WCAG AA

projects/common/a11y/roving/roving-tabindex.directive.ts

Import#

import { CngxRovingItem } from '@cngx/common/a11y'

Description#

Marker directive for items managed by CngxRovingTabindex.

Place on each focusable child inside a [cngxRovingTabindex] container. The roving tabindex controller sets tabindex="0" on the active item and tabindex="-1" on all others.

<div cngxRovingTabindex>
  <button cngxRovingItem>One</button>
  <button cngxRovingItem>Two</button>
  <button cngxRovingItem>Three</button>
</div>

https://cngxjs.github.io/cngx/examples/#/common/a11y/roving-tabindex/horizontal-toolbar https://cngxjs.github.io/cngx/examples/#/common/a11y/roving-tabindex/vertical-menu

Metadata#

Selector: [cngxRovingItem]
Export as: cngxRovingItem

Relationships

Used by4

componentCngxPaginatorAlphaAlphabetical / category chips: a `role="group"` toggle strip over the {@link CngxBucketPaginate} range model.

componentCngxPaginatorPagesThe numbered page row.

componentCngxRatingStar/heart rating value control for `cngx-form-field`.

componentCngxStepperStepper organism.

Index#

Methods

focus

Inputs

disabled

Inputs#

disabled#boolean

input()

Whether this item is disabled and should be skipped during navigation.

default false, { alias: 'cngxRovingItemDisabled' }

Methods#

focus#void

Programmatically focus this item. Called by the parent on arrow-key navigation.