Double touch bug sur IE Touch dans IE10-IE11 (les liens doivent être tapés deux fois)

Question

J'ai été confronté à ce problème sur IE11 Mobile (Lumia 520 Phone) sur un menu de navigation existant, où chaque lien dans mes sous-menus ne tirait pas un cliquez sur, au premier clic.

Ce fiddle repro est un menu de navigation partiel, accessible à partir d'un échantillon WAI app menu.

Si vous le testez sur IE10 ou IE11 Mobile ou Touch, vous obtiendrez que aucun des liens de sous-menu ne fonctionne.

Ils doivent être cliqués deux fois pour déclencher les événements de clic.

Pourquoi est-ce?

Answer 1

Ce bogue est le résultat d'une fonctionnalité de "help simulate hover on touch-enabled devices" qui a été déployée à partir de IE10-11 pour Touch. En bref, ce qui cause et nécessite le double tapage est aria-haspopup=true comme niveau du sous-menu élément parent. À cause de cela, IE Touch suppose à tort que tous ces liens sont eux-mêmes basculer et les traiter comme tels. Je noterai également que pour des raisons similaires, iOS Safari a sa propre façon de traiter elements with “:hover[s] that either hides or shows another element using visibility or display”.

Comme expliqué sur MSDN de Internet Explorer 10 Samples and Tutorials:

Alternativement, Internet Explorer 10 ajoute un nouveau comportement à la propriété aria-haspopup existants pour simuler en vol stationnaire sur des éléments de page avec un contenu interactif caché.

La question est que si elle avait été conçue pour être utile, que la mise en œuvre repose sur une lecture incomplète et quelque peu erronée de ce que aria-haspopup est, et ce qu'il est censé faire.

1. aria-haspopup est techniquement une propriété (et non un état). Cela signifie que IE a placé un comportement tactile sur un élément qui n'est pas censé changer au moment de l'exécution. À moins qu'un contexte réactif n'exigerait peut-être un tel changement; aria-haspopup='true' doit rester true même si l'élément contextuel est affiché. L'état du commutateur étant aria-expanded à la place.

2. Le concept ne fonctionne que pour le MSDN example d'aria-haspopup tel qu'implémenté dans ce didacticiel. c'est-à-dire Siaria-haspopup=true est placé sur le bouton à bascule lui-même, cette fonction IE Touch fonctionnera comme prévu. Cependant si les attributs aria-haspopup=true est placé au niveau parent comme mon repro, ou comme un menu d'application plus traditionnel, selon ce W3C/WAI example, c'est un problème.

Les solutions pour aller autour de ce bug sont, soit de ne pas utiliser aria-haspopup=true sur des éléments parents en raison de IE10-11 Touch (qui aspire l'accessibilité), ou le supprimer de toucher activé IE10/IE11, que ce soit sur la côté serveur ou avec Javascript en conséquence.