nico3333fr / jquery-accessible-modal-window-aria Goto Github PK
View Code? Open in Web Editor NEWjQuery simple and accessible modal window, using ARIA
License: MIT License
jQuery simple and accessible modal window, using ARIA
License: MIT License
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é :
Quelques pistes : https://stackoverflow.com/questions/26321432/move-element-to-another-div-without-losing-events-listeners-etc-without-jquer
See the « publishing npm package » documentation.
This project is very interesting. It would be good to have it as a bower package.
Thanks.
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?
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?
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.
Hi,
Could you had the possibility to focus a form field ?
With something like :
data-modal-focus-id
Thx !
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. ;)
++ ;)
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.
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
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
Everything in the title.
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.
When using this plugin, autoplay on HTML5 video (MP4, WebM) stops working. Tested on OS X El Capitan, Chrome 51x, Safari 9.1.1.
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 :
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 ?
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,
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 ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.