[Résolu] Passer le focus au suivant

Bonjour à tous
J'ai une <form> qui contient plusieurs <input>
Avec le clavier, quand j'appuie sur Tab le focus passe au <input> suivant.

Pour faire la même chose par programme, j'ai dû développer pas mal de code pour
1) créer la table des <input>
2) aller chercher par programme l'entrée suivante dans la table
3) faire un .focus() sur cet élément.

J'ai du mal à croire qu'il n'existe pas de méthode plus simple pour réaliser la même chose !

J'ai essayé en vain :

const tabEvent = new KeyboardEvent('keydown', {key: 'Tab'});
currentNode.dispatchEvent(tabEvent);

Merci de ta réponse
Ce que tu proposes (et que j'ai fait) ne répond pas au problème.
On passe de tabindex=n à tabindex=n+1 en entrant "tab" au clavier.
Ce que je veux c'est passer au suivant par programme et sans faire tab.
J'ai essayer de simuler l'entrée du tab par

const tabEvent = new KeyboardEvent('keydown', {key: 'Tab'});
currentNode.dispatchEvent(tabEvent);

mais ça n'a rien donné, d'où ma question.

Ah effectivement, j'avais mal compris le "par programme"
Modifié par JENCAL (02 Apr 2024 - 14:30)

Bonjour,

j' en rêverais pour tester l'accessibilité au clavier mais pour des raisons de sécu, c'est impossible : un script malveillant aurait une bien trop grande liberté... (seul un programme externe au navigateur peut faire ça...)

Entre autres solutions, celle de Kitty Giraudel prend en compte un grand nombre de cas de façon assez élégante :
* ces sélecteurs-là : https://github.com/KittyGiraudel/focusable-selectors/blob/main/index.js
* utilisés dans ces fonctions utilitaires : https://github.com/KittyGiraudel/a11y-dialog/blob/main/src/dom-utils.ts
* voir aussi le README du 1er lien qui fait référence à focus-trap/tabbable

Salut,

Y'aurait pas moyen de faire un `.querySelectorAll()` sur tous les inputs cibles, puis 'd'appliquer un `.focus()` successif sur chacun des items du tableau ainsi obtenu, séparés par une temporisation ? C'est une idée qui marcherait à mon avis.

Edit : je viens de voir le post de Felipe, considérez que je n'ai rien dit...
Modifié par Olivier C (02 Apr 2024 - 15:48)

Bonjour,

PapyJP a écrit :
J'ai essayer de simuler l'entrée du tab par

const tabEvent = new KeyboardEvent('keydown', {key: 'Tab'});
currentNode.dispatchEvent(tabEvent);

mais ça n'a rien donné, d'où ma question.

Lorsqu'un événement est généré via js, il a une propriété qui s'appelle isTrusted qui vaut false, et si l'on veut qu'une action soit exécutée lorsque cet évènement est "dispatché", il faut la programmer et l'ajouter à un élément via un element.addEventListener(). Sinon, même si l'évènement est effectivement "dispatché", rien ne se produira.

Si l'évènement est généré via une action de l'utilisateur, la propriété isTrusted de l'évènement vaut true, et des actions "par défaut" peuvent être exécutées par le navigateur, comme par exemple un changement d'élément ayant le focus quand on presse la touche "Tab".

Voir https://developer.mozilla.org/fr/docs/Web/API/Event/isTrusted

La propriété isTrusted est en lecture seule évidemment.

Tout ça a comme conséquence qu'on ne peut pas en théorie changer le focus d'un élément en se contentant de "dispatcher" un évènement 'keydown' ayant key="Tab".

En pratique, il est possible que certains y arrivent quand même, mais via un coup de bol exploitant un bug des navigateurs, et sans aucune assurance que ce soit pérenne.

Il faut donc faire la liste des éléments pouvant prendre le focus (plus ou moins complexe selon le contenu de la page), déterminer celui qui a le focus dans cette liste, et donner le focus au suivant. C'est ce que tu fais déjà si j'ai bien compris et tu ne peux pas y échapper.

Amicalement,
Modifié par parsimonhi (02 Apr 2024 - 17:20)

Merci de l'explication.
Je mets "résolu" même si ce n'est pas vraiment le cas