Sur Gmail, pourquoi le champ "À" ne peut-il pas être cliqué avec javascript?

Question

Je construis un outil d'accessibilité qui aide les personnes à mobilité réduite à écrire des e-mails, donc j'ai besoin du focus programmatique sur le champ "À" (le premier champ dans la fenêtre de composition de Gmail).

J'ai essayé diverses combinaisons des actions suivantes dans le panneau Chrome DevTools, sur l'élément textarea et son parent. Rien ne semble le mettre au premier plan.

setTimeout(() => {
    let el = document.querySelector('*[name="to"]');
    el.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}));
    el.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}));
    el.focus();
    el.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
    el.click();
    console.log('done')
}, 5000)

Voici un exemple du balisage pertinent :

            CcCc Cci

Answer 1

Lorsque vous n'êtes pas concentré, les champs "À", "Cc" et "CCI" de la fenêtre de composition de Gmail sont recouverts par un autre champ intitulé "Destinataires" :

Ce champ "Destinataires" a un gestionnaire d'événements de focus qui le masque automatiquement, affiche les champs "À", "Cc" et "CCI" et transfère le focus vers l'un d'eux. Pour activer le gestionnaire programmé, vous devez d'abord localiser le champ "Destinataires" et envoyer un événement de focus. Le code suivant a fonctionné pour moi dans la console de Chrome, bien que je suspecte que l'ID que j'ai utilisé ne soit peut-être pas stable :

let recipients = document.getElementById(':oa');  // pas sûr si cet ID change
recipients.dispatchEvent(new FocusEvent('focus'));

(Une fois qu'au moins une adresse e-mail a été saisie dans les champs "À" / "Cc" / "CCI", l'apparence du champ "Destinataires" change, masquant le libellé et affichant à la place les adresses des destinataires. Cependant, le même code semble toujours fonctionner pour activer le gestionnaire d'événements de focus.)

---

Ps. L'ID du nœud avec le gestionnaire de focus semble en effet changer. Je ne sais pas comment le localiser de manière fiable — le code HTML n'offre vraiment pas grand-chose pour accrocher un sélecteur fiable :

  Destinataires

Vous pourriez devoir recourir à des manipulations XPath pour le localiser en utilisant le texte de libellé, comme ceci :

let recipients = document.evaluate("//div[text()='Destinataires']/..", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

Mais même cela ne fonctionnera que lorsque aucun destinataire n'aura été saisi (quand il y en a, le libellé "Destinataires" est remplacé par la liste des destinataires), et il est également susceptible de ne pas fonctionner si la langue de l'interface de l'utilisateur n'est pas en anglais. :(