Some Questions regarding WAI ARIA

gistfile1.md

Question Regarding WAI ARIA

Dialog (Modal) (widget)

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 tabindex supposed 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?

Have a look at the slides of Dennis Lembrée's csun14 talk about this very thing: https://www.dropbox.com/s/1sqoe0vs6iuar9h/CSUN14-Modal-Dialog.pptx

I think natively the first two things are possible via window.confirm('confirm me');. Apart from that, can’t you work with CSS’ :focus / :active selectors and if so, doesn’t ESC trigger 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

---

Canceling the dialog by way of outside-click is forbidden?

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).

it's a web application - JavaScript is mandatory. I just don't want to implement - possibly buggy/half-baked/broken stuff if I don't have to.

Here's also a jsfiddle with Dennis' example code from his csun talk mentioned above: http://jsfiddle.net/weboverhauls/GPd5u/7/
Do you have anything to add @weboverhauls ?