Adding tabindex dynamically - html

Question

I'd like to add tabindex to all form elements. The form is dynamic and I can't add it to the HTML. I would like to run it as a function.
If there are several radio buttons with the same name, each must have it's own tabindex value. Most of the form elements on page start as <input>, except <select>. How do I account for that?
I guess I will need to run a loop and add the attribute, right?
var n = 1;
$('input, select').each(function() {
$(this).attr('tabindex', n++);
});

Answer 1

Strange question, but yes that's the basic idea:
$(":input:not(:hidden)").each(function (i) { $(this).attr('tabindex', i + 1); });
This uses :input to get everything including buttons and text areas. :not(:hidden) will just exclude the hidden inputs to avoid unnecessary tabs.

Answer 2

Might be better to avoid n++ to set different tabindex numbers.
Instead, try setting tabindex to 0:
$(':input:visible').each(function() {
$(this).attr('tabindex', '0');
});
tabindex="0" means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order.
~ developer.mozilla.org
The :input selector basically selects all form controls.
The :visible selector basically selects all elements that are visible.
or as suggested in the comments, if you have no other changes to apply to each visible input, then this should be enough:
$(':input:visible').attr('tabindex', '0');

Answer 3

Here, I described how can add aria-selected and tabindex value dynamically via jquery. I also want to see that how accessibility work with tablist, tab, and tabpanel role and how aria attributes work.Hope helps this code :
var $tabs = $('.tabs');
var $panels = $('.panel');
$tabs.on('click', 'a', function (e) {
e.preventDefault();
var id = $(this).attr('href');
// Find the currently visible tab and panel and hide them
$tabs.find('[aria-selected="true"]').attr({
'aria-selected': false,
'tabindex': -1
});
$(this).attr({
'aria-selected': true,
'tabindex': 0
});
});
Tab Wrapper:-
<ul class="tabs" role="tablist">
<li role="presentation">Tab 1</li>
<li role="presentation">Tab 2</li>
<li role="presentation">Tab 3</li>
</ul>
<div class="tab-panels">
<div class="panel" id="tab-1" role="tabpanel" aria-hidden="false">…</div>
<div class="panel" id="tab-2" role="tabpanel" aria-hidden="true">…</div>
<div class="panel" id="tab-3" role="tabpanel" aria-hidden="true">…</div>
</div>

Answer 4

One approach is to move an element higher in the DOM. The element at the top of the DOM tree will be focused first using Tabs as compared to lower ones.

Answer 5

For what's it's worth, I don't think you actually need to use an each loop here or even $(this).
jQuery is configured to execute functional arguments in place of plain values and runs the function once per loop, similarly to how an each loop would work.
You can read more on how that works in the official jQuery documentation here: .val( function )
So rather than using an each loop, you can accomplish the same effect using just this:
let n = 1;
$(':input:visible').attr('tabindex', function() { return n++; });
or if you're okay using the modern ES6 arrow function syntax—
let n = 1;
$(':input:visible').attr('tabindex', () => n++);
Using () => n++ instead of just n++ here allows jQuery to run the function for each instance's value rather than taking in the initial value of n++ and applying it to all matching elements.