I am trying to meet WCAG guidelines for keyboard navigation for a web 2.0 app I’m building in Xojo 2026 1.2. I know that the Weblistbox doesn’t natively accept a keyboard focus as a tab stop, but I am able to use a button to set the focus on the listbox so that the arrow keys can move through the rows.
My question is: is there a way to exit the listbox once you are in it? It seems to be a keyboard trap. If I hit Tab, nothing seems to happen. If I hit Shift+Tab a bunch of times, it will sometimes backup to the previous tab stop and sometimes not.
Am I doing something wrong or is there an easy workaround to make keyboard navigation with a weblistbox functional for users with disabilities that cannot use a mouse?
The WebListbox is a div Element, which does not take focus by default, and does not get keydown events.
One way to work around this is to use JavaScript to assign a TabIndex to the div element(s) and then also add keydown events. Using the JavaScript to assign the TabIndex seems to work better than assigning a TabIndex in the IDE.
I made a simple Web App, with one WebPage with two WebListBoxes (Lbx1 and Lbx2). I then added the code below to the Shown Event Handler for the WebPage.
Dim el1 As String
Dim el2 As String
Dim MyJS as String
el1 = Me.Lbx1.ControlID
el2 = Me.Lbx2.ControlID
MyJS = “”
MyJS = MyJS + “var e1 = document.getElementById('” + el1 + “');”
MyJS = MyJS + “var e2 = document.getElementById('” + el2 + “');”
MyJS = MyJS + “e1.tabIndex = 0;”
MyJS = MyJS + “e2.tabIndex = 1;”
MyJS = MyJS + “e1.addEventListener(‘keydown’, function(event) {”
MyJS = MyJS + “if (event.key === ‘Tab’) {”
MyJS = MyJS + “event.preventDefault();”
MyJS = MyJS + “e2.focus();}});”
MyJS = MyJS + “e2.addEventListener(‘keydown’, function(event) {”
MyJS = MyJS + “if (event.key === ‘Tab’) {”
MyJS = MyJS + “event.preventDefault();”
MyJS = MyJS + “e1.focus();}});”
MyJS = MyJS + “e1.focus();”
Me.ExecuteJavaScript(myJS)
This now allows me to Tab from the Lbx1 to Lbx2 and back. This may give you some ideas on how to implement this for your code. I am open to all suggestions on how this can be improved.
2 Likes
Thank you. I read that web apps don’t want a lot of methods ‘listening’ for keyboard entries. Do you know if it is a severe tax on the server if you have a lot of users with windows open that are listening for keyboard clicks?
Good question. In this case, the ‘listening’ is done on the client side, so no worries. The server sends the JavaScript down on the Shown event, and the Browser adds the events on that side. Then the Browser will be checking the keydown, without the need to send each key to the Web App.
We have found that the Xojo Web App environment does not always make it clear what is happening on the Client side vs. the Server side. One other way to implement something like this is with the Xojo Web SDK, but that is definitely more involved. If you get more heavily into Web App Development, it would be worth a look, and there are some good resources available.
Arthur,
Was there anything else that you did to get your test app to enable listening for the javascript? When I go through those steps, I still can’t get the Tab key to change focus. I’m working on a Mac and have tried testing it in Chrome and Safari and just can’t seem to get anything to happen.
Hi Peter,
I did not do anything extra. I will try to deploy a sample web app with the logic and confirm that it works with Safari. If it works, I’ll post a zip file to the forum. Will try to get something posted in the next day or two.
Thanks so much for your help!
Hi Peter,
I tested this Xojo Project by hosting it on a test server and accessing it via a third party testing tool that offers Mac Virtual machines. Safari was sometimes having an issue, but Chrome was working. This project builds for Linux and runs on port 9000. Please adjust as needed for your environment. This was zipped up on a Windows system.
Hopefully this helps!
Update: Once the WebListbox gets focus and its value gets updated, then the Tab stops working. I can try to revisit this and come up with a better solution.
WebListBox-Tester.zip (8.7 KB)
Hi Peter,
I have attached an updated Xojo project.
This one takes a slightly different approach and seems to work consistently. It wraps the calls to set the focus to the new controls in a requestAnimationFrame method. It also assigns the JavaScript event listeners for the keydown events to the Xojo WebListbox (inner) tables. Finally it also uses some console.log calls for assisting with debugging in Web Developer tools in Chrome, Safari, etc.
WebListBox2-Tester.zip (8.8 KB)