Ngx focus control

Library to provide tools to work with focus and focusable elements to improve user interfaces and accessibility.

npm versionCircleCICoverage StatusGitHub issuesnpm bundle sizeNPMdemostack blitzGitter
logo
Angular library to provide tools to work with focus and focusable elements to improve user interfaces and accessibility. 
npm install ngx-focus-control --save

Focus selector directive

This directive allows the user to manually define the next and previous focus target by the given query selector.


Example shows how to skip element between elements with given class (element is still accessible by mouse). Focus the first element and navigate using the keyboard (TAB and SHIFT + TAB).


Code


  <input placeholder="Input 1" class="input focus-selector-item" [fuSelector]="'.focus-selector-item'">
  <input placeholder="Input 2" class="input">
  <input placeholder="Input 3" class="input focus-selector-item" [fuSelector]="'.focus-selector-item'">