New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dialog doesn't prevent the execution of clickshortcuts behind it #7799
Comments
I don't think this is a bug.
There can be a discussion whether we should trigger actions for every component with a shortcut (then cases when some components has assigned shortcuts but not attached should be considered). So : this is not a bug but works by design. On the other hand the issue makes sense: this is intuitively expected that there is an "input context" which is only active at the moment.
It's a very long process and I would mark this issue as an enhancement. At the moment the issue is technically in the |
I agree with this, it is what we would need, but yes it would be an enhancement. The "fix" for this would be to document the current behavior in javadocs & documentation.
The WCAG 2.x doesn't have anything about a "modal dialog" so I understand it the same way - there is no strict requirement for preventing the interaction with the content outside it. So it would be up to the application developer to ensure that the everything works as expected. Also with after discussing about But so now to handle this situation:
|
Thanks for your additional feedback!
WCAG 2.x has no direct reference to dialog, but WAI-ARIA has:
Source: https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
Especially this sentence. |
I saw that via Google too but I discarded it as I though it was outdated information, because (I have to admit) I've misread your first comment here - I first read as "interacting should be possible" even though you clearly have written "interacting should be impossible". My bad. So based on that I agree - a true modal dialog should IMO out-of-the-box prevent background interaction such as keyboard shortcuts. I'll have to discuss again with the component developers / designers about this. |
We also reported this bug, with warranty priority, and they gave the same answer: "won't fix". Great premium support. |
@rolfsmeds here could be a11y added as well. |
@pleku I've looked at your branch and it looks really promising! One idea that I had while checking the code - a real life IT test: Scenario: "User navigates away from a form without saving. Modal dialog appears to confirm that he really wants to leave." Tests:
|
@knoobie thanks for the feedback. More complex tests are missing, but planned https://github.com/vaadin/flow/compare/fix/10172#diff-18b269c7881365739d04976845a325b99e67db49f573b5de3341ed1bf076eb79R6 and I'll add those too.
I've understood that anything inside the modal part should work - so if an application developer puts a router link there, it should work. For confirmation dialogs there probably are no router links used though, but there might be other cases (like access denied or access changed dialog giving alternative routes to go to). |
@pleku I personally would expect router link to work within the dialog but the following comment made me question myself :)
Because the second sentence said "not inert = navigation could be allowed by using something else than router links" |
This makes it possible for a component to specify a client side only element that should be used for listening keydown events on when the component is setup as the listenOn target for a Shortcut. This is needed for components like Vaadin Dialog which transport the dialog contents inside an overlay that only exists on the client side and thus breaks shortcut event handling. Related to #7799, vaadin/vaadin-dialog#229
Uses API provided by Flow to make keydown events passed from the overlay to the Dialog element when the dialog has been used for listening for shortcuts with .listenOn(dialog). Depends on vaadin/flow#10264 Fixes vaadin/flow#7799, vaadin/vaadin-dialog#229
Uses API provided by Flow to make keydown events passed from the overlay to the Dialog element when the dialog has been used for listening for shortcuts with .listenOn(dialog). Depends on vaadin/flow#10264 Fixes vaadin/flow#7799, vaadin/vaadin-dialog#229
This makes it possible for a component to specify a client side only element that should be used for listening keydown events on when the component is setup as the listenOn target for a Shortcut. This is needed for components like Vaadin Dialog which transport the dialog contents inside an overlay that only exists on the client side and thus breaks shortcut event handling. Related to #7799, vaadin/vaadin-dialog#229
This makes it possible for a component to specify a client side only element that should be used for listening keydown events on when the component is setup as the listenOn target for a Shortcut. This is needed for components like Vaadin Dialog which transport the dialog contents inside an overlay that only exists on the client side and thus breaks shortcut event handling. Related to #7799, vaadin/vaadin-dialog#229
This makes it possible for a component to specify a client side only element that should be used for listening keydown events on when the component is setup as the listenOn target for a Shortcut. This is needed for components like Vaadin Dialog which transport the dialog contents inside an overlay that only exists on the client side and thus breaks shortcut event handling. Related to #7799, vaadin/vaadin-dialog#229
The PRs are open (flow & component integrations) that would make this land to 14.5+ and 19+. The fix could be landed to 14.4, but with 14.5 around the corner (RC 17th, GA 24th of March) I won't do it unless explicitly asked to. |
@pleku I don't mind the 14.5 and 19.x release! Thanks for your work! |
This makes it possible for a component to specify a client side only element that should be used for listening keydown events on when the component is setup as the listenOn target for a Shortcut. This is needed for components like Vaadin Dialog which transport the dialog contents inside an overlay that only exists on the client side and thus breaks shortcut event handling. Related to #7799, vaadin/vaadin-dialog#229 Co-authored-by: Pekka Hyvönen <pekka@vaadin.com>
This makes it possible for a component to specify a client side only element that should be used for listening keydown events on when the component is setup as the listenOn target for a Shortcut. This is needed for components like Vaadin Dialog which transport the dialog contents inside an overlay that only exists on the client side and thus breaks shortcut event handling. Related to #7799, vaadin/vaadin-dialog#229
This makes it possible for a component to specify a client side only element that should be used for listening keydown events on when the component is setup as the listenOn target for a Shortcut. This is needed for components like Vaadin Dialog which transport the dialog contents inside an overlay that only exists on the client side and thus breaks shortcut event handling. Related to #7799, vaadin/vaadin-dialog#229
This makes it possible for a component to specify a client side only element that should be used for listening keydown events on when the component is setup as the listenOn target for a Shortcut. This is needed for components like Vaadin Dialog which transport the dialog contents inside an overlay that only exists on the client side and thus breaks shortcut event handling. Related to #7799, vaadin/vaadin-dialog#229
This makes it possible for a component to specify a client side only element that should be used for listening keydown events on when the component is setup as the listenOn target for a Shortcut. This is needed for components like Vaadin Dialog which transport the dialog contents inside an overlay that only exists on the client side and thus breaks shortcut event handling. Related to #7799, vaadin/vaadin-dialog#229
Uses API provided by Flow to make keydown events passed from the overlay to the Dialog element when the dialog has been used for listening for shortcuts with .listenOn(dialog). Depends on vaadin/flow#10264 Fixes vaadin/flow#7799, vaadin/vaadin-dialog#229 Co-authored-by: David Sosa <76832183+sosa-vaadin@users.noreply.github.com>
Uses API provided by Flow to make keydown events passed from the overlay to the Dialog element when the dialog has been used for listening for shortcuts with .listenOn(dialog). Depends on vaadin/flow#10264 Fixes vaadin/flow#7799, vaadin/vaadin-dialog#229 Co-authored-by: David Sosa <76832183+sosa-vaadin@users.noreply.github.com>
Uses API provided by Flow to make keydown events passed from the overlay to the Dialog element when the dialog has been used for listening for shortcuts with .listenOn(dialog). Depends on vaadin/flow#10264 Fixes vaadin/flow#7799, vaadin/vaadin-dialog#229 Co-authored-by: David Sosa <76832183+sosa-vaadin@users.noreply.github.com>
Uses API provided by Flow to make keydown events passed from the overlay to the Dialog element when the dialog has been used for listening for shortcuts with .listenOn(dialog). Depends on vaadin/flow#10264 Fixes vaadin/flow#7799, vaadin/vaadin-dialog#229 Co-authored-by: David Sosa <76832183+sosa-vaadin@users.noreply.github.com>
Uses API provided by Flow to make keydown events passed from the overlay to the Dialog element when the dialog has been used for listening for shortcuts with .listenOn(dialog). Depends on vaadin/flow#10264 Fixes vaadin/flow#7799, vaadin/vaadin-dialog#229 Co-authored-by: David Sosa <76832183+sosa-vaadin@users.noreply.github.com>
Uses API provided by Flow to make keydown events passed from the overlay to the Dialog element when the dialog has been used for listening for shortcuts with .listenOn(dialog). Depends on vaadin/flow#10264 Fixes vaadin/flow#7799, vaadin/vaadin-dialog#229 Co-authored-by: David Sosa <76832183+sosa-vaadin@users.noreply.github.com>
Uses API provided by Flow to make keydown events passed from the overlay to the Dialog element when the dialog has been used for listening for shortcuts with .listenOn(dialog). Depends on vaadin/flow#10264 Fixes vaadin/flow#7799, vaadin/vaadin-dialog#229 Co-authored-by: David Sosa <76832183+sosa-vaadin@users.noreply.github.com>
When I create a view with a Shortcut Listener (Enter) on a button and the view opens a "Add XYZ Dialog" for some additional content - I would expect that I can create a second Shortcut Listener within the Dialog and the Dialog prevents that both Enter Shortcuts are executed.
Only the Shortcut Listener within the Dialog should be executed. Currently both Shortcuts are executed.
This creates weird side effects. Additionally any Dialog should be modal (WCAG) - that mean's that interacting with the content behind it SHOULD BE impossible.
Vaadin: 14.1.19
Browser: FF 74
How to test:
The text was updated successfully, but these errors were encountered: