I have a dialog box that displays text information about the function of three buttons. There are no input fields of any kind. The goal is to allow the user to use the tab key to "focus through" the buttons and when the tab key is used on the last button in the series, focus should be placed back onto the first button. Each of the three buttons has a unique tab index (1,2,3).
Per user request, when the dialog box is presented, focus must be placed onto the first button (id=ConfirmNext). This is attempted by JavaScript for the dialog box's onload event, shown below.
This code does not work. When the dialog box is displayed, instead of focus being placed onto the first button, focus is actually placed outside of the browser (Firefox) such that when the tab key is pressed the browser's tab comes into focus. If I press the tab key enough times, focus is eventually placed onto the first button in the dialog box. For the 3rd and last button, JavaScript is attached to its onblur event (below) in an attempt to refocus back onto the first button (id=ConfirmNext).
Code: Select all
var ctrlKey = event.ctrlKey;
var key = event.key;
var shiftKey = event.shiftKey;
//console.log("ctrlKey=" + ctrlKey + " shiftKey=" + shiftKey + " key="+key);
//When tabbing out of Cancel Btn put focus on ConfirmNext
if (!ctrlKey && !shiftKey && key=="Tab"){
getObj("ConfirmNext").focus();
preventEvent() ;
}
This does not work either. Instead of focus being placed onto the first button, focus is instead placed back into the browser. Again, if I press the tab key enough times, focus is eventually placed onto the first button.
Experimenting, I placed a textbox into the dialog box before the group of buttons and used JS to apply focus onto it. When the dialog box was displayed focus was on the textbox as expected. But, when the tab key is pressed while on the last button, focus is again placed onto the browser's tab.
Thanks in advance for your help.