kit-focus-manager

README

Control focus like a boss.

Scope

  • dialogs/popups/modals
  • complex forms and components

API

[class] KitFocusManagerRegistryService

@Injectable

Provided in:'root'

Members

SignatureDescription
stack: KitFocusManagerService[] = []
capture(manager: KitFocusManagerService)
release(manager: KitFocusManagerService)

[class] KitFocusManagerModule

@NgModule

Exports:[ KitFocusDirective, KitFocusTrapDirective, ]

[class] KitFocusManagerService

@Injectable

Usage

Provide KitFocusManagerService on component.

Focus element

Add directive and set id to an element.

<input kitFocus="start">

Focus element by id

this.focusManager.focusItem('start');

Focus trap

Great tool for improve accessibility of components. Keep focus inside component that provide KitFocusManagerService.

Inject and init service with autoCapture.

providers: [KitFocusManagerService],
...
constructor(private focusManager: KitFocusManagerService) {
  this.focusManager.autoCapture = true;
  this.focusManager.init();
}

Example

Members

SignatureDescription
autoCapture = false

Automatically capture focus after creating.

onHold = false
capture()

Activate focus-trap.

focusFirst()

Focus first focusable element.

focusItem(id: string | number)

Focus item dy id.

focusLast()

Focus last focusable element.

focusNext()

Focus next focusable element (from current focused).

focusPrev()

Focus prev focusable element (from currect focused).

init()

Required method for start service.

add(item: KitFocusDirective)

Register item for manual focus.

release()

Disable focus-trap.

remove(item: KitFocusDirective)

Remove item.

[class] KitFocusTrapDirective

@Directive

Selector:'[kitFocusTrap]'

[class] KitFocusDirective

@Directive

Selector:'[kitFocus]'
Export as:'kitFocus'

Directive that registered in KitFocusManagerService and can be focused from outside.

Usage

<modal kitFocusTrap></modal>

Members

SignatureDescription
@Input() kitFocus: string | number

Element id.

focus()