This content originally appeared on Zell Liew and was authored by Zell Liew
If you create JavaScript widgets, one of the key parts to accessibility is managing focus.
To manage focus, you need to find keyboard-focusable elements.
When you know the contents
It’s easy to find keyboard-focusable elements if you know the contents of the element beforehand.
For example, I know the focusable elements in this modal are <input> and <button>.
I can get the focusable elements with querySelectorAll.
const focusableElements = [...modal.querySelectorAll('input, button')]
When you don’t know the contents
It’s harder to find keyboard-focusable elements if you don’t know the content beforehand.
After some research, I realised you could only focus on these elements with a keyboard:
<a><button><input><textarea><select><details>- Elements with
tabindexset to0 - Elements with
tabindexset to a positive number
We can get all keyboard-focusable elements with the following querySelectorAll. It looks a little complicated, but there’s no other way to include everything:
const keyboardfocusableElements = document.querySelectorAll(
'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
)
Some elements (like button) can be disabled. Disabled elements are not focusable. We can remove these elements with filter.
const keyboardfocusableElements = [...document.querySelectorAll(
'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
)]
.filter(el => !el.hasAttribute('disabled'))
Turning it into a function
This querySelectorAll code is hard to read. We can put the entire thing into a function to make it more understandable.
/**
* Gets keyboard-focusable elements within a specified element
* @param {HTMLElement} [element=document] element
* @returns {Array}
*/
function getKeyboardFocusableElements (element = document) {
return [...element.querySelectorAll(
'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
)]
.filter(el => !el.hasAttribute('disabled'))
}
This content originally appeared on Zell Liew and was authored by Zell Liew
Zell Liew | Sciencx (2020-01-29T00:00:00+00:00) Getting keyboard-focusable elements. Retrieved from https://www.scien.cx/2020/01/29/getting-keyboard-focusable-elements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.