Open LaurenceRLewis opened 3 years ago
@LaurenceRLewis Do you mean clicking the inert background outside the dialog? I've not heard of a dialog that closes by clicking inside the overlay except for clicking on a close button. I didn't know that our example didn't close when clicking outside. But, as a screen reader user, that'd be pretty difficult for me to discover. :)
Do you mean clicking the inert background outside the dialog?
Yes.
And it works for the datepicker example, but not for the other dialog examples (dialog, alertdialog).
Typical for modal dialog is a close button in the upper right corner. This allows the modal dialog to be closed quickly without scrolling the page, as is sometimes the case here.
It is true that modal dialogs can often be closed by clicking outside the dialog. But this is not always the case. I wonder if this is a good practice. Maybe someone clicks accidentally and the dialog is closed, although this was not intended. I tend to think that it is better that the dialog cannot be closed in this way because it encourages operating errors.
So I would be in favor of implementing a close button in the upper right corner, but not the possibility to close the dialog by clicking outside
@mcking65 yes Clicking on the inert background outside of the modal.
@JAWS-test a close button contained inside the modal dialog bounds is a given.
The default behaviour on iOS for popups is they close when the user taps the surrounding background.
I advocate that the same mouse click/tap behaviour works the same for modal dialog, where a click or tap on the inert background closes the modal.
Discussion in TF meeting:
The ARIA Authoring Practices (APG) Task Force just discussed Modal dialog questions
.
If both clicking outside the dialog and clicking the x button retain the field values, then there's no way for the user to cancel if they want to? So maybe add x button, but keep cancel button?
In case it's useful, here's an article with some design thoughts about close/cancel in dialogs: https://www.nngroup.com/articles/cancel-vs-close/
Is there any HTML/ARIA guidance around a clickable background overlay div? Should the overlay have a role="button"
and be focusable?
I've been looking as well for the answer and here are my findings:
backdrops
(Inspect the example from here)
Closing a modal dialog by clicking (or tap) on the modal overlay is a common function. What was the reason behind the APG modal dialog not including this behaviour.
Thank you.