Prysm has focus and blur functionality for elements with tabindex and the polyfill extends that with sequential focusing.

Easily set the focusing order for elements on the page by adding a tabindex attribute to them and navigating with Tab or Shift + Tab. A page can only have one focused (active) element at a time which helps to perform certain UI operations according to the focused element.

More about the attribute - tabindex

How To Use

Include the provided polyfill script in any page that needs to have focusable elements, then set tabindex to the elements.

<script type="text/javascript" src="coherent-tabindex-polyfill.js"></script>
<div class="element" tabindex="2">Element with tabindex 2. Second one to be focused.</div>
<div class="element" tabindex="1">Element with tabindex 1. Will be focused first.</div>
<div class="element" tabindex="0">Element with tabindex 0. The last one to be focused.</div>

The polyfill script is located at package\Samples\uiresources\Tabindex\coherent-tabindex-polyfill.js.

Supported Features

  • Sequential focusing using Tab key.
  • Dynamically added elements are sequentially focusable.
  • Default focusable elements - input, textarea, button, a tags.
  • Elements with negative tabindex values aren’t sequentially focusable.
  • Changing the tabindex value on elements dynamically updates the navigation order.
  • The polyfill will not focus elements if the elements or their parents have visibility: hidden;, display: none or their opacity is 0.

Usage Limitations

  • The max value for the tabindex attribute isn’t limited to 32767.
  • Avoid using non-integer values which will cause elements to not be sequentially focusable.
  • Elements with specified overflow(x/y) automatically receive a permanent tabindex="0" only on polyfill initialization. If they already have a set tabindex value - the value is unchanged.
  • Do not set a negative tabindex value to the body if there is an intention to have all elements on the page hidden or leave no other focusable elements on the page.
  • No click focusing + sequential focusing support. Although click focusing works, the combination with sequential focusing might produce the expected effect.
  • Elements added to the page with Element.innerHTML is not supported.