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 lock directive

This directive locks some area (div, span...). The first and last focusable child of the directive element are connected together (the next focus target of the last child is the first child and vice versa), useful for accessible modals.


Example shows the box, that you can not leave with the keyboard when you have focused some element. Focus the first element and navigate using the keyboard (TAB and SHIFT + TAB).


Code


  <div id="lock-1" class="box focus-selector-parent" fuLock>
    <input type="text" placeholder="Input 1" class="input" id="input-1">
    <input type="text" placeholder="Input 2" class="input" id="input-2">
    <input type="text" placeholder="Input 3" class="input" id="input-3">
  </div>