Enterprise: Accessibilité - Besoin d'une image de profil tabulaire

@tmcconechy ressemble à l'exemple que nous pointons vers un Blockgrid. L'API de sélection prend-elle déjà en charge l'état de focus ?

Donc, en pensant à ces classes image-sm, etc., nous ajoutons un état de focus autour de celui-ci et ajoutons un tabindex et nous assurons qu'il y a du texte alternatif. De plus, les deux autres exemples, car votre grille de blocs de droite a une API de sélection / focus que nous pourrions utiliser.

Alors corrigez les trois :
http://master-enterprise.demo.design.infor.com/components/images/example-photos.html -> ajouter l'état du focus et la balise alt
http://master-enterprise.demo.design.infor.com/components/images/example-index.html -> ajouter l'état du focus et la balise alt
http://master-enterprise.demo.design.infor.com/components/images/example-image-list.html -> utilisez les classes d'images (qui auront une balise alt et un état de focus) ou comme vous l'avez dit le faire fonctionner avec l'API de grille de blocs ?

Après avoir relu un peu, je ne suis pas sûr que changer nos classes CSS d'affichage pour les images soit la bonne solution. Nous avons l'API Blockgrid pour la liste des images qui peuvent gérer la sélection et la navigation au clavier, s'il y a une liste d'éléments à sélectionner. En ce qui concerne les images autonomes, je ne pense pas que nous devrions les rendre toutes focalisables avec la gestion de l'État. Les images ne sont pas des composants de formulaire par défaut, nous ne devrions donc pas modifier ces valeurs par défaut, sauf dans des cas spécifiques.

@508it , n'est-ce pas quelque chose qui pourrait être résolu en ajoutant simplement un tabindex à l'image que vous devez rendre focalisable ? Y a-t-il des fonctionnalités supplémentaires que vous attendez ? Sinon, l'ajout d'un tabindex dans vos modèles HTML ajoutera également un état de sélection de navigateur par défaut, qui devrait couvrir le cas.

Sur la page de l'application, c'est une image de profil. Je n'aurais probablement pas dû lier tout ce dossier car cela causait de la confusion. Ce qu'ils voulaient, c'était une seule image qui est une photo de profil. Donc une classe/style pour l'état du focus (quand ils y ajoutent un tabindex). Pour le moment, l'ajout d'un tabindex n'ajoutera aucun style.

Donc, assurez-vous surtout que http://master-enterprise.demo.design.infor.com/components/images/example-index.html fonctionnera s'il y a un tabindex dessus. Mais en boucle dans les autres pages.

OK je vois. Dans ce cas, certainement pas grand chose à ajouter. Je ne voyais aucun état de mise au point manquant sur aucune de ces images lors de l'ajout d'un tabindex :

Chrome

Firefox

Peut-être que le rendre plus prononcé sur FF est la clé.

C'est vrai ou je pensais que c'était le même que nos états de focus d'entrée. Et en général, assurez-vous que les exemples ont tous des balises alt et qu'ils fonctionnent bien de manière accessible.

Si nous le pouvons, faites un mixin "focus", puis refactorisez le css pour inclure ces styles partout. De cette façon, si nous modifions l'état du focus à un endroit, cela le change partout.

Nous avons une variable sass pour cela en fait https://github.com/infor-design/enterprise/blob/master/src/core/_config.scss#L28 ou au moins une partie de celle-ci mais cela pourrait être nettoyé (c'est à la fois la boîte-ombre et la bordure autour)

Échec du contrôle qualité. Focus ne fonctionne pas dans le navigateur MacOS Mojave Firefox.

Vraiment bizarre...

• sur mon mac (Mojave + Firefox 67), cela fonctionne parfaitement.
• une pile de navigateur (Mojave + Firefox 67) je vois que rien ne peut être concentré.

Je ne sais pas ce que nous pouvons faire.

Quel OS utilisez-vous dans Bs?

Mac (Mojave + Firefox 67) -> c'est donc le même système d'exploitation et le même navigateur que ceux que j'utilise actuellement. J'ai également essayé + et moins quelques versions de FF sur browserstack et ne semblent pas fonctionner.

Je voudrais que Landmark, peut-être @pwpatton et @508, testent cela et confirment que cela fonctionne pour eux. Si c'est le cas, nous l'attribuerons au problème BS.

• [x] Approuvé par @pwpatton
• [ ] Approuvé par @508it

Cela semble lié à la seule page tho. http://master-enterprise.demo.design.infor.com/components/images/example-index.html car http://master-enterprise.demo.design.infor.com/components/button/example-index. html fonctionne.

Attends je sais ce que c'est. C'est un paramètre mac http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/

Vous ne pourrez donc pas configurer cela sur Mac BS. Donc, BS ne fonctionnera pas, mais je pense que c'est tout à fait correct car c'est la configuration utilisée par mac - donc c'est hors de notre contrôle.

revenir pour retester ou confirmer comme terminé - malheureusement, vous voulez pouvoir tester cela sur mac sur browserstack

Nous avons testé en utilisant les paramètres par défaut sur un mac et l'option "tous les contrôles" répertoriée ci-dessus et cela échoue toujours. Le problème est qu'il existe une option pour parcourir/effacer l'image qui peut être sélectionnée à l'aide d'une souris, mais ne peut pas être sélectionnée à l'aide d'un clavier.

A-t-il un index de tabulation dans le DOM @508it ? Ma suggestion serait que ce point de repère n'ait pas encore mis en œuvre cela. Mais vous pouvez tester sur des pages sur http://master-enterprise.demo.design.infor.com/components/images

@tmcconechy Ce n'est pas le cas. Le lien que vous avez fourni le fait et il passe.

http://localhost :4000/components/images
QA passé sur tous les navigateurs. Au début, le focus de l'onglet ne fonctionne pas sur mon Mojave Firefox 67 même après avoir appliqué Tous les contrôles dans les Préférences Système, mais l'astuce about:config a fonctionné pour moi, https://stackoverflow.com/questions/11704828/how-to-allow- clavier-focus-de-liens-dans-firefox

Avons-nous besoin de l'approbation de @pwpatton pour déplacer cela vers Terminé ?

Alors, que manque-t-il exactement dans le repère ?

Pour info : @vonnyw

@pwpatton assurez-vous simplement d'utiliser les classes comme image-sm ou image-md et ajoutez un tabindex="0" . Ensuite, vous aurez un état de mise au point et l'image pourra être mise au point.

@brianjuan vient de passer à fait

Changer le code pour avoir un tabindex=0 corrige en fait le point de repère.

L'index de tabulation fonctionne mais nous n'avons pas de style focalisable disponible pour les images de taille personnalisée. Dans Landmark, nous dimensionnons nous-mêmes les images sur la base des définitions LPL.
Demander une simple classe image-auto qui serait placée sur l'élément img pour obtenir le style focalisable trouvé dans cet exemple http://master-enterprise.demo.design.infor.com/components /images/exemple-index.html

Juste pour clarifier.

1. ajoute une classe image-auto sans hauteur ni largeur et a le code de focus. cela utilisera la taille de l'image
2. ajoutez-le à la page d'exemple http://localhost :4000/components/images/example-index.html
3. Je ne sais pas non plus pourquoi nous avons fait cela sur une division parent. cela devrait fonctionner directement sur la balise d'image.

<div class="image-lg">
   <img src="http://placehold.it/300x350/999999/FFFFFF" alt="image-md 300x350" tabindex="0">
</div>

<~--Instead of-->

<img class="image-lg"src="http://placehold.it/300x350/999999/FFFFFF" alt="image-md 300x350" tabindex="0">

Échec du déplacement de ce ticket vers le contrôle qualité. L'accent n'est pas visiblement sur les images de l'espace réservé.

-MAC FF

• URL : http://master-enterprise.demo.design.infor.com/components/images/example-index.html?theme=soho&variant=light&colors=2578a9
• Onglet tout au long de la page. La mise au point n'est visible que sur les images grises.
• Veuillez voir la capture d'écran ci-jointe.
  

Je pense que la question ici est : "Une image d'espace réservé devrait-elle être tabbable/focusable ?"

Je pense que @davidcarlsonberg est également une "image". Le cas d'utilisation est que l'image est manquante, ils peuvent donc utiliser cet espace réservé à la place. Mais il pourrait y avoir un cas où il y a un menu attaché ou quelque chose qui nécessiterait qu'il soit focalisable.

Il s'agit à la fois d'un type: bug (problème d'état du focus) et d'un type: demo-app bug (problème de tabindex sur les pages d'exemple).

http://localhost :4000/components/images/example-index.html
Les espaces réservés sont désormais tabulables/focusables. Je viens de remarquer que dans Mac Firefox, les images ne sont pas cliquables mais peuvent être focalisées à l'aide de la touche de tabulation, même après avoir défini les Préférences Système et about:config.

Malheureusement, je doute que nous puissions faire quoi que ce soit pour que Firefox ait un comportement différent. Je suggère donc que nous ignorions cela pour l'instant.

Got it @tmcconechy , va maintenant le déplacer vers Done et retestera une fois la version bêta déployée.