Modal Window

[Ori]

Hello,

when setting "modal" option to "true", page is covered with overlay and window is shown as the top most element on the page, but there's no modal-like behaviour as of a11y - user still can "escape the modal" using keyboard navigation. As Kendo is dealing with aria attributes already, would not it be possible to add this behaviour too?

[Stamo Gochev]

Hello Ori,

You are correct that the keyboard navigation works even when a modal windows is shown. A brief explanation why this is so and how to implement your own behavior can be found at:

http://www.telerik.com/forums/tab-key-and-modal-windows

If you want to use a built-in functionality for that (instead of implementing a custom solution), you can check out our dialog widget:

https://demos.telerik.com/kendo-ui/dialog/predefined-dialogs

http://docs.telerik.com/kendo-ui/controls/layout/dialog/overview

http://docs.telerik.com/kendo-ui/api/javascript/ui/dialog

Regards,
Stamo Gochev
Telerik by Progress

[Ori]

Thank you, Stamo,

the Dialog widget looks very promising.

One more concern about Window widget - there's an issue when you TAB through focusable elements in dialog. After a window opens, content div (with role="dialog" attribute) gets focus, but it's actually not the whole window - label and toolbar buttons (close, minimize...) can be focused outside of the window and as they're there earlier in code, you need to shift-TAB to focus them which is certainly not good for a11y.

[Ianko]

Hello Ori,

This is the expected behavior of a dialog component. It is designed the content to be the focused element by default and in order for the toolbar buttons to be accessed shift+tab to be pressed. This is designed based on WAI-ARIA specifications, there are some guidelines on that here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role. 

If, however, you need to focus the first available button you can do that programmatically after the Kendo Window is opened. You can get the element's jQuery reference and call the focus method: https://api.jquery.com/focus/.  

Regards,
Ianko
Telerik by Progress