Les meilleurs développeurs JavaScript freelances sont sur Codeur.com

Amélioration d'un script JS (navigation au clavier)

 Terminé·Moins de 500 €·6 offres·648 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

Le profil du client est reservé aux prestataires abonnés

Créer un compte

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

Publier un projet similaire

Projet réalisé par Alexis G.

Alexis G.
PERPIGNAN, 66000

Chaque jour, des centaines de clients utilisent Codeur.com pour trouver un prestataire. Créez votre compte dès maintenant, remplissez votre profil et trouvez de nouveaux clients.

Trouver des nouveaux clients

Votre navigateur Web n’est plus à jour. Il ne permet pas d’afficher correctement le site Codeur.com.
Nous vous invitons à mettre à jour votre navigateur ou à utiliser un autre navigateur plus récent.