[Résolu] Problème de focus sur Webkit (liens d'accès directe)

Bonjour,
un bug a été reporté depuis 2008 (par Aurélien/Goetsu) ici https://bugs.webkit.org/show_bug.cgi?id=17450
(lorsque l'on navigue au clavier via la touche tab et qu'on valide le lien d'accès direct, Chrome
descend sur l'id ciblé mais le tab suivant ne se place pas dessus.
Ce bug ne semble toujours pas être résolu.
Un dev sur Webaim a proposé une solution en ajoutant un tabindex="-1" sur l'élément cible mais ça ne fonctionne pas.
Donc si quelqu'un connait une solution (même en JS), je suis preneur.
Modifié par Hermann (25 Jun 2012 - 23:19)

Hello,

De mémoire, le tabindex=-1 permet juste de rendre l'élément capable de recevoir le focus programmatiquement (c'est à dire en JavaScript), tandis que le tabindex=0 le rend capable de recevoir le focus programmatiquement et au clic, et la place dans la liste des éléments auxquels ont peut accéder via la tabulation.

Donc un tabindex=-1 est un bon début mais ne suffit pas. Il faudrait rajouter en JavaScript un element.focus(), où element est une référence à l'élément ciblé (pas celui cliqué).

Un exemple d'implémentation en JavaScript (testé dans la dernière version stable de Chrome):
http://fvsch.com/code/bugs/webkit-inpage-focus/test1.html

Le code JS utilisé est:

(function () {
  var links = document.querySelectorAll('a.internal');
  for (var n=0, limit=links.length; n<limit; n++) {
    var target = document.querySelector(links[n].hash);
    if (target) {
      // tabindex to either -1 or 0 makes the target element
      // able to receive focus
      target.setAttribute('tabindex', '-1');
      links[n].addEventListener('click', function(event) {
        // Manually activate focus on target element
        document.querySelector(this.hash).focus();
      }, false);
    }
  }
})();

Une implémentation plus élégante et versatile observerait les changements de hash de l'URL plutôt que les clics sur les liens internes. Ça permettrait de gérer tout changement de hash sans changement de page, et même peut-être le premier chargement de la page avec chargement d'un hash précis.
J'écrirais bien le script correspondant mais là j'ai pas le temps.

Et, bien sûr, il faudrait tester dans d'autres navigateurs, et vérifier qu'a minima le script ne provoque pas d'erreur JS stoppant l'exécution d'autres scripts. (Points posant des problèmes de compatibilité à l'intérieur du script: document.querySelectorAll() dans IE<8, element.hash dans IE<9, et peut-être element.focus() dans certains navigateurs.)
Modifié par fvsch (25 Jun 2012 - 19:06)

Merci Florent t'es un chef ! J'en espérais pas tant.
Je mettrais ça en place demain.
Un tabindex > ou = à 0 permet également de rendre focusables des éléments qui ne le sont pas par défaut (div...), c'est invalidant en HTML4 mais pas en HTML5.