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
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.
The polyfill script is located at
- Sequential focusing using Tab key.
- Dynamically added elements are sequentially focusable.
- Default focusable elements -
- Elements with negative
tabindexvalues aren’t sequentially focusable.
- Changing the
tabindexvalue on elements dynamically updates the navigation order.
- The polyfill will not focus elements if the elements or their parents have
display: noneor their
- The max value for the
tabindexattribute 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
tabindexvalue - the value is unchanged.
- Do not set a negative
tabindexvalue to the
bodyif 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.