Tabindex

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

Note

Prysm doesn’t have the HTMLElement.tabIndex property. Use Element.hasAttribute("tabindex") instead if there is a need for it.

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.