Comment rendre une division "tabbable" ?

Question

J'ai des boutons qui sont des éléments div et je veux qu'il soit possible pour l'utilisateur d'appuyer sur la touche de tabulation de son clavier pour passer de l'un à l'autre. J'ai essayé d'envelopper leur texte dans des balises d'ancrage, mais cela ne semble pas fonctionner.

Quelqu'un a-t-il une solution ?

Answer 1

Ajouter tabindex aux attributs de votre div éléments.

Exemple :

<div tabindex="1">First</div>
<div tabindex="2">Second</div>

Conformément au commentaire de steveax, si vous ne voulez pas que l'ordre de tabulation s'écarte de l'endroit où se trouve l'élément dans la page, définissez l'attribut tabindex a 0 :

<div tabindex="0">First</div>
<div tabindex="0">Second</div>

Answer 2

Pour ceux qui sont intéressés, en plus de la réponse acceptée, vous pouvez ajouter le jquery suivant pour que le style de la div change lorsque vous tabulez dessus, et aussi gérer les touches Enter et Space pour déclencher un clic (ensuite votre gestionnaire de clic fera le reste)

$(document).on('focus', '.button',function(){
    $(this).css('border','1px dotted black')
});
$(document).on('keyup', '.button',function(e){
    if(e.which==13 || e.which==32)
        $(this).click()
});

Je suis sûr que quelqu'un en a fait un plugin jq $().makeTabStop

Answer 3

Ajouter le tabindex="0" à chaque div que vous voulez rendre tabbable. Utilisez ensuite les pseudo-classes CSS :hover et :focus, par exemple, pour indiquer à l'utilisateur de l'application que la division est visible et cliquable, par exemple. Utilisez JavaScript pour gérer le clic.

var doc = document;
var providers = doc.getElementsByClassName("provider");

for (var i = 0; i < providers.length; i++) {
    providers[i].onclick = function() {
      console.log(this.innerHTML);
    };
}

.provider {
    flex: 0 1 auto;
    align-self: auto;
    width: 256px;
    height: 48px;
    margin-top: 12px;
    margin-right: 12px;
    text-align: center;
    line-height: 48px;

    text-transform: uppercase;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 10%;
    background-color: gray;
}

.provider:hover{
  cursor: pointer;
}

.provider:focus{
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
}

<h4>Click in this area first then press tab</h4>
<div id="email" class="provider" tabindex="0">email</div>
<div id="facebook" class="provider" tabindex="0">facebook</div>
<div id="github" class="provider" tabindex="0">github</div>
<div id="google" class="provider" tabindex="0">google</div>
<div id="twitter" class="provider" tabindex="0">twitter</div>

Answer 4

Rendre les éléments tabulables et cliquables par pression sur une touche à l'aide de jquery

Hypothèses

• Tous les éléments qui sont de type non-tabbable, non-cliquable et qui doivent être cliquables ont une icône en cliquant sur (qui pourrait être remplacé par une classe ou un autre attribut)
• Tous les éléments sont du même type ; je vais utiliser des divs.
• Vous utilisez jquery

Exemple de code html :

...

<div onclick="clicked(this)">Button 1</div>
<div onclick="clicked(this)">Button 2</div>
<div onclick="clicked(this)">Button 3</div>

...

Code Jquery : Il s'agit du code qui sera exécuté lorsque la page sera chargée. Il doit être exécuté sur votre page HTML.

$(()=>{
    // make divs with an onclick attribute tabbable/clickable
    $('div[onclick]')
        .attr('tabindex', '0')                     // Add tab indexes
        .keypress((evt)=>{
            var key = evt.key;
            evt.preventDefault();                  // Ensure all default keypress
                                                   // actions are not used
            if (key === ' ' || key === 'Enter') {  // Only send click events for Space
                                                   // or Enter keys
                evt.currentTarget.click();         // Run the click event for element
            }
        });
});

Vous pouvez trouver un exemple fonctionnel aquí .

Answer 5

Pour tous ceux qui viennent sur cette page pour l'intention contraire, c'est-à-dire pour rendre une balise div NON tabbable : https://github.com/WICG/inert est un bon moyen.