Last Updated: 07 Nov 2023 12:10 by ADMIN
Scheduled for 5.0.0 (15 Nov 2023) (R1 PI1)
Created on: 05 Dec 2022 14:00
Category: Dialog
Type: Bug Report
[Accessibility] Dialog cannot trap its focus when the other inputs on the page have their TabIndex parameters set
When the customer tabs, the focus is going to the next element on the page behind/under the Dialog. That can happen only if the input behind the Dialog has its TabIndex set.
1 comment
Posted on: 07 Nov 2023 12:04


Thank you for your report and information on the focus path. 

By design, the implementation that comes from the Dialog component aims to trap the focus only when the tab sequence has not been interrupted by an element that has tabindex > 0. Therefore, it depends on the normal flow of the focus. If it were to completely discard the focus path, this would mean that on each Tab keystroke, we should traverse the whole HTML dom tree and decide which element should receive focus. This is error-prone and might lead to unexpected tab focus flow of the page. 

Having elements with tabindex > 0 is generally a corner case and solves a very specific task (usually business-specific). Such scenarios require tailor-made solutions on Tab key trap. 

What I recommend is that you handle the VisibleChanged event and attach a custom keydown handler of yours. This should happen by invoking a JavaScript function that uses the addEventListener() method to attach the event to the dialog's element. More specifically, when attaching the event through addEventListener(), you should specify the useCapture property. This ensures that your custom keydown event will be invoked before the default event that comes from the Dialog. Use stopImmediatePropagation() if you want to stop the default event handler from being triggered. 

An alternative is to track when the dialog is visible and ensure that the elements on the page have their tabindex attributes set to either 0 or -1 so that they do not interfere with the tab flow of the elements inside the dialog. 

Best regards,
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!