Modal Window

4 posts, 0 answers
  1. Ori
    Ori avatar
    23 posts
    Member since:
    Feb 2015

    Posted 19 Dec 2016 Link to this post

    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?

  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    208 posts

    Posted 21 Dec 2016 Link to this post

    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.
  3. Ori
    Ori avatar
    23 posts
    Member since:
    Feb 2015

    Posted 02 Jan 2017 Link to this post

    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.

  4. Ianko
    Admin
    Ianko avatar
    1938 posts

    Posted 04 Jan 2017 Link to this post

    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.
Back to Top