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

This directive allows merging focusable elements into the group. The user focuses the whole group and can enter into this group by Enter press and leave the group by Escape press.


Example shows the box with the group of buttons (buttons are not accessible, only when the user enters the group). Focus the first div and enter group ENTER then leave the group ESCAPE or navigate TAB and SHIFT + TAB).

Group

Code


  <div tabindex="0" id="group-1" class="box focus-selector-parent" [fuGroup]="{selector: '.focus-group-item'}">
    <div class="subtitle has-text-black">Group</div>
    <input type="text" tabindex="-1" placeholder="Input 1" class="input focus-group-item" id="input-1">
    <input type="text" tabindex="-1" placeholder="Input 2" class="input focus-group-item" id="input-2">
  </div>