Carousel - ordre de tabulation et focus des controles

Clararigaud commented 4 weeks ago

Block frise chronologique :

12.8 - Majeur : Absence de cohérence de l’ordre de tabulation, à l'activation d'un bouton de navigation, le focus clavier reste sur ce bouton

[ ] A l'activation d'un bouton de navigation, positionner le focus clavier sur le nouveau bloc article.timeline-event.carousel__slide is-current affiché

12.8 - Majeur : Absence de cohérence de l’ordre de tabulation, après activation d'une flèche de navigation, le focus clavier reste sur cette flèche

12.8 - Majeur : Absence de cohérence de l’ordre de tabulation, les blocs article.post.portrait non visibles sont atteignables au clavier

[ ] - Après activation d'une flèche de navigation, positionner le focus clavier sur la nouvelle slide affichée
[ ] - Afficher à l’écran en intégralité le bloc article.post.portrait lorsqu'il reçoit le focus du clavier.

Clararigaud commented 3 weeks ago

Pour l'instant j'ai remis le focus sur les fleches. Le fonctionnement du carousel frise chronologiques et actualités est basé sur cet exemple : https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/?moreaccessible=false

Clararigaud commented 1 day ago

[ ] masquer les <article> / <figure> /<li>non ou partiellement visibles avec un aria-hidden="true" (absent ou à false quand totalement visible)
[ ] rendre non focusable les liens dans les <article> / <figure> / <li> non ou partiellement visibles avec un tabindex="-1" (absent ou à 0 quand totalement visible)
[ ] gérer le focus à l'activation des boutons < et > en bougeant sur l'article / figure <li> qui devient visible ( à noter le <li> sera à remplacer par un <div>)
[ ] supprimer les attributs aria-live, aria-atomic, role, aria-roledescription et aria-label dans le composant - attention il pourra etre nécessaire d'avoir un aria-describedby sur les boutons < et > pour associer un titre au composant et permettre ainsi de le distinguer quand il y en a plusieurs dans une meme page

Cas avec tabulation

[ ] masquer les <figure> non ou partiellement visibles avec un aria-hidden="true" (absent à false quand totalement visible)
[ ] gérer le focus à l'activation des bouton/tab en bougeant sur le figure qui devient visible
[ ] supprimer les attributs aria-live, aria-atomic, role, aria-roledescription et aria-label du composant
[ ] ajouter un intitulé explicite dans les bouton / tab exemple "citation 1" "citation 2" - attention il pourra etre nécessaire d'avoir un aria-describedby sur ces boutons pour associer un titre au composant et permettre ainsi de le distinguer quand il y en a plusieurs dans une meme page
[ ] ajouter un aria-current="true" sur le bouton / tab actif