Controlando o foco de tabulação dentro de pop-up de contexto Widget javascript

Question

Eu estou trabalhando em um javascript estilo lightbox plug-in que aparece uma imagem com próximos + anterior botões e um botão fechar. Eu quero fazer com que a tabulação só irá saltar entre os três botões apresentados no pop-up, não passar os três e depois continuar o conteúdo da página em segundo plano.

Alguém tem alguma sugestão sobre a melhor maneira de fazer isso, atualmente eu estou pensando que a melhor maneira é fazer com que uma variedade de elementos tabulável quando as aparece popup e guias apenas de captura para percorrer esse foco definição variedade em cada um e prevenir comportamentos guia padrão.

Alguém sabe se existem melhores práticas sobre isso?

Answer 1

Uma solução possível parece ser a configuração da propriedade tabindex dos elementos que você não quer ser tabulável para -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>

Apesar de eu não encontrar isso em qualquer documentação até agora parece funcionar em todos os navegadores testados (FF 3.5, IE 6 e 7, Opera 9.64).

Outra abordagem seria blur() quando um elemento indesejado recebe o foco:

<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>

A desvantagem dessa abordagem é que, logo que você bater um elemento "untabbable", nenhum elemento será selecionado e a próxima guia irá começar no primeiro elemento. Isto é especialmente complicado quando tabulações para trás, que não é mais possível. A solução para este problema seria a concentrar-se ativamente o elemento seguinte correto:

<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>

No entanto, na minha opinião, este é um pouco complicado.

Answer 2

Eu tentei fazer o seguinte ao mostrar a janela de pop-up, que parece funcionar no Firefox 3. Ele pode ser suficiente para você começar:

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

O seletor JQuery encontra todos os elementos A e input que estão no div com nonpopup id e define o disabled atributo html para true. Se você não estiver usando JQuery você vai precisar de alguma outra maneira de encontrar todos esses elementos mas pode ser tão simples como document.getElementsByTagName().

O Isso realiza está impedindo que o navegador de tabulação a esses elementos. A ordem de tabulação ainda deixa a página e vai durante todo o cromo navegador, como a barra de URL.