search

dumberjs / dumber-gist

A lightweight online IDE to write JS SPA prototypes in your own GitHub gists.
https://gist.dumber.app
MIT License
28 stars 2 forks source link

Opening fork modal should have focus inside it #31

Closed bigopon closed 4 years ago

bigopon commented 4 years ago

At the moment, clicking on fork doesn't move the focus to inside the modal, I think it's better the focus is moved there. Maybe by default focus on the cancel button

3cp commented 4 years ago

Probably only need key binding @combo('enter') to call controller.ok().

3cp commented 4 years ago

I was not aware about the focus issue in aurelia-dialog because I mainly use Safari (buttons are not in focused by "tab" key in Safari). https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/

In Chrome, aurelia-dialog does not prevent user from using "tab" key to shift focus to buttons out of dialog.

aurelia-dialog has a renderer to support native <dialog>, but it is not supported on all the browsers, we probably need some implementation to trap focus in the dialog. This is kind of generic issue.

3cp commented 4 years ago

There was an example. https://github.com/ghosh/Micromodal/blob/4d03e7ee5265a749f079922f3c6855c1da80765a/lib/src/index.js#L168

3cp commented 4 years ago

The commit only moves focus inside, not a proper solution to trap focus.

bigopon commented 4 years ago

@3cp awesome. Thanks. For trapping focus, It's not that needed for now, or this dialog in particular, since you rarely open it

3cp commented 4 years ago

The default focus is on "fork" button. Hit "esc" to cancel (default aurelia-dialog behaviour).

3cp commented 4 years ago

Proper focus trap implemented in https://github.com/3cp/aurelia-dialog-lite No doc yet. It removed many options, all the custom elements, and attach-focus attribute.