Tracks keyboard-initiated focus on the host element
CngxFocusVisible
DirectivePrimaryv0.1.0WCAG AA
projects/common/a11y/focus/focus-visible.directive.ts
Import#
import { CngxFocusVisible } from '@cngx/common/a11y'
Description#
Tracks keyboard-initiated focus on the host element.
Adds cngx-focus-visible CSS class when the element receives focus via keyboard
and removes it on blur or when focus was initiated by pointer interaction.
<button cngxFocusVisible #fv="cngxFocusVisible">
@if (fv.focusVisible()) { Focus ring visible }
</button>Metadata#
Host#
Index#
Instance Properties#
focusVisible#
unknownReadonly
true when focus was initiated via keyboard (not pointer).
this.focusVisibleState.asReadonly()HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-focus-visible] | focusVisible() |
HostListeners#
| Event | Handler |
|---|---|
(pointerdown) | pointerdown() |
(focusin) | focusin() |
(focusout) | focusout() |