Re: Keyboard navigation of modal DialogBox escaping the dialog

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.

On Thursday, May 2, 2019 at 1:26:36 AM UTC-7, t.b...@gmail.com wrote:

On Wednesday, May 1, 2019 at 8:39:37 PM UTC+2, ga...@rstudio.com wrote:

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.

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.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.