Qual é o tabindex = “- 1” no bootstrap para

Para que tabindexserve o atributo no Bootstrap 3?

A sua documentação nada diz sobre eles, embora os utilizem praticamente em todos os modais.

Eu só descobri isso em relação ao uso, o que realmente não diz muito

Dicas de ferramentas acessíveis para usuários de teclado e tecnologia assistiva

Para usuários que navegam com um teclado e, em particular, usuários de tecnologias assistivas, você só deve adicionar dicas de ferramentas a elementos com foco no teclado, como links, controles de formulário ou qualquer elemento arbitrário com um atributo tabindex = "0".

E descobri que não posso pressionar escpara ocultar um modal se o tabindexatributo não for-1 .

• Fechamento modal após pressionar a esctecla (com tabindex)
• Modal não fecha após pressionar a esctecla (sem tabindex)

O tabindexatributo define explicitamente a ordem de navegação para elementos focalizáveis ​​(normalmente links e controles de formulário) em uma página. Também pode ser usado para definir se os elementos devem ser focalizáveis ​​ou não.

[Ambos] tabindex="0"e tabindex="-1"têm um significado especial e fornecem funcionalidades distintas em HTML. Um valor de 0indica que o elemento deve ser colocado na ordem de navegação padrão. Isso permite que os elementos que não são nativamente focalizável (tais como <div>, <span>, e <p>) para receber o foco do teclado. É claro que geralmente se deve usar links e controles de formulário para todos os elementos interativos, mas isso permite que outros elementos sejam focalizáveis ​​e acionem a interação.

Um tabindex="-1"valor remove o elemento do fluxo de navegação padrão (ou seja, um usuário não pode acessá-lo), mas permite que ele receba foco programático , o que significa que o foco pode ser definido a partir de um link ou com script. ** Isso pode ser muito útil para elementos que não devem ser tabulados, mas que podem precisar ter o foco definido para eles .

Um bom exemplo é uma janela de diálogo modal - quando aberta, o foco deve ser definido para o diálogo para que um leitor de tela comece a ler e o teclado comece a navegar dentro do diálogo. Como a caixa de diálogo (provavelmente apenas um <div>elemento) não tabindex="-1"pode ser focalizada por padrão, atribuí-la permite que o foco seja definido com o script quando for apresentada.

Um valor de -1também pode ser útil em widgets e menus complexos que utilizam teclas de seta ou outras teclas de atalho para garantir que apenas um elemento dentro do widget seja navegável com a tecla tab, mas ainda permite que o foco seja definido em outros componentes dentro do widget.

Fonte: http://webaim.org/techniques/keyboard/tabindex

É por isso que você precisa tabindex="-1"do modal <div>, para que os usuários possam acessar atalhos comuns de mouse e teclado. Espero que ajude.

O atributo tabindex está associado ao HTML , não é específico do Bootstrap.

Esta propriedade é responsável por indicar se um elemento pode ser acessado pela navegação do teclado.

Você precisa olhar para três cenários diferentes:

1. Ao adicionar tabindex = "0"a um elemento, isso significa que ele pode ser acessado pela navegação do teclado, mas a ordem é definida pela ordem de origem dos documentos.

2. Ao adicionar um valor positivo ao atributo tabindex (por exemplo tabindex = "1", tabindex = "2"), esses elementos são alcançáveis ​​pela navegação do teclado e a ordem é definida pelo valor do atributo.

3. Ao adicionar um valor negativo ao tabindex (normalmente tabindex="-1"), significa que o elemento não é acessível pela navegação do teclado, mas pode ser focado usando a função de foco em JS.