Enter key action on modal dialogs

Question

The action of the Escape key on a modal dialog is clear in that it closes the dialog, effectively clicking a 'Cancel' button or similar.

However, what is the current consensus of the Enter key while in a modal dialog and not focused on a button?

In the sample modal above, from HTML forms one might expect a dialog's contents (if any) to be submitted as though the user has clicked the 'Save' button.

However, the modal might also be a confirmation to delete, modify, approve, unattach something, etc. It may also contain non-form data manipulation, more akin to a modal window than dialog. Consistency would then suggest that Enter continues to perform the primary action in other dialogs, even without form content. But this then goes against my instinct of defaulting to a safe action, and the well-established principle of making it clear what action modal buttons will perform.

It would be all too easy for a user to accidentally hit Enter (the bottom-right of many keyboards) and perform an action that might cause a change that is difficult or frustrating to undo.

With the above issues, it seems like it may be easier to not allow any action on the Enter key at all unless a button is focused. To balance this with speedy keyboard navigation, perhaps focusing on the 'Cancel' button first might be best, allowing a tab to the primary (unsafe) action button. Tab-Enter seems a reasonable compromise for safety.

Answer 1

When talking about modals and keyboard interaction it's necessary to reference what WCAG says about these interactions in their guidelines. Since users with disabilities face significant challenges within the context of user interface in general and the assisting technologies they work with to experience your application, WCAG is very explicit about how modal interactions should work.

ENTER is typically specific to the object that has focus and what ARIA role it's given, not the entire modal itself unlike ESC. For instance, selecting an option from a dropdown and ENTER would select the option. WCAG specifies a difference between Modal dialogs (role=dialog) and Alert dialogs (role=alertdialog). Since their intent is different so is the recommended behavior of how focus should work within modals. I'm not really clear in which context your referring to here but I suspect you perceive a risk when it comes to alert dialogs since you reference messages around destructive actions. In this case here's what WCAG recommends:

If a dialog contains the final step in a process that is not easily reversible, such as deleting data or completing a financial transaction, it may be advisable to set focus on the least destructive action, especially if undoing the action is difficult or impossible. The Alert Dialog Pattern is often employed in such circumstances.

https://www.w3.org/TR/wai-aria-practices/#alertdialog

In the case of Modal dialogs focus should orient to the first focusable element within the modal. Using your example above, the initial focus would be on the first input element. Since it's recommended that focus follow the order of element in the DOM the SAVE button would become the last focused element.

https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

Removing ENTER from modal interactions is never recommended as it's contextual to the element and against users expectations. If you specify the role of modal appropriately, and consider the WCAG recommendations I believe you're on the right path.

Answer 2

Enter should press the default button in the dialog (with the exceptions of another button or multiline text box currently having keyboard focus). Escape is the key that should always perform a safe action.

A Tab+Enter compromise would be undiscoverable and as it's not in common use anywhere else, very unlikely to be used by the sort of people who are trying to use keyboard shortcuts in the first place.

In the case of a dialog performing a potentially dangerous operation, there is a good, but separate, question to be asked about whether the default action should be to perform that action. There's nothing that says the Cancel button shouldn't also be the default in a "This will format your hard drive, are you sure?" dialog.