Targeting focusable links with vanilla JavaScript
A few weeks ago I shared a trick for getting the first and last focusable element in the DOM.
var focusable = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
var firstFocusable = focusable[0];
var lastFocusable = focusable[focusable.length - 1];
Reader Csaba Varszegi asked (shared with permission):
A small question: what is the reason that you are using
[href]
instead ofa
? Because if an anchor has nohref
, it is not focusable? Or because you want other elements with anhref
(valid?) to be selected? Or both?
Great question!
Simply put, links are only focusable if they have an href
. Otherwise, tabbing through the DOM just skips right over them.