See the « publishing npm package » documentation.

Salut Nico :)
Il est impossible de scroller la fenêtre modale si elle se trouve trop près de la fin du contenu.
Je t'ai fais un codepen à partir de ta demo : http://codepen.io/anon/pen/azeELN

T'as juste qu'à baisser exagerement la hauteur du compartiment en dessous des codes html/css/js puis cliquer sur le button "another modal" pour constater. ;)

++ ;)

Salut Nico,

Merci pour tous tes scripts accessibles :-)

J'essaie d'avoir une fenêtre modal qui soit accessible sur un site Web, en utilisant ton script, cependant le résultat n'est pas similaire à ce que tu as sur ton exemple.

Le site Web est http://www.montpelliergay.com/conferences-register/ (si ton navigateur est configuré en anglais par défaut, assure toi de cliquer sur "French" en haut car je ne l'ai mis en place que sur la version française pour le moment), et la fenêtre modal apparait quand on clique sur les blocs "Gets Better" et "Solidarity".

J'effectue mes tests avec VoiceOver sur un iPad (Safari et Chrome) : lorsque j'ai le focus sur "Gets Better" avec VoiceOver je double tap et ça m'ouvre la modal, par contre VoiceOver me relie le texte où il avait déjà le focus, au lieu de sauter dans la fenêtre modal... et là on est plus ou moins bloqué puisque le focus se trouve encore sur "Gets Better", et ce, jusqu'à ce qu'on clique sur la fenêtre modal (donc pas très pratique pour un non-voyant j'imagine). J'ai essayé de retarder le focus en utilisant un setTimeout, mais sans effet. J'ai tenté de jouer avec des "tabindex" mais sans effet non plus.

Je n'arrive pas à trouver pourquoi le focus ne se fait pas correctement sur la modal qui s'ouvre. Si tu as une idée de ce que j'ai pu mal faire ?

Merci

When using this plugin, autoplay on HTML5 video (MP4, WebM) stops working. Tested on OS X El Capitan, Chrome 51x, Safari 9.1.1.

Issue reported by @goetsu : when using data-modal-content-id attribute, if this content contains id, they are duplicated in the modal content. So creating troubles.

Solution: move the content.

Bonjour

Sur https://www.tisseursdemots.org/, j'utilise
https://a11y.nicolas-hoffmann.net/modal/ pour y afficher un miniagenda qui passe de mois en mois en ajax
sauf que ça casse l'ajax et provoque le rechargement de la page avec le paramètre du mois
comme si ajax de SPIP ne retrouvait pas ses petits suite à la manipulation du DOM par le script de modale (le div est initialement caché, et déplacé dans une autre zone du DOM
https://github.com/nico3333fr/jquery-accessible-modal-window-aria/blob/master/jquery-accessible-modal-window-aria.js#L73)

L'appel à la modale est ici : https://zone.spip.org/trac/spip-zone/browser/_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/noisettes/header/cadre_outils_agenda.html
Et le miniagenda est là https://zone.spip.org/trac/spip-zone/browser/_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/noisettes/footer/footer_pied.html#L25

J'ai vérifié :

• si je modifie la CSS pour afficher l'agenda là où il est masqué, l'ajax fonctionne
• mais quand la modale déplace le html du mini agenda, le comportement ajax associé ne suit pas

Quelques pistes : https://stackoverflow.com/questions/26321432/move-element-to-another-div-without-losing-events-listeners-etc-without-jquer

hello,
i just have tested the new modal release wit FF 54.0.1 with NVDA 2017.1,
when i arrivjed in the modal afte a clicm on a buàtton, nvda doesn't announce something like "m
odal" or "dialog" to warn me that i'm in a pop-in, that's really disturbing & annoying,
is it the expected behavior ?

Hi,

The text in the background modal in not translatable:
<span id="js-modal-overlay" class="simple-modal-overlay" title="Fermer" data-background-click="enabled"><span class="invisible">Close modal</span></span>

Could it be in a "data" attribute?

Salut Nicolas,

J'ai voulu mettre class="js-modal-close" sur un lien d'une modale qui pointait vers une ancre de la page en cours.
Mais dans ce cas, le close se produit sans que l'action du lien ne soit faite.

Et sans le close, le scroll se produit dans la page sous la boite de dialog, mais quand je clique sur le bouton close, le focus est remis sur le bouton qui avait ouvert la boite.

C'est quelque chose que tu peux voir en allant sur https://formation.soyezcreateurs.net/Raccourcis-Typographiques-de-SPIP-mode-d-emploi.html et en cliquant sur l'icone d'agenda en haut à droite. Puis en cliquant sur l'item en dessous du tableau (Raccourcis Typographiques de SPIP, mode d’emploi : Formation Le mercredi 1 décembre 2021 à 09:30). Là, tu vois le scroll en dessous.

Est-ce que c'est clair ?
Est-ce que ma demande est légitime ?

Hi,

Could you had the possibility to focus a form field ?
With something like :
data-modal-focus-id

Thx !

Everything in the title.

I can easily scroll the page below overlay on iPad Air and iPhone 5s. You can replicate this at the example page of this library http://a11y.nicolas-hoffmann.net/modal/ . This is particularly disorienting if one is using pinch zooming (like many seniors and poor eyesighted people use) and the whole page in the background moves when one scrolls the zoomed in modal.

hello, sur ton script modale je viens de me rendre compte que tu n'appliquais pas de tabindex -1 aux liens, element de formulaire etc en arrière plan du coup si je remet le focus sur la barre d'adresse puis retabule je repasse en dessous de la modale.

Un correctif de base pourrait être de mettre la modale en 1er dans le code source mais cela poserait toujours souci si l'utilisateur fait shift tab au lieu de tab

Enfin si tu implémente gestion des tabindex -1 :

• je recommande de le rendre désactivable car c'est généralement assez gourmand sur les grosses pages.
• il faut appliquer le tabindex -1 à tout ce qui est tabulable donc les liens, les buttons, les input, les select, les textarea, les éléments avec un tabindex >=0 (attention pour ceux là il faudra à la fermeture remettre leur valeur tel qu'elle était)

Hi -

I've recently noticed a problem with the modals on https://a11y.nicolas-hoffmann.net/modal/ where the text is not read on iOS 10.3.3 devices when using Safari and VoiceOver.

For example, on the "First Simple Example" modal, the following is what appears:

Close (This is read)
Title (This is read)
Hello world! (This is not read)

Any idea what could be happening?

Thanks,
Michael

Just wondering, since the dialog tag is removed from DOM and not hidden, do you have any idea on how to animate it?
The smart trick using transition on visibility with a delay won't work in that case.

My guess: first create the dialog element with a class that hides it (visibility: hidden), then remove this class almost immediately to let the magic happen.

Do you agree?

This project is very interesting. It would be good to have it as a bower package.

Thanks.

Hi Nico,

I hope you are able to translate this properly from English to French.

I appreciate you taking the time to create a simple and accessible modal window, using ARIA. This is something I feel can be very helpful to me.

Unfortunately I cannot seem to get any of the sample pages I have created, based on the code I have either taken from your Demo page here: http://a11y.nicolas-hoffmann.net/modal/ or your GitHub files here: https://github.com/nico3333fr/jquery-accessible-modal-window-aria, to reveal the pop-up modal in Google Chrome.

Here is a sample of the code I have been using http://codepen.io/c0brarules/pen/oXwdZQ based on your demo however the Modal only appears in Internet Explorer and Firefox but does not work in Google Chrome (I'm currently using Google Chrome Version 43.0.2357.124 m).

For some reason your actual Demo page works in Google Chrome though.

Do you know what I need to add to make mine to get it to appear?

Thanks.

• Dwayne

Hello. Thanks for sharing your code. I may be making an error, but when I test the demo page modal examples ( https://a11y.nicolas-hoffmann.net/modal/ ), the focus does not stay on the modal for me.

I'm on an iPhone 6s (iOS 11.2.2). I opened the demo page in Safari on the iPhone, then turned on VoiceOver. When I activate the modal, it opens correctly. When I use a swipe right gesture repeatedly, the focus correctly goes on the items in the modal window, but then incorrectly focuses on items that are not on the modal window even though I haven't closed the modal yet. The focus is not trapped in the modal.

I have also tried testing it with a bluetooth keyboard attached and with VoiceOver on. The same thing happens (focus is not trapped in the modal). -Gail Parsloe

Hello,

I found this error log.
And this is related to the variables declaration on line: 184

var $this = $(this),
      $js_modal = $('#js-modal'),
      focusedItem = $( document.activeElement ),
      in_jsmodal = focusedItem.parents('#js-modal').length ? true : false;
     $close = $('#js-modal-close');

I found that the in_jsmodal assigment end in a semicolon, and it should be a comma.

Shold be like this:

var $this = $(this),
      $js_modal = $('#js-modal'),
      focusedItem = $( document.activeElement ),
      in_jsmodal = focusedItem.parents('#js-modal').length ? true : false,
     $close = $('#js-modal-close');

Hope it helps.