Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
@elemental/ui / Class

LmnKeyboardNavigationService

Decorators:@Injectable
Implements:OnDestroy

Service to manage the keyboard navigation detection.

It automatically toggles the accessibility classes to manage the keyboard navigation layout when the user interact with the page using the keyboard or the mouse.

Is also possible to force the activation/deactivation of the keyboard navigation state manually.

Properties

NameTypeDescription
#keyEventFn
() => void
  • listener functions **
#unlistenKeydown
(() => void) | undefined
  • unlisten functions **
changes$
r
Observable<boolean>

Observable that emits the keyboard navigation state. It emits true when the keyboard navigation is active, false otherwise.

Example usage
import { LmnKeyboardNavigationService } from '@elemental/ui';

private _keyboardNavigationService: LmnKeyboardNavigationService = inject(LmnKeyboardNavigationService);

ngOnInit(): void {
 this._keyboardNavigationService.changes$.subscribe((isKeyboardNavigationActive: boolean) => {
   console.log('Keyboard navigation is active:', isKeyboardNavigationActive);
 });
}
keyboardNavigationActive
r
Signal<boolean | undefined>

Signal that emits the keyboard navigation state. It emits true when the keyboard navigation is active, false otherwise.

Example usage
import { LmnKeyboardNavigationService } from '@elemental/ui';

private _keyboardNavigationService: LmnKeyboardNavigationService = inject(LmnKeyboardNavigationService);

protected keyboardNavigationActive = this._keyboardNavigationService.keyboardNavigationActive;
<h3 class="lmn-typography-heading-3">
  You are currently navigating this page with the <strong class="lmn-color-typography-accent">{{ keyboardNavigationActive() ? 'KEYBOARD' : 'MOUSE' }}</strong>.
</h3>

Accessors

get isKeyboardNavigationActive

Return the keyboard navigation state.

Presentation
get isKeyboardNavigationActive(): boolean;
Type

boolean

Methods

activateKeyboardNavigation()

Activate the keyboard navigation state. Add the accessibility classes needed to manage the keyboard navigation layout.

Presentation
activateKeyboardNavigation(): void;
Returns
void
Example usage
import { LmnKeyboardNavigationService } from '@elemental/ui';

private _keyboardNavigationService: LmnKeyboardNavigationService = inject(LmnKeyboardNavigationService);

ngOnInit(): void {
 this._keyboardNavigationService.activateKeyboardNavigation();
}

deactivateKeyboardNavigation()

Deactivate the keyboard navigation state. Remove the accessibility classes needed to manage the keyboard navigation layout.

Presentation
deactivateKeyboardNavigation(): void;
Returns
void
Example usage
import { LmnKeyboardNavigationService } from '@elemental/ui';

private _keyboardNavigationService: LmnKeyboardNavigationService = inject(LmnKeyboardNavigationService);

ngOnInit(): void {
 this._keyboardNavigationService.deactivateKeyboardNavigation();
}