Contrôle de la mise au point de tabulation dans le contexte de widget javascript contextuel

Question

Je travaille sur un plugin javascript style lightbox qui affiche une image avec les boutons suivants + et un bouton de fermeture. Je veux faire en sorte que la tabulation ne fasse que sauter entre les trois boutons présentés dans la fenêtre contextuelle, ne pas passer par les trois et ensuite continuer sur le contenu de la page en arrière-plan. Est-ce que quelqu'un a des suggestions sur la meilleure façon de le faire, actuellement, je pense que la meilleure façon est de faire un tableau d'éléments tabulés lorsque la fenêtre apparaît et juste capturer les onglets pour itérer à travers ce tableau mise au point sur chacun et en empêchant le comportement de l'onglet par défaut.

Quelqu'un sait s'il existe des bonnes pratiques à ce sujet?

Answer 1

Une solution possible semble être de définir la propriété tabindex des éléments que vous ne voulez pas tabuler à -1.

<div> 
    <input type="button" value="tabbable one" /> 
    <input type="button" value="tabbable two" /> 
</div> 
<div> 
    <input type="button" value="not tabbable" tabindex="-1"/> 
    <input type="button" value="also not tabbable" tabindex="-1"/> 
</div> 

Bien que je ne trouve pas cela dans tous les documents jusqu'à présent, il semble fonctionner dans tous les navigateurs testés (FF 3.5, IE 6 & 7, Opera 9.64).

Une autre approche serait de blur() lorsqu'un élément indésirable obtient le focus:

<div> 
    <input type="button" value="tabbable one" /> 
    <input type="button" value="tabbable two" /> 
</div> 
<div> 
    <input type="button" value="not tabbable" onfocus="blur()"/> 
    <input type="button" value="also not tabbable" onfocus="blur()"/> 
</div> 

L'inconvénient de cette approche est que dès que vous appuyez sur un élément « untabbable », aucun élément sera sélectionné et la L'onglet suivant commencera au tout premier élément. Ceci est particulièrement délicat en tabulant vers l'arrière, ce qui n'est plus possible. La solution à ce problème serait de se concentrer activement l'élément correct suivant:

<div> 
    <input id="firstTabbable" type="button" value="tabbable one" /> 
    <input type="button" value="tabbable two" /> 
    <input id="lastTabbable" type="button" value="tabbable three" /> 
</div> 
<div> 
    <input type="button" value="not tabbable" onfocus="blur(); $('firstTabbable').focus();"/> 
    <input type="button" value="also not tabbable" onfocus="blur(); $('lastTabbable').focus();"/> 
</div> 

Cependant, à mon avis, cela est un peu trop compliqué.

Answer 2

J'ai essayé de faire ce qui suit lors de l'affichage de la fenêtre pop-up, il semble fonctionner dans Firefox 3. Il peut être suffisant pour vous aider à démarrer:

$('#nonpopup a').attr('disabled','true'); 
$('#nonpopup input').attr('disabled','true'); 

Le sélecteur JQuery trouve tous les éléments A et input que sont dans la div avec l'ID nonpopup et définit l'attribut html disabled à true. Si vous n'utilisez pas JQuery, vous aurez besoin d'un autre moyen pour trouver tous ces éléments, mais cela peut être aussi simple que document.getElementsByTagName().

Ce qui permet d'éviter que le navigateur ne tabule ces éléments. L'ordre des onglets quitte toujours la page et passe tout le chrome du navigateur, comme la barre d'URL.