The Enter key should serve as the default submit action.
- JS-free only possible through
<form>and<button type="submit">?
It is recommended that a dialog also be cancelled by pressing the Escape key with focus on any item.
- is this even possible without JavaScript?
Tab Focus must be held within the dialog until it is cancelled or submitted.
- great! how is this done properly?
- JS-free option?
- Is listening for TAB and SHIFT TAB sufficient?
- DOM-method / CSS selector for "tabbable" or "focussable" element?
If the current focus item has Escape key behavior, the press of the Escape will be handled by the current item and the user may have to press Escape an additional time to close the dialog.
- great, any sane way to manage that stacking?
- possibly JS-free?
Even if the user clicks outside of the dialog on the application which invoked the dialog, focus remains in the dialog.
- So Clicking outside of the dialog does not change focus at all?
- Canceling the dialog by way of outside-click is forbidden?
When the dialog is closed or cancelled focus should return to the element in the application which had focus before the dialog is invoked.
- great! any sane way to manage that "history"?
Determining the first focusable item must take into account elements which receive focus by default (form fields and links) as well as items which may have a tabindex attribute with a positive value.
- wasn't the value of
tabindexsupposed to determine tabbing priority (or order)? - what about
tabindex="0"
Authors should ensure that Enter activates only the widget they intend.
- again the question for a same way of managing this, possibly without too much JavaScript in play?
I think natively the first two things are possible via
window.confirm('confirm me');. Apart from that, can’t you work with CSS’:focus/:activeselectors and if so, doesn’tESCtrigger an ‘unfocus’ event? That way you might be able to work around with your own solution.If not the latter you might want to serve no-js fallback with
window.confirm()?For the focus thing see this issue and the latest commits referenced in there: drublic/css-modal#26
I think this is the definition of a dialog (which is to be confirmed, to be cancelled via button) and therefore differs here from a modal (which should be closable by clicking outside).