Cycling TAB presses

JavaScript
1

Lots of traffic to quantify how to TAB from first “tabindex” to the last, and vice-versa.

Those few that do work demand, e.g., to add artificial parent/grandparent div’s whose
.on("focus"
event traps the TAB keyup and cycles for you.

These few do work, however, it feels “kludgy” to add stuff to the .html file beyond, in my case, the li’s where keyindex goes.

(1) I have added keyindex to all li’s I want TAB to focus.

(2) Here’s my keyup Event Loop:

	$(document).ready(function() {
		$(document).keyup(function (evt) {
			var code = evt.keyCode || evt.which;
			if (code == 9) {
				focusNextLI();   // see below
				// other stuff to do
				evt.stopPropagation();
			}
		});
	});

(3) I then have this function to “try” to handle the cycling:

function focusNextLI() {
	var $currFocusItem = $(document.activeElement), $nextFocusItem;
		
	const $whichLI = $("li").find($currFocusItem);
	
	if (!$whichLI) {		
		$nextFocusItem = $("#first");
		$nextFocusItem.focus();
	}		
}

I have saved the really, really weird stuff to last …

Every thing works, until I press TAB after I have focused on the #last item.

If I choose to click on the body, TABbing back to #first works.

If I don’t do that, an additional TAB tabs to the Browser stuff.

Maybe I will have to use the above parent/grandparent stuff, but I would like to avoid doing so if at all possible.

2

For accessibility reasons they refuse to issue the keyup event when tabbing it seems that tabbing from the last item in the list.

A handy technique to get around that is to set up a fake tabbing guard at the end, so that you can refocus from there.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.