Rendre un élément HTML non focalisable

Question

Est-il possible de créer un élément HTML non focalisable ?

Je comprends que une liste d'éléments qui peuvent recevoir l'attention peuvent être définis et qu'un utilisateur peut naviguer à travers ces éléments en appuyant sur une touche Tab clé. Je constate également qu'il appartient au navigateur de contrôler cela.

Mais il existe peut-être un moyen de rendre certains éléments non focalisables, par exemple si je veux que l'utilisateur saute un certain nombre d'éléments. <a> en appuyant sur une touche Tab .

Answer 1

Pour les éléments qui ne doivent pas être focalisés sur la tabulation, vous devez indiquer l'indice de tabulation comme une valeur négative.

Answer 2

J'ai utilisé focusable="false" parce que tabindex="-1" ne fonctionnait pas dans IE.

Answer 3

Rendre un élément HTML focalisable par défaut non focalisable n'est pas possible sans JavaScript.

Après m'être plongé dans les événements DOM liés au focus, j'en suis arrivé à l'implémentation suivante (basée sur la méthode @ShortFuse's responder mais a corrigé certains problèmes et cas particuliers) :

// A focus event handler to prevent focusing an element it attached to
onFocus(event: FocusEvent): void {
    event.preventDefault();

    // Try to remove the focus from this element.
    // This is important to always perform, since just focusing the previously focused element won't work in Edge/FF, if that element is unable to actually get the focus back (became invisible, etc.): the focus would stay on the current element in such a case
    const currentTarget: any | null = event.currentTarget;
    if (currentTarget !== null && isFunction(currentTarget.blur))
        currentTarget.blur();

    // Try to set focus back to the previous element
    const relatedTarget: any | null = event.relatedTarget;
    if (relatedTarget !== null && isFunction(relatedTarget.focus))
        relatedTarget.focus();
}

// Not the best implementation, but works for the majority of the real-world cases
export function isFunction(value: any): value is Function {
    return value instanceof Function;
}

Cette fonction est mise en œuvre en TypeScript, mais pourrait être facilement adaptée à du JavaScript ordinaire.