feat: overlays, enter key to dismiss dialog with inputs

[cjorasch]

Feature Request

Ionic version:
[x] 5.2.3

Describe the Feature Request
When running in a desktop browser, it is common to be able to use the Enter and Escape keys to dismiss alert dialogs.

For example, "Are you sure you want to..." with OK and Cancel buttons.

Describe Preferred Solution
Add a way to indicate this behavior when specifying the buttons to be displayed.

Possible approaches:

• role value to indicate the accept button (similar to current cancel behavior)
• property to indicate keyboard binding for buttons so enter could be specified as well as keys for other buttons.

[HyperLife1119]

I hope this feature can be seen in V6 versions. @liamdebeasi

[liamdebeasi]

Hi everyone,

The team is reviewing feature requests in our backlog. Is anyone able to clarify why they would like to dismiss overlays with the "Enter" key? A code example of the problem you are running into would also be helpful.

[cjorasch]

It looks like this is now working for alerts that do not include inputs in the options.

    const alert = await alertController.create({
        header,
        message,
        buttons: [
            {
                text: 'Cancel',
                role: 'cancel',
            },
            {
                text: 'OK',
            },
        ],
    });
    alert.present();

This works and the user is able to use the Enter and Escape keys to confirm or cancel the alert.

If you include inputs:

    const alert = await alertController.create({
        header,
        message,
        inputs: [
            {
                type: 'text',
                name: 'value',
                value,
            },
        ],
        buttons: [
            {
                text: 'Cancel',
                role: 'cancel',
            },
            {
                text: 'OK',
            },
        ],
    });
    alert.present();

Then the Enter key does not close the alert. This is different from window.prompt where the user is able to use the Enter key.

The general use case is for users who are working on a desktop browser and want to work from the keyboard without going back and forth to the mouse when entering information. This is also the case for things like being able to set focus when a dialog is displayed.

[colabottles]

For accessibility reasons, an alert should be closed if there are no interactive elements (e.g., "close", "save", etc.) with the ESC key. Any interaction in the alert dialog, should be tabbable and closed with either the ENTER key on input of the choice OR dismissable with the ESC key. This is for the most part (95%+) the behavior I have seen over the years with testing and auditing for accessibility and testing with people with disabilities.

An overlay (totally separate entity from an alert dialog) should be dismissable with either clicking off with the mouse or by initiating a trigger (an "x" for instance) in the overlay and then using the ESC key. Changing the default behavior of native HTML components is strongly discouraged.