This is a migrated thread and some comments may be shown as answers.

Modal Window

3 Answers 417 Views
Window
This is a migrated thread and some comments may be shown as answers.
Ori
Top achievements
Rank 1
Ori asked on 19 Dec 2016, 01:59 PM

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?

3 Answers, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 21 Dec 2016, 07:30 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ori
Top achievements
Rank 1
answered on 02 Jan 2017, 09:16 AM

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.

0
Ianko
Telerik team
answered on 04 Jan 2017, 07:30 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Window
Asked by
Ori
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Ori
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or