Les meilleurs développeurs JavaScript freelances sont sur Codeur.com
Terminé·Moins de 500 €·6 offres·683 vues·9 interactions
Bonjour,
Je recherche une personne à l'aise avec Javascript pour améliorer / corriger un script existant.
Pour des besoins d'accessibilités, nous devons rendre la navigation au clavier totalement fonctionnelle au sein d'une modale.
La touche "Tab" permet de sélectionner l'élément suivant dans le DOM.
"Espace" ou "Entré" permet d'ouvrir la modale (lorsque le bouton est focus par exemple). Si le bouton "close" est focus, cela fermera la modale.
Les flèches gauche / droite permettent de changer d'onglet (dans la 2eme modale).
Tout ceci fonctionne déjà, vous pouvez déjà tester les comportements sur ce codepen : [URL visible pour les membres Pro]
Le problème survient seulement lorsque nous ajoutons des onglets au sein d'une modale (cliquez sur le bouton "ouvrir modal avec onglets" pour tester).
Dans ce cas particulier, le comportement devrait être légèrement différent.
Si nous sommes dans l'onglet 1 (Avatar), la touche tab devrait sélectionner le 1er élément au sein de cet onglet et non pas l'onglet suivant. Le focus devrait donc se faire directement sur le bouton "Valider".
Si nous sommes dans le second onglet (initiales), la touche tab devrait aussi focus le bouton "Valider".
Sur l'onglet 3 (photo perso), la touche tab devrait focus le prochain élément "focusable", c'est à dire lien 1.
C'est dû au fait que nous ajoutons au sein de la variable "focusables" (ligne 11), tous les éléments qui doivent être focusables au sein d'une modale (déterminés ligne 10). Cela va donc itérer et ajouter tous ces éléments dans un tableau. La touche "Tab" passera donc à l'index i + 1 au sein de ce tableau. Mais le fait d'ajouter des onglets fait que cette logique ne peut pas fonctionner de cette façon (je pense).
Afin de mieux comprendre le comportement que devrait avoir un onglet via le clavier, je vous suggère de consulter ce lien sur lequel vous trouverez un exemple concret : [URL visible pour les membres Pro] Dans les sources de la page, vous pourrez aussi trouver le code JS si cela peut vous donner de l'inspiration.
Le but sera donc de corriger / améliorer le script existant sans pour autant casser la logique de base qui fonctionne parfaitement (cf le bouton "ouvrir modale simple").
Merci par avance.
Budget indicatif : Moins de 500 €
Publication : 06 avril 2022 à 10h52
Profils recherchés : Développeur JavaScript freelance
6 freelances ont répondu à ce projet
5 propositions de devis en moins de 2h
Montant moyen des devis proposés : 200 €
Estimation du délai : 1 jour
Projet réalisé par Alexis Grau