Keyboard navigation of modal DialogBox escaping the dialog

[ga...@rstudio.com]

Existing application using Gwt 2.8.2, and I'm undertaking effort to make it accessible (keyboard, screen reader, and so forth). Always a challenge to retrofit accessibility when it wasn't considered from the start, but that's my lot in life (cue violins).

Problem of the day, modal DialogBoxes don't keep focus in the dialogs when using tab key. Several very old conversations on this, wondering if there's anything more current, or if it's still something I'll need to handle directly on a dialog-by-dialog basis. We have a lot of dialogs.

Specifically, keyboard tabbing off final control should wrap around to beginning of dialog, NOT to the browser itself or the glassed-out UI of the application. Shift+Tabbing back from the first control should go to the last. Fundamental accessibility requirement. For example, try any modal dialog in Google Docs.

Thanks!

[t.br...@gmail.com]

Modal popups in GWT have been broken for years (I asked that they be deprecated 8 YEARS ago: https://github.com/gwtproject/gwt/issues/6454), don't use them.

I you really want/need a modal dialog, I'd suggest using a <dialog> element with showModal(). The API is already available in Elemental: https://static.javadoc.io/com.google.elemental2/elemental2-dom/1.0.0-RC1/elemental2/dom/HTMLDialogElement.html#showModal--

And for browser compatibility (rather poor at the moment: https://caniuse.com/#feat=dialog), use the polyfill: https://github.com/GoogleChrome/dialog-polyfill (with GWT, you'd have to inject the script –e.g. using ScriptInjector– then use JsInterop to call the polyfill's registerDialog())

Alternatively, use a non-modal GWT dialog and implement the "modal" behavior "by hand": for tabbing, put hidden focusable elements at the "beginning" and "end" of the dialog, catch the focus event on those and then refocus to the appropriate element.

[ga...@rstudio.com]

Great info! Yes, we use DialogBox with modal=false, and setGlassEnabled; won't be able to convert our many dialogs over to using dialog element and Elemental for this product cycle (though maybe I'll sneak in a new dialog using those to infiltrate the code), but doing the hidden beginning/end elements is what I was thinking of doing, so thanks for confirming that's still the best I can do.