data-modal-background-click="disabled" extended

[goetsu]

this feature may be use in case of alertdialog instead of dialog so if it's not currently the case this must also prevent to close the dialog using esc key.

Otherwise maybe you can do extra data attributes like :

• data-modal-esc-key="disabled"
• data-modal-role="alertdialog" -> will automatically, change role to alertdialog instead of dialog, disable click on background and esc key to close, remove close button and move focus on the dialog itself instead of on the close button

[nico3333fr]

So @goetsu => basically, the alertdialog option has to:

• remove the background click option (ok)
• avoid the Esc key (ok)
• remove the close button (???)
• should give focus to the dialog itself or to another element? (the h1?)

How a user can close it?

[goetsu]

alertdialog are like

do you want do confirm suppresion of your account :
yes or no

or like
sorry an error occured please go back to your account

It's the user interaction within the modal that will close it so focus need to be moved in a specific element within the modal that can change depending on the content. Maybe you can do that by adding a data-modal-alertdialog-focustarget data attribute on the target element and move focus on it when the modal open (if used on a not focusable by default element the script will need to add a tabindex="-1" on it otherwise it will not work)

Also I forgot that in some case it's best to use aria-describedby on the modal itself see https://www.w3.org/TR/wai-aria-1.1/#alertdialog . Maybe you can do that by adding a data-modal-alertdialog-descriptiontarget data attribut on the target element that will generate a unique id attribute on this element and use this is id on the aria-describedby added to the modal

[nico3333fr]

It's the user interaction within the modal that will close it so focus need to be moved in a specific element within the modal that can change depending on the content. Maybe you can do that by adding a data-modal-alertdialog-focustarget data attribute on the target element and move focus on it when the modal open (if used on a not focusable by default element the script will need to add a tabindex="-1" on it otherwise it will not work)

So basically, let's sum up: to have a alertdialog:

• remove the background click option (ok)
• avoid the Esc key (ok)
• remove the "standard" close button (in the doc, it will be added that you must propose a closing option, the script already proposes one by adding a class js-modal-close on an element in the modal)
• provide focus on an element in the modal

In fact, we already have the option to give focus to an element (See 4th example: https://van11y.net/downloads/modal/demo/index.html). I suggest to provide focus on the title h1 in the alert modal (so should be with tabindex="-1".

Is it ok for you?

Also I forgot that in some case it's best to use aria-describedby on the modal itself see https://www.w3.org/TR/wai-aria-1.1/#alertdialog . Maybe you can do that by adding a data-modal-alertdialog-descriptiontarget data attribut on the target element that will generate a unique id attribute on this element and use this is id on the aria-describedby added to the modal

Let's separe this case, otherwise it will be too complicated.

[Oliv-]

Une modal sans bouton de fermeture pour les cas où c'est nécessaire, +1 !