search

KittyGiraudel / ama

Ask me anything!
43 stars 4 forks source link

a11y question #114

Closed WyoMurf closed 4 years ago

WyoMurf commented 4 years ago

Hugo-- I'm in the first hours of research for a replacement to the javascript confirm() function, which makes the Cancel button the default. But I see from several articles on the subject, that this is no easy task, and I therefore shouldn't be using the confirm() function at all. and there are more than just a few replacement possibilities, a11y being one. I am no front-end specialist, actually I'm quite a back-end specialist, so, I ask you: Can a11y be used to create a simple confirm() replacement with just the Cancel button default, for the guys who are very handy at devastation by hitting the "Enter" key?

And, if so, How?

murf

KittyGiraudel commented 4 years ago

Hello,

It seems that you need a dialog with the cancel button as first button. Any accessible dialog library, such as a11y-dialog, should enable you to do that. You’ll need a bit of implementation of course, but that does not seem out of reach.

WyoMurf commented 4 years ago

Hugo--

This is good to hear, but being a slow-witted backend engineer, a good solid example of how to do this, by creating a javascript function called real_confirm("message") with the Cancel button being the default, other button would be "OK", still modal, etc. etc. I propose that such an example would ease the worried developer considerably.

murf

KittyGiraudel commented 4 years ago

The thing is that you’re not going to have a one line JavaScript function that is going to “just work”; building a drop-in replacement for window.confirm is not really an option. If you want that behaviour, you’re going to have to build it yourself with a dialog library of your choice.

A11y-dialog is pretty well documented on how to get started: http://edenspiekermann.github.io/a11y-dialog. When opening the dialog (with dialogInstance.show()), it will automatically focus the first focusable element within the dialog. So as long as the first one is the close/cancel button, that will work.

Closing the dialog on pressing ESC or clicking the backdrop are also considered by a11y-dialog and should work out of the box. It really is just about setting up the expected HTML markup for the dialog, and instantiating the dialog so you can interact with it in your script.