Re: Refonte Mediabox [wip]

Bon donc en synthèse, après une rapide revue des troupes :

• la modale de Nicolas est top et accessible… pour une modale : elle fait très bien le job pour un usage de modale avec interactions, mais elle fait pas du tout la gestion des medias (ie gérer le chargement d’images, d’iframe, adapter la taille de la popin à la taille des images, gérer les galeries avec le passage suivant/précédent...)
• featherlight pas plus que glightbox ne sont particulièrement accessibles (on a bien une navigation au clavier dans les 2 cas, mais c’est le service minimum)
• tobii se revendique accessible mais est encore totalement en dev cf https://github.com/rqrauhvmra/tobii/issues/28
• modaal https://humaan.com/modaal/ semble la plus intéressante, avec une bonne base concernant l’accessibilité et le support des medias et galleries…
MAIS elle ne semble pas très activement maintenue. Je vois des PR et des Issues sur https://github.com/humaan/Modaal qui sont un peu gênantes, concernent l’accessibilité ou le support des versions récentes de jQuery

On a donc aucune solution prêt à l’emploi et que des emmerdes à gérer :p

--
Cédric
Le 22 sept. 2020 à 14:35 +0200, nicod_ <[email protected]>, a écrit :
> Le 22/09/2020 à 09:05, Cerdic a écrit :
> > Oui je suis bien d’accord, encore faut-il trouver une telle ressource !
> > Continuons de chercher donc, mais si par hasard il y’a des ressources
> > connues on est preneur !
>
> Parmi mes ressources habituelles (et validées), les composants de
> Nicolas Hoffmann, dont sa modale, qui existent en version jQuery :
> https://a11y.nicolas-hoffmann.net/
> et en ES2015 :
> https://van11y.net/
>
> Sa modale a été adaptée dans la lib Scampi ("pour une pleine conformité
> RGAA") :
> https://pidila.gitlab.io/scampi/documentation/modal.html
>
> Précisions intéressantes sur les attentes en terme d'a11y :
>
> > Respect du design pattern https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
> >
> > focus sur le premier élément tabulable
> > tab et shift-tab ne se déplacent pas en dehors de la fenetre modale
> > fermeture avec Esc ou au clic à l'extérieur de la fenêtre
>
> Autres ressources :
>
> http://www.webaxe.org/?s=lightbox
>
> https://www.456bereastreet.com/archive/200910/lightboxes_and_keyboard_accessibility/
>
> Et notamment, sur les attentes en terme d'a11y :
>
> > - Let me use the left and right arrow keys to step through images in a slideshow.
> > - When I press Esc, close the lightbox.
> > - Do one of the following:
> > - Either add focusable elements (links or buttons) for close/next/previous, put keyboard focus on the first focusable object in the lightbox, make sure I can’t tab to something behind the lightbox, and make it visually obvious which object has keyboard focus.
> > - or close the lightbox when I press Tab.
> > - When the lightbox closes, return keyboard focus to where it was when I opened it.
>
>
> --
> nicod_