Re: [spip-dev] Refonte Mediabox [wip]

2020-11-06 Par sujet Cerdic
Hello,

j’ai donc poussé tout le chantier dans une PR 
https://git.spip.net/spip/mediabox/pulls/1
La branche est en test sur contrib, toujours, et inclus maintenant 
l’utilisation de lity dans ecrire/

--
Cédric
Le 13 oct. 2020 à 11:59 +0200, pierre laszczak , a 
écrit :
> Au niveau du focus sur un champ du  formulaire à l'ouverture  de la modal 
> c'est très perturbant pour le commun des mortels en navigation mobile:
> Entre le scroll sur le premier champ  et le clavier virtuel qui s'affiche sur 
> la moitié de l'écran on a vraiment du mal à comprendre ce qui se passe à 
> l'écran.
>
> > Le mar. 13 oct. 2020 à 11:12, RealET  a écrit :
> > > Matthieu Marcillaud a écrit le 13/10/2020 à 11:02 :
> > > > Y a un focus automatique du lien sur la croix de fermeture ? C’est assez
> > > > bizarre (disgracieux) à la souris / trackpad du coup ce focus visible
> > > > sur la croix à l’ouverture de la modale. C’est voulu ?
> > > J'en profite pour faire remonter qu'on peut avoir besoin que ce soit un
> > > élément de formulaire dans la modale qui ait le focus à l'ouverture (ex
> > > pour une modale qui affiche juste un champ formulaire de recherche ou
> > > abonnement à une newsletter).
> > > Une discussion à ce sujet chez nicofr :
> > > https://github.com/nicofr/jquery-accessible-modal-window-aria/issues/20
> > >
> > > Discussion qui a donné lieu à son intégration.
> > >
> > > --
> > > RealET
> > >
> > >
> > > ___
> > > liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> > > doc: https://www.spip.net/
> > > dev: https://core.spip.net/
> > > irc://irc.freenode.net/spip
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-13 Par sujet pierre laszczak
Au niveau du focus sur un champ du  formulaire à l'ouverture  de la modal
c'est très perturbant pour le commun des mortels en navigation mobile:
Entre le scroll sur le premier champ  et le clavier virtuel qui s'affiche
sur la moitié de l'écran on a vraiment du mal à comprendre ce qui se passe
à l'écran.

Le mar. 13 oct. 2020 à 11:12, RealET  a écrit :

> Matthieu Marcillaud a écrit le 13/10/2020 à 11:02 :
> > Y a un focus automatique du lien sur la croix de fermeture ? C’est assez
> > bizarre (disgracieux) à la souris / trackpad du coup ce focus visible
> > sur la croix à l’ouverture de la modale. C’est voulu ?
> J'en profite pour faire remonter qu'on peut avoir besoin que ce soit un
> élément de formulaire dans la modale qui ait le focus à l'ouverture (ex
> pour une modale qui affiche juste un champ formulaire de recherche ou
> abonnement à une newsletter).
> Une discussion à ce sujet chez nicofr :
> https://github.com/nicofr/jquery-accessible-modal-window-aria/issues/20
>
> Discussion qui a donné lieu à son intégration.
>
> --
> RealET
>
>
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-13 Par sujet RealET

Matthieu Marcillaud a écrit le 13/10/2020 à 11:02 :
Y a un focus automatique du lien sur la croix de fermeture ? C’est assez 
bizarre (disgracieux) à la souris / trackpad du coup ce focus visible 
sur la croix à l’ouverture de la modale. C’est voulu ?
J'en profite pour faire remonter qu'on peut avoir besoin que ce soit un 
élément de formulaire dans la modale qui ait le focus à l'ouverture (ex 
pour une modale qui affiche juste un champ formulaire de recherche ou 
abonnement à une newsletter).

Une discussion à ce sujet chez nicofr :
https://github.com/nicofr/jquery-accessible-modal-window-aria/issues/20

Discussion qui a donné lieu à son intégration.

--
RealET


___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-13 Par sujet Matthieu Marcillaud

Le 13/10/2020 à 10:50, Cerdic a écrit :
J’ai fait du fignolage esthétique, des transitions slide left/right sur 
les précedent/suivant et ajouté un preloader sur le next dans les albums.

Ça commence à être pas mal du tout amha


C’est chouette.

Y a un focus automatique du lien sur la croix de fermeture ? C’est assez 
bizarre (disgracieux) à la souris / trackpad du coup ce focus visible 
sur la croix à l’ouverture de la modale. C’est voulu ?


MM.
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-13 Par sujet Cerdic
J’ai fait du fignolage esthétique, des transitions slide left/right sur les 
précedent/suivant et ajouté un preloader sur le next dans les albums.
Ça commence à être pas mal du tout amha

--
Cédric
Le 10 oct. 2020 à 09:59 +0200, Eric Lupinacci , a écrit :
> Oui je trouve ça nickel là.
>
> > Le sam. 10 oct. 2020 à 05:36, nicod_  a écrit :
> > > Le 09/10/2020 à 23:19, Cerdic a écrit :
> > > > C’est corrigé et je viens d’ajouter une fonction diaporama.
> > >
> > > Top avec toutes ces modifs.
> > >
> > > Comment ça marche ta fonction diaporama ? Je ne vois pas ça sur la démo.
> > > Niveau accessibilité, on n'est pas censés déclencher une animation
> > > automatiquement, et au pire il doit y avoir un bouton pour l'arrêter.
> > >
> > > > Je crois qu’avec ça on a toutes les features. Il reste à gérer les
> > > > quelques configs et on aura une bonne base
> > > > (il y aura surement aussi une passe à faire d’affinage des styles en
> > > > petit écran)
> > >
> > > Je vais tester ça sur crossbrowsertesting asap.
> > >
> > > --
> > > nicod_
> > > ___
> > > liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> > > doc: https://www.spip.net/
> > > dev: https://core.spip.net/
> > > irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-10 Par sujet Cerdic
essaye avec un ?var_mode=calcul peut-être ?

Evidemment aucune animation ne démarre automatiquement, et c’est un bouton qui 
permet de démarrer et d’arrêter le diaporama !

--
Cédric
Le 10 oct. 2020 à 05:36 +0200, nicod_ , a écrit :
> Le 09/10/2020 à 23:19, Cerdic a écrit :
> > C’est corrigé et je viens d’ajouter une fonction diaporama.
>
> Top avec toutes ces modifs.
>
> Comment ça marche ta fonction diaporama ? Je ne vois pas ça sur la démo.
> Niveau accessibilité, on n'est pas censés déclencher une animation
> automatiquement, et au pire il doit y avoir un bouton pour l'arrêter.
>
> > Je crois qu’avec ça on a toutes les features. Il reste à gérer les
> > quelques configs et on aura une bonne base
> > (il y aura surement aussi une passe à faire d’affinage des styles en
> > petit écran)
>
> Je vais tester ça sur crossbrowsertesting asap.
>
> --
> nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-10 Par sujet Eric Lupinacci
Oui je trouve ça nickel là.

Le sam. 10 oct. 2020 à 05:36, nicod_  a écrit :

> Le 09/10/2020 à 23:19, Cerdic a écrit :
> > C’est corrigé et je viens d’ajouter une fonction diaporama.
>
> Top avec toutes ces modifs.
>
> Comment ça marche ta fonction diaporama ? Je ne vois pas ça sur la démo.
> Niveau accessibilité, on n'est pas censés déclencher une animation
> automatiquement, et au pire il doit y avoir un bouton pour l'arrêter.
>
> > Je crois qu’avec ça on a toutes les features. Il reste à gérer les
> > quelques configs et on aura une bonne base
> > (il y aura surement aussi une passe à faire d’affinage des styles en
> > petit écran)
>
> Je vais tester ça sur crossbrowsertesting asap.
>
> --
> nicod_
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
>
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-09 Par sujet nicod_

Le 09/10/2020 à 23:19, Cerdic a écrit :

C’est corrigé et je viens d’ajouter une fonction diaporama.


Top avec toutes ces modifs.

Comment ça marche ta fonction diaporama ? Je ne vois pas ça sur la démo.
Niveau accessibilité, on n'est pas censés déclencher une animation 
automatiquement, et au pire il doit y avoir un bouton pour l'arrêter.


Je crois qu’avec ça on a toutes les features. Il reste à gérer les 
quelques configs et on aura une bonne base
(il y aura surement aussi une passe à faire d’affinage des styles en 
petit écran)


Je vais tester ça sur crossbrowsertesting asap.

--
nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-10-09 Par sujet Cerdic
C’est corrigé et je viens d’ajouter une fonction diaporama.

Je crois qu’avec ça on a toutes les features. Il reste à gérer les quelques 
configs et on aura une bonne base
(il y aura surement aussi une passe à faire d’affinage des styles en petit 
écran)

--
Cédric
Le 9 oct. 2020 à 17:24 +0200, Cerdic , a écrit :
> Oui et non : les boutons suivant/précédent sont actuellement presque sur 
> toute la hauteur de l’écran, donc si tu as un petit écran, ou que l’image est 
> très grande il reste presque pas de zone « en dehors de l’image et en dehors 
> des boutons »
> Peut-être il faut des boutons un peu plus petit en hauteur en limitant par 
> exemple à 25% de la hauteur de l’écran ?
>
> --
> Cédric
> Le 9 oct. 2020 à 17:08 +0200, Eric Lupinacci , a écrit :
> > Hello,
> >
> > Un petit truc.
> > Quand on est sur une image le fait de cliquer en dehors de l'image ferme la 
> > popup. Ok.
> > Quand on est dans une galerie le fait de cliquer en dehors de l'image est 
> > équivalent aux boutons suivant et précédent.
> > C'est voulu ? normal ? Parce que je trouve ça déroutant la première fois 
> > par rapport au comportement des images.
> >
> >
> >
> >
> >
> > > Le ven. 9 oct. 2020 à 16:59, Cerdic  a écrit :
> > > > Hello,
> > > >
> > > > merci pour vos retours.
> > > >
> > > > Les points suivants sont donc corrigés :
> > > > - le signalement du focus des boutons close/prev/next est forcé dans la 
> > > > css de la box, et non hérité par défaut du site
> > > > - les boutons prev/next sont en position fixed dans l’écran et ne 
> > > > bougent donc plus. Ils sont par ailleurs visible immédiatement et plus 
> > > > seulement au survol
> > > > - il y a un background sur les images
> > > > - on peut fermer la box pendant son chargement si c’est trop long
> > > >
> > > > --
> > > > Cédric
> > > > Le 9 oct. 2020 à 15:11 +0200, pierre laszczak 
> > > > , a écrit :
> > > > > Hello,
> > > > >
> > > > > Super! je viens de tester à l'instant sur contrib et je suis du même 
> > > > > avis que tcharlss
> > > > >
> > > > > > Une petite suggestion d'UX : pour les galeries, est-ce que c'est 
> > > > > > possible de mettre les flèches de navigation en position fixe sur 
> > > > > > les côté (et ce de base, sans avoir à bidouiller les styles) ?
> > > > > > Là elles sont collées par-dessus l'image, ce qui fait qu'avec des 
> > > > > > images de tailles différentes elles changent constamment de place, 
> > > > > > ce qui rend la navigation à la souris moins facile.
> > > > >
> > > > > Il y a un autre soucis sur les connexions lentes, je pense notamment 
> > > > > au diaporama:
> > > > > -> Une fois qu'une action js est lancée on ne peut pas l'annuler en 
> > > > > cliquant sur close ou hors de la fancybox! on est obligé d'attendre 
> > > > > que la requête ajax soit terminée.
> > > > >
> > > > > > Le ven. 9 oct. 2020 à 00:48, nicod_  a écrit :
> > > > > > > Le 07/10/2020 à 23:59, nicod_ a écrit :
> > > > > > > > Il faudrait pouvoir la faire tester par un·e expert·e 
> > > > > > > > accessibilité.
> > > > > > > >
> > > > > > > > Peut être Roman, s'il nous lit ici ?
> > > > > > >
> > > > > > > Un premier retour de notabene :
> > > > > > >
> > > > > > > > Au clavier c'est tout bon (sauf le bouton "fermer" qui n'a pas 
> > > > > > > > d'outline perceptible). On cycle dans la popin sans en sortir, 
> > > > > > > > pas de perte de focus, etc. Quand on ferme la popin ça remet le 
> > > > > > > > focus sur le lien ouvrant. Tout bon.
> > > > > > > >
> > > > > > > > Les flèches ne sont affichées qu'au survol, ça n'aide pas  
> > > > > > > > l'utilisateur pour voir que la popin est un carrousel (il peut 
> > > > > > > > pas deviner tout seul gauche/droite).
> > > > > > > >
> > > > > > > > J'essaie de tester bientôt avec mon lecteur d'écran. Mais déjà 
> > > > > > > > c'est bien cool.
> > > > > > >
> > > > > > > https://toot.cafe/@accessiblestef/105000951846500269
> > > > > > >
> > > > > > > Ça sent bon tout ça, en plus elle est vachement plus light et 
> > > > > > > jolie
> > > > > > > cette box :)
> > > > > > >
> > > > > > > --
> > > > > > > nicod_
> > > > > > > ___
> > > > > > > liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> > > > > > > doc: https://www.spip.net/
> > > > > > > dev: https://core.spip.net/
> > > > > > > irc://irc.freenode.net/spip
> > > > ___
> > > > liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> > > > doc: https://www.spip.net/
> > > > dev: https://core.spip.net/
> > > > irc://irc.freenode.net/spip
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-09 Par sujet Cerdic
Oui et non : les boutons suivant/précédent sont actuellement presque sur toute 
la hauteur de l’écran, donc si tu as un petit écran, ou que l’image est très 
grande il reste presque pas de zone « en dehors de l’image et en dehors des 
boutons »
Peut-être il faut des boutons un peu plus petit en hauteur en limitant par 
exemple à 25% de la hauteur de l’écran ?

--
Cédric
Le 9 oct. 2020 à 17:08 +0200, Eric Lupinacci , a écrit :
> Hello,
>
> Un petit truc.
> Quand on est sur une image le fait de cliquer en dehors de l'image ferme la 
> popup. Ok.
> Quand on est dans une galerie le fait de cliquer en dehors de l'image est 
> équivalent aux boutons suivant et précédent.
> C'est voulu ? normal ? Parce que je trouve ça déroutant la première fois par 
> rapport au comportement des images.
>
>
>
>
>
> > Le ven. 9 oct. 2020 à 16:59, Cerdic  a écrit :
> > > Hello,
> > >
> > > merci pour vos retours.
> > >
> > > Les points suivants sont donc corrigés :
> > > - le signalement du focus des boutons close/prev/next est forcé dans la 
> > > css de la box, et non hérité par défaut du site
> > > - les boutons prev/next sont en position fixed dans l’écran et ne bougent 
> > > donc plus. Ils sont par ailleurs visible immédiatement et plus seulement 
> > > au survol
> > > - il y a un background sur les images
> > > - on peut fermer la box pendant son chargement si c’est trop long
> > >
> > > --
> > > Cédric
> > > Le 9 oct. 2020 à 15:11 +0200, pierre laszczak 
> > > , a écrit :
> > > > Hello,
> > > >
> > > > Super! je viens de tester à l'instant sur contrib et je suis du même 
> > > > avis que tcharlss
> > > >
> > > > > Une petite suggestion d'UX : pour les galeries, est-ce que c'est 
> > > > > possible de mettre les flèches de navigation en position fixe sur les 
> > > > > côté (et ce de base, sans avoir à bidouiller les styles) ?
> > > > > Là elles sont collées par-dessus l'image, ce qui fait qu'avec des 
> > > > > images de tailles différentes elles changent constamment de place, ce 
> > > > > qui rend la navigation à la souris moins facile.
> > > >
> > > > Il y a un autre soucis sur les connexions lentes, je pense notamment au 
> > > > diaporama:
> > > > -> Une fois qu'une action js est lancée on ne peut pas l'annuler en 
> > > > cliquant sur close ou hors de la fancybox! on est obligé d'attendre que 
> > > > la requête ajax soit terminée.
> > > >
> > > > > Le ven. 9 oct. 2020 à 00:48, nicod_  a écrit :
> > > > > > Le 07/10/2020 à 23:59, nicod_ a écrit :
> > > > > > > Il faudrait pouvoir la faire tester par un·e expert·e 
> > > > > > > accessibilité.
> > > > > > >
> > > > > > > Peut être Roman, s'il nous lit ici ?
> > > > > >
> > > > > > Un premier retour de notabene :
> > > > > >
> > > > > > > Au clavier c'est tout bon (sauf le bouton "fermer" qui n'a pas 
> > > > > > > d'outline perceptible). On cycle dans la popin sans en sortir, 
> > > > > > > pas de perte de focus, etc. Quand on ferme la popin ça remet le 
> > > > > > > focus sur le lien ouvrant. Tout bon.
> > > > > > >
> > > > > > > Les flèches ne sont affichées qu'au survol, ça n'aide pas  
> > > > > > > l'utilisateur pour voir que la popin est un carrousel (il peut 
> > > > > > > pas deviner tout seul gauche/droite).
> > > > > > >
> > > > > > > J'essaie de tester bientôt avec mon lecteur d'écran. Mais déjà 
> > > > > > > c'est bien cool.
> > > > > >
> > > > > > https://toot.cafe/@accessiblestef/105000951846500269
> > > > > >
> > > > > > Ça sent bon tout ça, en plus elle est vachement plus light et jolie
> > > > > > cette box :)
> > > > > >
> > > > > > --
> > > > > > nicod_
> > > > > > ___
> > > > > > liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> > > > > > doc: https://www.spip.net/
> > > > > > dev: https://core.spip.net/
> > > > > > irc://irc.freenode.net/spip
> > > ___
> > > liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> > > doc: https://www.spip.net/
> > > dev: https://core.spip.net/
> > > irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-09 Par sujet Eric Lupinacci
Hello,

Un petit truc.
Quand on est sur une image le fait de cliquer en dehors de l'image ferme la
popup. Ok.
Quand on est dans une galerie le fait de cliquer en dehors de l'image est
équivalent aux boutons suivant et précédent.
C'est voulu ? normal ? Parce que je trouve ça déroutant la première fois
par rapport au comportement des images.





Le ven. 9 oct. 2020 à 16:59, Cerdic  a écrit :

> Hello,
>
> merci pour vos retours.
>
> Les points suivants sont donc corrigés :
> - le signalement du focus des boutons close/prev/next est forcé dans la
> css de la box, et non hérité par défaut du site
> - les boutons prev/next sont en position fixed dans l’écran et ne bougent
> donc plus. Ils sont par ailleurs visible immédiatement et plus seulement au
> survol
> - il y a un background sur les images
> - on peut fermer la box pendant son chargement si c’est trop long
>
> --
> Cédric
> Le 9 oct. 2020 à 15:11 +0200, pierre laszczak ,
> a écrit :
>
> Hello,
>
> Super! je viens de tester à l'instant sur contrib et je suis du même avis
> que tcharlss
>
> Une petite suggestion d'UX : pour les galeries, est-ce que c'est possible
>> de mettre les flèches de navigation en position fixe sur les côté (et ce de
>> base, sans avoir à bidouiller les styles) ?
>> Là elles sont collées par-dessus l'image, ce qui fait qu'avec des images
>> de tailles différentes elles changent constamment de place, ce qui rend la
>> navigation à la souris moins facile.
>>
>
> *Il y a un autre soucis sur les connexions lentes, je pense notamment au
> diaporama:*
> -> Une fois qu'une action js est lancée on ne peut pas l'annuler en
> cliquant sur close ou hors de la fancybox! on est obligé d'attendre que la
> requête ajax soit terminée.
>
> Le ven. 9 oct. 2020 à 00:48, nicod_  a écrit :
>
>> Le 07/10/2020 à 23:59, nicod_ a écrit :
>> > Il faudrait pouvoir la faire tester par un·e expert·e accessibilité.
>> >
>> > Peut être Roman, s'il nous lit ici ?
>>
>> Un premier retour de notabene :
>>
>> > Au clavier c'est tout bon (sauf le bouton "fermer" qui n'a pas
>> d'outline perceptible). On cycle dans la popin sans en sortir, pas de perte
>> de focus, etc. Quand on ferme la popin ça remet le focus sur le lien
>> ouvrant. Tout bon.
>> >
>> > Les flèches ne sont affichées qu'au survol, ça n'aide pas
>> l'utilisateur pour voir que la popin est un carrousel (il peut pas deviner
>> tout seul gauche/droite).
>> >
>> > J'essaie de tester bientôt avec mon lecteur d'écran. Mais déjà c'est
>> bien cool.
>>
>> https://toot.cafe/@accessiblestef/105000951846500269
>>
>> Ça sent bon tout ça, en plus elle est vachement plus light et jolie
>> cette box :)
>>
>> --
>> nicod_
>> ___
>> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
>> doc: https://www.spip.net/
>> dev: https://core.spip.net/
>> irc://irc.freenode.net/spip
>>
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-09 Par sujet Cerdic
Hello,

merci pour vos retours.

Les points suivants sont donc corrigés :
- le signalement du focus des boutons close/prev/next est forcé dans la css de 
la box, et non hérité par défaut du site
- les boutons prev/next sont en position fixed dans l’écran et ne bougent donc 
plus. Ils sont par ailleurs visible immédiatement et plus seulement au survol
- il y a un background sur les images
- on peut fermer la box pendant son chargement si c’est trop long

--
Cédric
Le 9 oct. 2020 à 15:11 +0200, pierre laszczak , a 
écrit :
> Hello,
>
> Super! je viens de tester à l'instant sur contrib et je suis du même avis que 
> tcharlss
>
> > Une petite suggestion d'UX : pour les galeries, est-ce que c'est possible 
> > de mettre les flèches de navigation en position fixe sur les côté (et ce de 
> > base, sans avoir à bidouiller les styles) ?
> > Là elles sont collées par-dessus l'image, ce qui fait qu'avec des images de 
> > tailles différentes elles changent constamment de place, ce qui rend la 
> > navigation à la souris moins facile.
>
> Il y a un autre soucis sur les connexions lentes, je pense notamment au 
> diaporama:
> -> Une fois qu'une action js est lancée on ne peut pas l'annuler en cliquant 
> sur close ou hors de la fancybox! on est obligé d'attendre que la requête 
> ajax soit terminée.
>
> > Le ven. 9 oct. 2020 à 00:48, nicod_  a écrit :
> > > Le 07/10/2020 à 23:59, nicod_ a écrit :
> > > > Il faudrait pouvoir la faire tester par un·e expert·e accessibilité.
> > > >
> > > > Peut être Roman, s'il nous lit ici ?
> > >
> > > Un premier retour de notabene :
> > >
> > > > Au clavier c'est tout bon (sauf le bouton "fermer" qui n'a pas 
> > > > d'outline perceptible). On cycle dans la popin sans en sortir, pas de 
> > > > perte de focus, etc. Quand on ferme la popin ça remet le focus sur le 
> > > > lien ouvrant. Tout bon.
> > > >
> > > > Les flèches ne sont affichées qu'au survol, ça n'aide pas  
> > > > l'utilisateur pour voir que la popin est un carrousel (il peut pas 
> > > > deviner tout seul gauche/droite).
> > > >
> > > > J'essaie de tester bientôt avec mon lecteur d'écran. Mais déjà c'est 
> > > > bien cool.
> > >
> > > https://toot.cafe/@accessiblestef/105000951846500269
> > >
> > > Ça sent bon tout ça, en plus elle est vachement plus light et jolie
> > > cette box :)
> > >
> > > --
> > > nicod_
> > > ___
> > > liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> > > doc: https://www.spip.net/
> > > dev: https://core.spip.net/
> > > irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-09 Par sujet pierre laszczak
Hello,

Super! je viens de tester à l'instant sur contrib et je suis du même avis
que tcharlss

Une petite suggestion d'UX : pour les galeries, est-ce que c'est possible
> de mettre les flèches de navigation en position fixe sur les côté (et ce de
> base, sans avoir à bidouiller les styles) ?
> Là elles sont collées par-dessus l'image, ce qui fait qu'avec des images
> de tailles différentes elles changent constamment de place, ce qui rend la
> navigation à la souris moins facile.
>

*Il y a un autre soucis sur les connexions lentes, je pense notamment au
diaporama:*
-> Une fois qu'une action js est lancée on ne peut pas l'annuler en
cliquant sur close ou hors de la fancybox! on est obligé d'attendre que la
requête ajax soit terminée.

Le ven. 9 oct. 2020 à 00:48, nicod_  a écrit :

> Le 07/10/2020 à 23:59, nicod_ a écrit :
> > Il faudrait pouvoir la faire tester par un·e expert·e accessibilité.
> >
> > Peut être Roman, s'il nous lit ici ?
>
> Un premier retour de notabene :
>
> > Au clavier c'est tout bon (sauf le bouton "fermer" qui n'a pas d'outline
> perceptible). On cycle dans la popin sans en sortir, pas de perte de focus,
> etc. Quand on ferme la popin ça remet le focus sur le lien ouvrant. Tout
> bon.
> >
> > Les flèches ne sont affichées qu'au survol, ça n'aide pas  l'utilisateur
> pour voir que la popin est un carrousel (il peut pas deviner tout seul
> gauche/droite).
> >
> > J'essaie de tester bientôt avec mon lecteur d'écran. Mais déjà c'est
> bien cool.
>
> https://toot.cafe/@accessiblestef/105000951846500269
>
> Ça sent bon tout ça, en plus elle est vachement plus light et jolie
> cette box :)
>
> --
> nicod_
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
>
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-08 Par sujet nicod_

Le 07/10/2020 à 23:59, nicod_ a écrit :

Il faudrait pouvoir la faire tester par un·e expert·e accessibilité.

Peut être Roman, s'il nous lit ici ?


Un premier retour de notabene :


Au clavier c'est tout bon (sauf le bouton "fermer" qui n'a pas d'outline 
perceptible). On cycle dans la popin sans en sortir, pas de perte de focus, etc. Quand on 
ferme la popin ça remet le focus sur le lien ouvrant. Tout bon.

Les flèches ne sont affichées qu'au survol, ça n'aide pas  l'utilisateur pour 
voir que la popin est un carrousel (il peut pas deviner tout seul 
gauche/droite).

J'essaie de tester bientôt avec mon lecteur d'écran. Mais déjà c'est bien cool.


https://toot.cafe/@accessiblestef/105000951846500269

Ça sent bon tout ça, en plus elle est vachement plus light et jolie 
cette box :)


--
nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-10-08 Par sujet chanka...@choc0.net

Hello,
c'est classe, hyper simple ça marche tout bien on dirait...
Juste une question : que le titre reste sur l'image tout le temps c'est 
bien ? on peut plus avoir l'image entière sans rien dessus ?
Sinon le svg a des bords transparents, ça fait pas top à 
l'agrandissement, mais je sais pas si c'est à la box de régler ça... 
enfin juste un background opaque sur .lity-content ça aiderait peut-être...



Le 08/10/2020 à 20:42, Cerdic a écrit :
C’est corrigé : il y a un bizarre « height:100% » sur le body sur 
contrib, qui fait que le body est bloqué à la taille de la fenetre, le 
reste étant visible par chance (grace a un overflow pas défini).

Du coup a un moment le navigateur rescroll à 0.

J’ai forcé un overflow:hidden;height:auto; sur le body quand la box 
est ouverte est ça fait le job


--
Cédric
Le 8 oct. 2020 à 17:21 +0200, Cerdic , a écrit :
Oui, je vois ça : sur contrib chaque ouverture de la boite (quel que 
soit le lien) fait scroller le fond de page en haut (on le devine en 
arrière plan à travers l’opacité de la box).


C’est spécifique à contrib ou une interaction malheureuse avec un 
autre plugin JS car je n’ai pas ça sur mon site de test qui est en 
spip-dist+z sans fioriture : le body reste exactement où il est quand 
je clic que un lien et que la box s’ouvre...


--
Cédric
Le 8 oct. 2020 à 17:09 +0200, RealET , a écrit :

Cerdic a écrit le 08/10/2020 à 16:59 :

Bon, voila, contrib tourne avec lity en font et la page de demo est là
https://contrib.spip.net/?page=test-mediabox


Merci Cédric !

Sous Chrome 86 (Win 10)
Les 2 liens
Nouvelle syntaxe, basée sur des data-xx
Une popin inline
Cliquer pour voir | Cliquer pour voir

Et celui juste au dessus scrolle la page tout en haut ce qui fait qu'au
retour, si on avait scroller vers le bas avant d'afficher la popup, le
lien qu'on venait de cliquer n'est plus au même endroit sur l'écran.
Assez déstabilisant.


--
RealET


___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


--

chan

___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-08 Par sujet Cerdic
C’est corrigé : il y a un bizarre « height:100% » sur le body sur contrib, qui 
fait que le body est bloqué à la taille de la fenetre, le reste étant visible 
par chance (grace a un overflow pas défini).
Du coup a un moment le navigateur rescroll à 0.

J’ai forcé un overflow:hidden;height:auto; sur le body quand la box est ouverte 
est ça fait le job

--
Cédric
Le 8 oct. 2020 à 17:21 +0200, Cerdic , a écrit :
> Oui, je vois ça : sur contrib chaque ouverture de la boite (quel que soit le 
> lien) fait scroller le fond de page en haut (on le devine en arrière plan à 
> travers l’opacité de la box).
>
> C’est spécifique à contrib ou une interaction malheureuse avec un autre 
> plugin JS car je n’ai pas ça sur mon site de test qui est en spip-dist+z sans 
> fioriture : le body reste exactement où il est quand je clic que un lien et 
> que la box s’ouvre...
>
> --
> Cédric
> Le 8 oct. 2020 à 17:09 +0200, RealET , a écrit :
> > Cerdic a écrit le 08/10/2020 à 16:59 :
> > > Bon, voila, contrib tourne avec lity en font et la page de demo est là
> > > https://contrib.spip.net/?page=test-mediabox
> > > 
> > Merci Cédric !
> >
> > Sous Chrome 86 (Win 10)
> > Les 2 liens
> > Nouvelle syntaxe, basée sur des data-xx
> > Une popin inline
> > Cliquer pour voir | Cliquer pour voir
> >
> > Et celui juste au dessus scrolle la page tout en haut ce qui fait qu'au
> > retour, si on avait scroller vers le bas avant d'afficher la popup, le
> > lien qu'on venait de cliquer n'est plus au même endroit sur l'écran.
> > Assez déstabilisant.
> >
> >
> > --
> > RealET
> >
> >
> > ___
> > liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> > doc: https://www.spip.net/
> > dev: https://core.spip.net/
> > irc://irc.freenode.net/spip
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-08 Par sujet tcharlss

Supe cool tout ça.

Une petite suggestion d'UX : pour les galeries, est-ce que c'est 
possible de mettre les flèches de navigation en position fixe sur les 
côté (et ce de base, sans avoir à bidouiller les styles) ?
Là elles sont collées par-dessus l'image, ce qui fait qu'avec des images 
de tailles différentes elles changent constamment de place, ce qui rend 
la navigation à la souris moins facile.



Le 08/10/2020 à 17:20, Cerdic a écrit :
Oui, je vois ça : sur contrib chaque ouverture de la boite (quel que 
soit le lien) fait scroller le fond de page en haut (on le devine en 
arrière plan à travers l’opacité de la box).


C’est spécifique à contrib ou une interaction malheureuse avec un 
autre plugin JS car je n’ai pas ça sur mon site de test qui est en 
spip-dist+z sans fioriture : le body reste exactement où il est quand 
je clic que un lien et que la box s’ouvre...


--
Cédric
Le 8 oct. 2020 à 17:09 +0200, RealET , a écrit :

Cerdic a écrit le 08/10/2020 à 16:59 :

Bon, voila, contrib tourne avec lity en font et la page de demo est là
https://contrib.spip.net/?page=test-mediabox


Merci Cédric !

Sous Chrome 86 (Win 10)
Les 2 liens
Nouvelle syntaxe, basée sur des data-xx
Une popin inline
Cliquer pour voir | Cliquer pour voir

Et celui juste au dessus scrolle la page tout en haut ce qui fait qu'au
retour, si on avait scroller vers le bas avant d'afficher la popup, le
lien qu'on venait de cliquer n'est plus au même endroit sur l'écran.
Assez déstabilisant.


--
RealET


___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-08 Par sujet Cerdic
Oui, je vois ça : sur contrib chaque ouverture de la boite (quel que soit le 
lien) fait scroller le fond de page en haut (on le devine en arrière plan à 
travers l’opacité de la box).

C’est spécifique à contrib ou une interaction malheureuse avec un autre plugin 
JS car je n’ai pas ça sur mon site de test qui est en spip-dist+z sans 
fioriture : le body reste exactement où il est quand je clic que un lien et que 
la box s’ouvre...

--
Cédric
Le 8 oct. 2020 à 17:09 +0200, RealET , a écrit :
> Cerdic a écrit le 08/10/2020 à 16:59 :
> > Bon, voila, contrib tourne avec lity en font et la page de demo est là
> > https://contrib.spip.net/?page=test-mediabox
> > 
> Merci Cédric !
>
> Sous Chrome 86 (Win 10)
> Les 2 liens
> Nouvelle syntaxe, basée sur des data-xx
> Une popin inline
> Cliquer pour voir | Cliquer pour voir
>
> Et celui juste au dessus scrolle la page tout en haut ce qui fait qu'au
> retour, si on avait scroller vers le bas avant d'afficher la popup, le
> lien qu'on venait de cliquer n'est plus au même endroit sur l'écran.
> Assez déstabilisant.
>
>
> --
> RealET
>
>
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-08 Par sujet RealET

Cerdic a écrit le 08/10/2020 à 16:59 :

Bon, voila, contrib tourne avec lity en font et la page de demo est là
https://contrib.spip.net/?page=test-mediabox 


Merci Cédric !

Sous Chrome 86 (Win 10)
Les 2 liens
Nouvelle syntaxe, basée sur des data-xx
Une popin inline
Cliquer pour voir | Cliquer pour voir

Et celui juste au dessus scrolle la page tout en haut ce qui fait qu'au 
retour, si on avait scroller vers le bas avant d'afficher la popup, le 
lien qu'on venait de cliquer n'est plus au même endroit sur l'écran.

Assez déstabilisant.


--
RealET


___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-10-08 Par sujet Cerdic
Bon, voila, contrib tourne avec lity en font et la page de demo est là
https://contrib.spip.net/?page=test-mediabox

Les images choisies pour la demo sont les images les plus lourdes et des 
petites images, donc normal que certaines soit possiblement un peu lentes à 
charger.

J’ai désactivé ancre douce aussi, qui foirait le focus sur les liens ouvrant 
une box inline (et qui plus est ne semble plus marcher correctement)

--
Cédric
Le 8 oct. 2020 à 15:48 +0200, nicod_ , a écrit :
> Le 08/10/2020 à 11:10, Cerdic a écrit :
> > Probablement que le mieux serait de le mettre le plugin mediabox_plus
> > sur contrib qui est en 3.3 je crois (en basculant aussi la branche du
> > plugin mediabox), et on aurait la page de démo et on pourrait la tester
> > en conditions réelles
>
> Ça me parait un très bon plan.
>
> --
> nicod_
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-08 Par sujet nicod_

Le 08/10/2020 à 11:10, Cerdic a écrit :
Probablement que le mieux serait de le mettre le plugin mediabox_plus 
sur contrib qui est en 3.3 je crois (en basculant aussi la branche du 
plugin mediabox), et on aurait la page de démo et on pourrait la tester 
en conditions réelles


Ça me parait un très bon plan.

--
nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-10-08 Par sujet Cerdic
Non je pense pas qu’elle soit testable en 3.2

Pour info j’ai vérifié et/ou corrigé les points suivants :

- focus sur le premier élément tabulable (qui est le bouton close)
- 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
- Let me use the left and right arrow keys to step through images in a 
slideshow.
- When I press Esc, close the lightbox.
- 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.
- When the lightbox closes, return keyboard focus to where it was when I opened 
it.

Par ailleurs
- les images sont balisées via un … avec un aria-describedby sur la balise img qui 
pointe sur le figcaption
- le markup de la box utilise   (mais je me demandais si garder ça tout 
le temps ou si dans le cas de visualisation des images un div serait plus 
adapté), avec un title explicite qui mentionne que Echap ferme la box
- tout le contenu derrière est mis en aria-hidden (mais sans wrapper autour, 
donc sans modification du markup qui peut être un problème)

- le déclencheur peut être un lien comme d’hab ou un bouton, c’est à 
l’initiative de celui qui fait le site et ça c’est pas vraiment dans le scope 
du plugin

Probablement que le mieux serait de le mettre le plugin mediabox_plus sur 
contrib qui est en 3.3 je crois (en basculant aussi la branche du plugin 
mediabox), et on aurait la page de démo et on pourrait la tester en conditions 
réelles

--
Cédric
Le 7 oct. 2020 à 23:59 +0200, nicod_ , a écrit :
> Le 07/10/2020 à 15:59, Cerdic a écrit :
> > J’ai donc joué un peu avec lity et plus ça va plus je pense que c’est un
> > bon choix :
> > - la box est très légère et bien codée, tout en étant très facilement
> > extensible, et maintenue
> > - j’ai amélioré l’implémentation dans le plugin
>
> Super nouvelle !
>
> Il faudrait pouvoir la faire tester par un·e expert·e accessibilité.
>
> Peut être Roman, s'il nous lit ici ?
>
> A ton avis, ce serait utilisable sur un SPIP 3.2 ? Si oui, je peux la
> faire tester par Temesis éventuellement.
>
> --
> nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-07 Par sujet nicod_

Le 07/10/2020 à 15:59, Cerdic a écrit :
J’ai donc joué un peu avec lity et plus ça va plus je pense que c’est un 
bon choix :
- la box est très légère et bien codée, tout en étant très facilement 
extensible, et maintenue
- j’ai amélioré l’implémentation dans le plugin 


Super nouvelle !

Il faudrait pouvoir la faire tester par un·e expert·e accessibilité.

Peut être Roman, s'il nous lit ici ?

A ton avis, ce serait utilisable sur un SPIP 3.2 ? Si oui, je peux la 
faire tester par Temesis éventuellement.


--
nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-10-07 Par sujet CSI

Bonjour,

Je l'ai installée dans un projet (pas spip) en remplacement de 
featherlight (que j'avais testé en remplacement de colorbox aussi) et 
oui, c'est plus simple à mettre en oeuvre que featherlight (30min vs 
2h), plus simple à déclarer (sans rien préciser ça détecte image ou 
iframe et même un lien de type otpauth:// qui produit un QRCode qui m'a 
donné du fil à retordre avec featherlight), plus rapide, et plus fiable 
(des fois featherlighjt ne se déclenchait pas) ... bref que du mieux vu 
de mon projet, le seul souci que j'ai eu c'était de déclarer une taille 
aux iframe (j'y arrive en css mais featherlight permet de déclarer un 
data avec la taille du iframe ce qui permet de dimensionner les iframe 
une par une). Mais bon oui ça a l'air un bon choix, même si moi je n'ai 
pas la compétence pour juger l'aspect accessibilité.


Le 07/10/2020 à 15:59, Cerdic a écrit :
J’ai donc joué un peu avec lity et plus ça va plus je pense que c’est 
un bon choix :
- la box est très légère et bien codée, tout en étant très facilement 
extensible, et maintenue
- j’ai amélioré l’implémentation dans le plugin 
https://git.spip.net/spip-contrib-extensions/mediabox_plus et j’ai pu 
assez facilement ajouter la prise en charge ajax et la gestion des 
galeries, ainsi qu’améliorer le markup en gérant le focus (focus sur 
le bouton close à l’ouverture, retour où l’on était à la fermeture), 
le markup (balise  + figure/figcaption avec un 
aria-describedby sur les images)


On a maintenant une prise en charge complète des différents types de 
contenu (image/inline/ajax/iframe) et une prise en charge des galeries 
à l’identique de ce que faisait colorbox (ainsi que la gestion des 
events evidemment)


Ce n’est pas encore tout à fait industriel, il reste un peu 
d’optimisation à faire sur les transitions en mode galerie, et à 
ajouter la configuration comme on avait pour colorbox 
(min/max-width/height et opacité), et quelques traductions à 
compléter, sur les erreurs principalement.


Pour le reste c’est testable avec le plugin mediabox dans sa branche 
dev/mediabox-extensible + le plugin mediabox_plus


--
Cédric
Le 5 oct. 2020 à 17:57 +0200, Cerdic , a écrit :
Oui, tout à fait, je suis (re)tombé dessus ensuite, et elle semble 
avoir bien des qualités aussi en terme d’accessibilité, tout en étant 
très légère.


Petit défaut, elle ne gère pas du tout les galeries, et son 
developpeur considère que c’est hors de son objectif, mais il me 
semble qu’il y a tous les points d’entrée pour faire ça en 
personalisation - et sinon son developpeur a dit qu’il était ok pour 
ajouter des points d’entrées pour le permettre.


Je viens d’intégrer une version dans le plugin proof of concept pour 
progresser dessus
https://git.spip.net/spip-contrib-extensions/mediabox_plus/commit/3983cec76af7a66612074762e26ea84aa7547c60 



--
Cédric
Le 5 oct. 2020 à 15:34 +0200, CSI , a écrit :

Bonjour,

J'avais aussi repéré ça: https://sorgalla.com/lity/ mais j'ai pas 
testé. Se revendique "accessible" aussi mais j'ai l'impression que 
c'est comme les termes "durable", "vert", "illimité", etc ... plus 
beaucoup de matière derrière le discours marketing :-( En tous cas 
ça a l'air léger (7k + 3k), ça fait à peu près tout sauf .. les 
galeries j'ai l'impression.


Le 05/10/2020 à 15:10, Cerdic a écrit :

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



--
Pierre

--
Pierre
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-07 Par sujet Cerdic
J’ai donc joué un peu avec lity et plus ça va plus je pense que c’est un bon 
choix :
- la box est très légère et bien codée, tout en étant très facilement 
extensible, et maintenue
- j’ai amélioré l’implémentation dans le plugin 
https://git.spip.net/spip-contrib-extensions/mediabox_plus et j’ai pu assez 
facilement ajouter la prise en charge ajax et la gestion des galeries, ainsi 
qu’améliorer le markup en gérant le focus (focus sur le bouton close à 
l’ouverture, retour où l’on était à la fermeture), le markup (balise  + 
figure/figcaption avec un aria-describedby sur les images)

On a maintenant une prise en charge complète des différents types de contenu 
(image/inline/ajax/iframe) et une prise en charge des galeries à l’identique de 
ce que faisait colorbox (ainsi que la gestion des events evidemment)

Ce n’est pas encore tout à fait industriel, il reste un peu d’optimisation à 
faire sur les transitions en mode galerie, et à ajouter la configuration comme 
on avait pour colorbox (min/max-width/height et opacité), et quelques 
traductions à compléter, sur les erreurs principalement.

Pour le reste c’est testable avec le plugin mediabox dans sa branche 
dev/mediabox-extensible + le plugin mediabox_plus

--
Cédric
Le 5 oct. 2020 à 17:57 +0200, Cerdic , a écrit :
> Oui, tout à fait, je suis (re)tombé dessus ensuite, et elle semble avoir bien 
> des qualités aussi en terme d’accessibilité, tout en étant très légère.
>
> Petit défaut, elle ne gère pas du tout les galeries, et son developpeur 
> considère que c’est hors de son objectif, mais il me semble qu’il y a tous 
> les points d’entrée pour faire ça en personalisation - et sinon son 
> developpeur a dit qu’il était ok pour ajouter des points d’entrées pour le 
> permettre.
>
> Je viens d’intégrer une version dans le plugin proof of concept pour 
> progresser dessus
> https://git.spip.net/spip-contrib-extensions/mediabox_plus/commit/3983cec76af7a66612074762e26ea84aa7547c60
>
> --
> Cédric
> Le 5 oct. 2020 à 15:34 +0200, CSI , a écrit :
> > Bonjour,
> >
> > J'avais aussi repéré ça:  https://sorgalla.com/lity/  mais j'ai pas testé. 
> > Se revendique "accessible" aussi mais j'ai l'impression que c'est comme les 
> > termes "durable", "vert", "illimité", etc ... plus beaucoup de matière 
> > derrière le discours marketing :-( En tous cas ça a l'air léger (7k + 3k), 
> > ça fait à peu près tout sauf .. les galeries j'ai l'impression.
> >
> > Le 05/10/2020 à 15:10, Cerdic a écrit :
> > > 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
> > >
> > --
> > Pierre
> > ___
> > liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> > doc: https://www.spip.net/
> > dev: https://core.spip.net/
> > irc://irc.freenode.net/spip
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-06 Par sujet JLuc

Le 05/10/2020 à 15:10, Cerdic a écrit :

  * 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


Pour info, voici ce qu'en dit l'un des devs de modaal, interrogé à ce propos :

« While we do have intentions to update the plugin at some stage, it's not a priority for us at the moment and 
unfortunately, I can't put a timeframe on when this may happen.


That said, If you and your team would be interested in continuing the development, this could be a possibility. If this 
is of any interest, please let me know. »


JL

___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-10-05 Par sujet Christian Marget

Bonjour à tous,

Je me permets de m'immiscer dans cette discussion de devs pour un point 
particulier concernant la pagination des galeries.


J'utilise la boucle DATA pour créer une galerie de toutes les images se 
trouvant dans un répertoire donné: ça fait une page de vignettes et la 
mediabox permet de parcourir les images. Petit problème si je pagine les 
vignettes: la Mediabox ne parcourt que celles dont les vignettes sont 
visibles sur la page alors que je souhaiterais qu'elle parcoure toutes 
les images du répertoire. Je conçois que ça pose un problème 
d'interaction entre les vignettes paginées et les photos (afficher une 
photo dont la vignette est hors pagination) mais croyez-vous que ça 
puisse se résoudre? Hormis la solution de ne pas paginer, évidemment...


Bien à vous
Christian

Le 05/10/2020 à 23:31, RastaPopoulos a écrit :

Est-ce qu'on ne devrait pas écrire la liste complète de ce qu'on veut avoir, 
pour comparer qui a le plus (sachant que chaque besoin ne se vaut pas, certains 
sont plus faciles à ajouter à une lib qui le manquerait, alors que d'autres 
sont indispensables à avoir de base) ?

Par ex, parmi d'autre, il me semble qu'il faudrait aussi qu'une ouverture 
(média ou page ou bloc interne) puisse afficher un titre + un descriptif 
(souvent utilisé pour titre et crédit quand c'est pour un média).

- Médias
- Galerie de médias
- Bloc interne
- Iframe
- Accessible au clavier
- Aria comme il faut
- Titre et desc
- Non basée sur des tailles en pixel, responsive
- Events variés (pré ouverture, après chargement, fermeture…)


___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-10-05 Par sujet RastaPopoulos
Le 05/10/2020 à 17:57, Cerdic a écrit :
> Petit défaut, elle ne gère pas du tout les galeries, et son developpeur 
> considère que c’est hors de son objectif, mais il me semble qu’il y a tous 
> les points d’entrée pour faire ça en personalisation - et sinon son 
> developpeur a dit qu’il était ok pour ajouter des points d’entrées pour le 
> permettre.

Est-ce qu'on ne devrait pas écrire la liste complète de ce qu'on veut avoir, 
pour comparer qui a le plus (sachant que chaque besoin ne se vaut pas, certains 
sont plus faciles à ajouter à une lib qui le manquerait, alors que d'autres 
sont indispensables à avoir de base) ?

Par ex, parmi d'autre, il me semble qu'il faudrait aussi qu'une ouverture 
(média ou page ou bloc interne) puisse afficher un titre + un descriptif 
(souvent utilisé pour titre et crédit quand c'est pour un média).

- Médias
- Galerie de médias
- Bloc interne
- Iframe
- Accessible au clavier
- Aria comme il faut
- Titre et desc
- Non basée sur des tailles en pixel, responsive
- Events variés (pré ouverture, après chargement, fermeture…)

-- 
RastaPopoulos

___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-10-05 Par sujet Cerdic
Oui, tout à fait, je suis (re)tombé dessus ensuite, et elle semble avoir bien 
des qualités aussi en terme d’accessibilité, tout en étant très légère.

Petit défaut, elle ne gère pas du tout les galeries, et son developpeur 
considère que c’est hors de son objectif, mais il me semble qu’il y a tous les 
points d’entrée pour faire ça en personalisation - et sinon son developpeur a 
dit qu’il était ok pour ajouter des points d’entrées pour le permettre.

Je viens d’intégrer une version dans le plugin proof of concept pour progresser 
dessus
https://git.spip.net/spip-contrib-extensions/mediabox_plus/commit/3983cec76af7a66612074762e26ea84aa7547c60

--
Cédric
Le 5 oct. 2020 à 15:34 +0200, CSI , a écrit :
> Bonjour,
>
> J'avais aussi repéré ça:  https://sorgalla.com/lity/  mais j'ai pas testé. Se 
> revendique "accessible" aussi mais j'ai l'impression que c'est comme les 
> termes "durable", "vert", "illimité", etc ... plus beaucoup de matière 
> derrière le discours marketing :-( En tous cas ça a l'air léger (7k + 3k), ça 
> fait à peu près tout sauf .. les galeries j'ai l'impression.
>
> Le 05/10/2020 à 15:10, Cerdic a écrit :
> > 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
> >
> --
> Pierre
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-05 Par sujet CSI

Bonjour,

J'avais aussi repéré ça:  https://sorgalla.com/lity/  mais j'ai pas 
testé. Se revendique "accessible" aussi mais j'ai l'impression que c'est 
comme les termes "durable", "vert", "illimité", etc ... plus beaucoup de 
matière derrière le discours marketing :-( En tous cas ça a l'air léger 
(7k + 3k), ça fait à peu près tout sauf .. les galeries j'ai l'impression.


Le 05/10/2020 à 15:10, Cerdic a écrit :

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


--
Pierre
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-10-05 Par sujet Maïeul Rouquette

Le 05/10/2020 à 15:10, Cerdic a écrit :

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...)


cette réflexion me fait penser : y-a-il une obligation/raison (en dehors 
du coup de maintenannce) à avoir un même outil pour les 2 
fonctionnalités (interactions vs galerie) ?

___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-10-05 Par sujet Cerdic
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_ , 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_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-09-22 Par sujet nicod_

Le 22/09/2020 à 14:37, nicod_ a écrit :

Le 21/09/2020 à 19:05, CSI a écrit :

Bonjour,

Autres pistes ? https://humaan.com/modaal/   Modaal is a WCAG 2.0 
Level AA accessible modal window plugin.


Pas mal du tout, ça gère plein de choses nativement.

A confirmer quand même, en France c'est le RGAA qui s'applique, pas le 
WCAG.



Premiers retours sur Modaal par Eric, de Temesis, avec qui je collabore 
sur un projet :



C'est bien mieux à la base, il manque quand même au moins 3 caractéristiques 
techniques importantes qui ne permettent pas actuellement le respect de 
WCAG/RGAA :
* l’élément déclencheur doit être un bouton (ici c'est un lien)
* Sur la modale (le div avec role="dialog") : supprimer aria-selected (aucun sens ici) et 
supprimer tabindex="0" (le focus doit être géré autrement)
* Quand la modale est affiché, des contenus en arrière-plan (tout ce qui n’est pas dans 
le div role="dialog") sont restitués dans les assistances technologiques et il 
est parcouru au clavier.


(pour ça, il y a une technique à repiquer dans les modales de Nicolas 
Hoffmann)



Il y a sûrement aussi d'autres éléments plus mineurs et/ou améliorables.(je 
n'ai pas regardé les aspects transversaux comme les visibilité du focus clavier 
ou autres)

Dans la galerie :
Il s'agit en fait d'un autre composant (le fait qu'il est dans une modale est 
anecdotique). Là, effectivement ça marche au clavier et c'est déjà pas mal, la gestion du 
focus clavier semble correcte dans ce contexte, mais tabindex="0" pour le gérer 
n'est pas une bonne chose (comme plus haut)



Mieux mais pas complètement parfait non plus donc...


--
nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-09-22 Par sujet nicod_

Le 21/09/2020 à 19:05, CSI a écrit :

Bonjour,

Autres pistes ? https://humaan.com/modaal/   Modaal is a WCAG 2.0 Level 
AA accessible modal window plugin.


Pas mal du tout, ça gère plein de choses nativement.

A confirmer quand même, en France c'est le RGAA qui s'applique, pas le WCAG.

--
nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-09-22 Par sujet nicod_

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_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-09-22 Par sujet Cerdic
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 !

--
Cédric
Le 21 sept. 2020 à 18:32 +0200, nicod_ , a écrit :
> Le 21/09/2020 à 14:26, nicod_ a écrit :
> > Le 20/09/2020 à 11:23, Cerdic a écrit :
> > > Mais donc,
> > > ce qui aiderait vraiment,
> > > c’est un test éclairé et comparé sous l’angle de l’accessibilité, de
> > > featherlight et glightbox, pour décider laquelle embarquer par défaut
> > > dans le core...
> >
> > Je peux demander à des experts avec qui je suis en contact.
>
> Un premier retour :
>
> > En regardant rapidement ces 2 solutions, elles sont, toutes les 2, très 
> > éloignées des standards d'accessibilité.
> > Elles possèdent de nombreux problèmes bloquants.
> > Je ne sais pas si vous pourriez les adapter, mais même dans ce cas je ne 
> > pense pas qu'elles constituent une bonne base de départ.
> >
> > D'un point de vue global, je pense qu'il faudrait peut-être partir d'une 
> > ressource qui clame son respect de l'accessibilité (même là il n'y aura pas 
> > forcément que des bonnes choses) car lorsque le sujet n'est pas 
> > explicitement déclaré, il serait miraculeux d'en avoir une prise en compte, 
> > même minimale.
> Voilà voilà... :)
>
> --
> nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-09-21 Par sujet CSI

Bonjour,

Autres pistes ? https://humaan.com/modaal/   Modaal is a WCAG 2.0 Level 
AA accessible modal window plugin.


Le 21/09/2020 à 18:32, nicod_ a écrit :

Le 21/09/2020 à 14:26, nicod_ a écrit :

Le 20/09/2020 à 11:23, Cerdic a écrit :

Mais donc,
ce qui aiderait vraiment,
c’est un test éclairé et comparé sous l’angle de l’accessibilité, de 
featherlight et glightbox, pour décider laquelle embarquer par 
défaut dans le core...


Je peux demander à des experts avec qui je suis en contact.


Un premier retour :

En regardant rapidement ces 2 solutions, elles sont, toutes les 2, 
très éloignées des standards d'accessibilité.

Elles possèdent de nombreux problèmes bloquants.
Je ne sais pas si vous pourriez les adapter, mais même dans ce cas je 
ne pense pas qu'elles constituent une bonne base de départ.


D'un point de vue global, je pense qu'il faudrait peut-être partir 
d'une ressource qui clame son respect de l'accessibilité (même là il 
n'y aura pas forcément que des bonnes choses) car lorsque le sujet 
n'est pas explicitement déclaré, il serait miraculeux d'en avoir une 
prise en compte, même minimale.

Voilà voilà... :)


--
Pierre
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-09-21 Par sujet nicod_

Le 21/09/2020 à 14:26, nicod_ a écrit :

Le 20/09/2020 à 11:23, Cerdic a écrit :

Mais donc,
ce qui aiderait vraiment,
c’est un test éclairé et comparé sous l’angle de l’accessibilité, de 
featherlight et glightbox, pour décider laquelle embarquer par défaut 
dans le core...


Je peux demander à des experts avec qui je suis en contact.


Un premier retour :


En regardant rapidement ces 2 solutions, elles sont, toutes les 2, très 
éloignées des standards d'accessibilité.
Elles possèdent de nombreux problèmes bloquants.
Je ne sais pas si vous pourriez les adapter, mais même dans ce cas je ne pense 
pas qu'elles constituent une bonne base de départ.

D'un point de vue global, je pense qu'il faudrait peut-être partir d'une 
ressource qui clame son respect de l'accessibilité (même là il n'y aura pas 
forcément que des bonnes choses) car lorsque le sujet n'est pas explicitement 
déclaré, il serait miraculeux d'en avoir une prise en compte, même minimale.

Voilà voilà... :)

--
nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-09-21 Par sujet nicod_

Le 19/09/2020 à 17:59, plac...@roxing.net a écrit :

En terme d'accessibilité, je ne vois pas trop où se situent les
différences ; navigation au clavier, label sur les boutons, animations
full CSS, ... c'est idem des deux côtés.


Sauf erreur, je ne vois pas de navigation au clavier sur featherlight en 
mode galerie (https://noelboss.github.io/featherlight/gallery.html ou 
sur ton site d'exemple).


Les items de navigation sont des span sans tabindex, donc inaccessibles 
au clavier.


Et sur ton site, le texte descriptif n'est pas du tout lié à l'image 
(pas d'utilisation de l'attribut alt ni d'attribut aria labelledby ou 
describedby).


Deux mauvais points.

--
nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-09-21 Par sujet nicod_

Le 21/09/2020 à 14:26, nicod_ a écrit :

La page de la Glightbox est assez fournie en exemples pour pouvoir tester :
https://biati-digital.github.io/glightbox/
mais celle de Featherlight est vraimment sommaire :
https://noelboss.github.io/featherlight/


Ah mais je vois qu'il y a une extension pour les galeries :
https://noelboss.github.io/featherlight/gallery.html
ça semble donc complet.

--
nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-09-21 Par sujet nicod_

Le 20/09/2020 à 11:23, Cerdic a écrit :

Mais donc,
ce qui aiderait vraiment,
c’est un test éclairé et comparé sous l’angle de l’accessibilité, de 
featherlight et glightbox, pour décider laquelle embarquer par défaut 
dans le core...


Je peux demander à des experts avec qui je suis en contact.

La page de la Glightbox est assez fournie en exemples pour pouvoir tester :
https://biati-digital.github.io/glightbox/
mais celle de Featherlight est vraimment sommaire :
https://noelboss.github.io/featherlight/

Est ce que tu aurais une démo en ligne de featherlight avec au moins une 
galerie, des images avec descriptions, voir de l'ajax, qui pourrait 
servir de base de test ?


--
nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-09-20 Par sujet Cerdic
Mais donc,
ce qui aiderait vraiment,
c’est un test éclairé et comparé sous l’angle de l’accessibilité, de 
featherlight et glightbox, pour décider laquelle embarquer par défaut dans le 
core...

--
Cédric
Le 20 sept. 2020 à 10:27 +0200, RealET , a écrit :
> Cerdic a écrit le 19/09/2020 à 16:27 :
> > Sur le sujet, je creuse un peu les libs récentes car j’ai un peu de
> > doute sur l’accessibilité de featherlight...
> Je suis tombé sur
> https://github.com/rqrauhvmra/tobi
> (qui a une v2 en beta
> https://github.com/rqrauhvmra/Tobii)
> via https://awesomeopensource.com/project/rqrauhvmra/tobi
> site qui permet de rechercher des projet accessibles :
> https://awesomeopensource.com/projects/a11y
> https://awesomeopensource.com/projects/lightbox
>
> La doc est plein d'Aria ;-)
>
> --
> RealET
>
>
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-09-20 Par sujet Cerdic
Oui j’ai vu tobii aussi mais je l’ai pas retenue car :

• la v1 est archivée, figée, donc pas question de démarrer une nouvelle 
séquence dessus
• la v2 est en beta, et de ce que j’ai testé ça semblait globalement pas très 
fini - mais les seules démos sont sous codepen, ce qui facilite pas le test en 
conditions réeelles.
Mais globalement donc cette v2 me parait encore très jeune et pas rôdée et j’ai 
pas trop envie d’essuyer les plâtres et de se retrouver à maintenir une box en 
plus du reste...


--
Cédric
Le 20 sept. 2020 à 10:27 +0200, RealET , a écrit :
> Cerdic a écrit le 19/09/2020 à 16:27 :
> > Sur le sujet, je creuse un peu les libs récentes car j’ai un peu de
> > doute sur l’accessibilité de featherlight...
> Je suis tombé sur
> https://github.com/rqrauhvmra/tobi
> (qui a une v2 en beta
> https://github.com/rqrauhvmra/Tobii)
> via https://awesomeopensource.com/project/rqrauhvmra/tobi
> site qui permet de rechercher des projet accessibles :
> https://awesomeopensource.com/projects/a11y
> https://awesomeopensource.com/projects/lightbox
>
> La doc est plein d'Aria ;-)
>
> --
> RealET
>
>
> ___
> liste: https://listes.rezo.net/mailman/listinfo/spip-dev
> doc: https://www.spip.net/
> dev: https://core.spip.net/
> irc://irc.freenode.net/spip
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-09-20 Par sujet RealET

Cerdic a écrit le 19/09/2020 à 16:27 :
Sur le sujet, je creuse un peu les libs récentes car j’ai un peu de 
doute sur l’accessibilité de featherlight...

Je suis tombé sur
https://github.com/rqrauhvmra/tobi
(qui a une v2 en beta
https://github.com/rqrauhvmra/Tobii)
via https://awesomeopensource.com/project/rqrauhvmra/tobi
site qui permet de rechercher des projet accessibles :
https://awesomeopensource.com/projects/a11y
https://awesomeopensource.com/projects/lightbox

La doc est plein d'Aria ;-)

--
RealET


___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-09-19 Par sujet CSI

Bonjour,

Autres infos potentiellement pertinentes pour une décision:

Featherlight 9k de js et 2k de CSS, glightbox 53k de js et 14k de css 
(tout minifié tel que téléchargé de Github), par contre glightbox 
intègre un player video plyr et supporte direct les galeries qui 
nécessitent une extension de 4+2k pour featherlight, donc featherlight 
semble quand même plus léger.


Les dernières modifs de featherlight datent de 13 mois, celles de 
glightbox de 6 jours ...


Le 19/09/2020 à 17:59, plac...@roxing.net a écrit :

Le 19/09/2020 à 16:27, Cerdic a écrit :

Sur le sujet, je creuse un peu les libs récentes car j’ai un peu de doute sur 
l’accessibilité de featherlight...

Dans les libs dispos qui font tous les types de contenu et dont la licence 
serait compatible sans ambiguité je trouve 
https://biati-digital.github.io/glightbox/ qui a l’air pas mal du tout, moderne 
et maintenue

Un avis, un retour d'experience ?


J'ai regardé succintement glightbox, qui me semble proposer les mêmes
prestations que featherlight, (avec un thème par défaut plus joli
peut-être).

En terme d'accessibilité, je ne vois pas trop où se situent les
différences ; navigation au clavier, label sur les boutons, animations
full CSS, ... c'est idem des deux côtés.
Si tu as un exemple en tête plus précis Cédric...

En terme de suivi, les deux projets semblent avoir atteint une certaine
maturité à en croire leur auteur respectif ; la liste des
fonctionnalités semblent figée.

Pour les chiffres, on est dans les mêmes proportions (featherlight ayant
quelques années de plus).

Featherlight : 95 watches | 2k stars | 293 forks
Glightbox :  11 watches | 459 stars | 74 forks

Donc, pour ma part et un peu naivement, pas moins de raison de choisir
l'une par rapport à l'autre.

Pour les curieux qui souhaitent voir une implémentation de FL :
https://maisonmusy.fr/armor-lux-femme

--
Pierre
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-09-19 Par sujet placido
Le 19/09/2020 à 16:27, Cerdic a écrit :
> Sur le sujet, je creuse un peu les libs récentes car j’ai un peu de doute sur 
> l’accessibilité de featherlight...
> 
> Dans les libs dispos qui font tous les types de contenu et dont la licence 
> serait compatible sans ambiguité je trouve 
> https://biati-digital.github.io/glightbox/ qui a l’air pas mal du tout, 
> moderne et maintenue
> 
> Un avis, un retour d'experience ?


J'ai regardé succintement glightbox, qui me semble proposer les mêmes
prestations que featherlight, (avec un thème par défaut plus joli
peut-être).

En terme d'accessibilité, je ne vois pas trop où se situent les
différences ; navigation au clavier, label sur les boutons, animations
full CSS, ... c'est idem des deux côtés.
Si tu as un exemple en tête plus précis Cédric...

En terme de suivi, les deux projets semblent avoir atteint une certaine
maturité à en croire leur auteur respectif ; la liste des
fonctionnalités semblent figée.

Pour les chiffres, on est dans les mêmes proportions (featherlight ayant
quelques années de plus).

Featherlight : 95 watches | 2k stars | 293 forks
Glightbox :  11 watches | 459 stars | 74 forks

Donc, pour ma part et un peu naivement, pas moins de raison de choisir
l'une par rapport à l'autre.

Pour les curieux qui souhaitent voir une implémentation de FL :
https://maisonmusy.fr/armor-lux-femme
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip


Re: [spip-dev] Refonte Mediabox [wip]

2020-09-19 Par sujet Cerdic
Sur le sujet, je creuse un peu les libs récentes car j’ai un peu de doute sur 
l’accessibilité de featherlight...

Dans les libs dispos qui font tous les types de contenu et dont la licence 
serait compatible sans ambiguité je trouve 
https://biati-digital.github.io/glightbox/ qui a l’air pas mal du tout, moderne 
et maintenue

Un avis, un retour d'experience ?

--
Cédric
Le 18 sept. 2020 à 22:20 +0200, pierre laszczak , a 
écrit :
> Super merci!
>
> @nicod_  Oui ça fonctionnait bien et c'était déja compatible avec le markup 
> existant (z-bloc ajax, iframe html... toussa) et les class css mediabox qui 
> déclenchaient / definissaient  les galeries
>
> Dans le privé le seul soucis constaté c'était les maj  successives de plugin 
> ou les installations par lots qui ne s'affichaient pas dans la boite modal. 
> Pour le reste c'était plutôt niquel.
>
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-09-18 Par sujet pierre laszczak
Super merci!

@nicod_   Oui ça fonctionnait bien et c'était déja
compatible avec le markup existant (z-bloc ajax, iframe html... toussa) et
les class css mediabox qui déclenchaient / definissaient  les galeries

Dans le privé le seul soucis constaté c'était les maj  successives de
plugin ou les installations par lots qui ne s'affichaient pas dans la boite
modal. Pour le reste c'était plutôt niquel.
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip

Re: [spip-dev] Refonte Mediabox [wip]

2020-09-18 Par sujet nicod_

Le 18/09/2020 à 20:26, Cerdic a écrit :

Hello,

j’ai donc lancé le chantier de refonte de la mediabox en m’inspirant 
très fortement de ce qu’a fait Placido que je remercie donc pour sa 
contribution et la mise a disposition de son code dans lequel j’ai 
allègrement pioché.


Yay, merci à tous les deux pour le boulot !

Je bouge jusqu'à lundi mais j'ai hâte de tester :)

On peut charger des fragments de html, des trucs en ajax ?

--
nicod_
___
liste: https://listes.rezo.net/mailman/listinfo/spip-dev
doc: https://www.spip.net/
dev: https://core.spip.net/
irc://irc.freenode.net/spip