Navegação pelo teclado

Este guia se concentra em como usar a navegação padrão do teclado, conforme implementada atualmente no Blockly.

Usar a navegação pelo teclado

Para que a navegação pelo teclado seja bem-sucedida, um usuário precisa ser capaz de concluir as tarefas abaixo:

  • Navegar pelo espaço de trabalho
  • Conectar blocos em um espaço de trabalho
  • Adicionar um bloco ao espaço de trabalho
  • Remover blocos
  • Navegar pela caixa de ferramentas
  • Navegar no menu suspenso
  • Inserir blocos do menu suspenso

Veja abaixo como a navegação por teclado padrão do Blockly realiza essas tarefas.

Como ativar a navegação pelo teclado

Um usuário pode ativar e desativar a navegação pelo teclado pressionando Shift + Ctrl + k. Quando a navegação pelo teclado é ativada pela primeira vez, uma linha vermelha piscando aparece no espaço de trabalho. Este é o cursor. Ele mostra a localização atual do usuário e as atualizações à medida que ele navega pelo espaço de trabalho.
Quando um usuário pressiona Shift + K, uma linha vermelha intermitente aparece na tela. Este é o cursor.

Pressionar Enter cria uma linha azul no local atual que representa o marcador de um usuário. Um marcador exibe uma região de destino para inserção do bloco. Ele não é atualizado quando você move o cursor pelo espaço de trabalho.
Quando um usuário pressiona a tecla, uma linha azul aparece na tela. Este é o marcador.

Como usar o cursor padrão

O espaço de trabalho é composto de entradas, campos, conexões, blocos e coordenadas. O cursor padrão se move pelo espaço de trabalho dividindo todos os componentes em níveis diferentes.

Para navegar entre os níveis, use as teclas A e D. Para navegar por um nível, use as teclas W e S.

Nível do espaço de trabalho

Entre no modo de navegação com o teclado pressionando Shift + Ctrl + k. Isso coloca o cursor no espaço de trabalho ou no primeiro bloco do espaço de trabalho. Se o cursor estiver em um bloco, mova-o para o nível do espaço de trabalho pressionando A duas vezes. Para mover o cursor no espaço de trabalho, use Shift + WASD. Para passar para a pilha, use a tecla D.
O cursor no espaço de trabalho em blocos se move quando o usuário pressiona as teclas Shift e W A S D. Quando o usuário pressiona d, o cursor aparece como um retângulo em torno da primeira pilha de blocos

Nível da pilha

No nível da pilha, você pode navegar entre pilhas de blocos no espaço de trabalho usando as teclas W e S. Nesse nível, o cursor é representado por um retângulo vermelho sólido em torno de todos os blocos de uma pilha. Para ir para o primeiro bloco na pilha selecionada, use a tecla D.
Quando o usuário pressiona s, o cursor se move para a próxima pilha de blocos. Quando o usuário pressiona d, o cursor aparece como uma linha vermelha intermitente acima do primeiro bloco na pilha selecionada.

Nível de bloco e conexões

Esse nível contém um bloco e todas as conexões externas do bloco. O cursor padrão é definido para pular o bloco se houver uma conexão anterior ou de saída. Se não houver nenhuma, o cursor se moverá para o bloco, conforme mostrado abaixo.

Quando o usuário pressiona d, o cursor se move de um retângulo vermelho em torno da pilha de blocos para a metade de um retângulo em torno do primeiro bloco da pilha.

As três possíveis conexões externas são mostradas abaixo.
Uma linha vermelha destaca as três possíveis conexões externas. Essas são as conexões anterior, seguinte e de saída em um bloco.

No nível do bloco e da conexão, é possível navegar pelas conexões externas usando as teclas W e S. Nesse nível, o cursor é representado por um contorno vermelho intermitente da conexão atual. Para ir para o primeiro campo ou entrada em um bloco, pressione D.
Quando o usuário pressiona a tecla S, o cursor aparece como uma linha vermelha piscando na próxima conexão de um bloco. Quando um usuário pressiona a tecla "d", o cursor aparece como um retângulo vermelho em torno do primeiro campo do bloco.

Campos e nível de entrada

Esse nível contém todos os campos e entradas que estão no bloco. Veja abaixo alguns exemplos de campos e entradas.
Um retângulo vermelho destaca exemplos de entradas e campos em um bloco.
Neste nível, é possível navegar pelos campos e entradas editáveis do bloco atual com W e S. Para um campo, o cursor é um retângulo vermelho sólido. Para a entrada, o cursor é uma peça de quebra-cabeça vermelha piscando. Quando o cursor estiver em uma entrada, pressione D para ir até o bloco conectado.

O cursor se move pelas entradas e pelos campos do bloco quando um usuário pressiona a tecla S. Quando um usuário pressiona "d" em uma entrada com um bloco conectado, o cursor aparece como uma linha vermelha intermitente sobre o bloco conectado.

Quando o cursor estiver em um campo, pressione Enter para editá-lo.

O cursor aparece como um retângulo vermelho em torno de um campo. Quando o usuário clica em um botão, um menu suspenso é aberto. O usuário pressiona a tecla S para selecionar um valor no menu suspenso e pressiona Enter para fechá-lo.

Blocos de conexão no espaço de trabalho

  1. Navegue até a conexão de destino usando as chaves WASD
  2. Marque a conexão usando a tecla Enter.
  3. Navegue até um ponto de conexão válido usando as teclas WASD
  4. Conecte os dois blocos usando a tecla I (para inserção).

Uma conexão de entrada tem um ponto azul indicando que ela está marcada. Quando o usuário clica em i em uma conexão válida, o bloco se move para o ponto de conexão marcado.

Como mover um bloco no espaço de trabalho

Normalmente, no Blockly, você move um bloco para o espaço de trabalho pegando-o, arrastando-o para a posição desejada e soltando-o. Com os atalhos do teclado, você marca sua localização de destino, navegue até o bloco que você quer mover e diga a ele para se mover.

  1. Acesse uma posição no espaço de trabalho usando as teclas Shift + WASD
  2. Marque o local no espaço de trabalho usando a tecla Enter.
  3. Use as teclas WASD para acessar o bloco que você quer mover
  4. Mova o bloco até o local marcado usando a tecla I.

Um cursor é exibido no espaço de trabalho em bloco. Quando o usuário pressiona Enter, ele marca sua localização e uma linha azul aparece nessa posição. Usando as teclas WASD, o cursor é movido para a conexão externa de um bloco. Quando o usuário clica em i, o bloqueio é movido para o local marcado.

Remoção de blocos

Normalmente, no Blockly, você desconecta dois blocos pegando o bloco inferior e arrastando-o para fora do bloco pai. Com os atalhos do teclado, você desconecta os blocos pressionando X com o cursor na conexão que quer interromper.

  1. Navegue até a conexão que você quer interromper usando as chaves WASD
  2. Interromper a conexão com X

Dois blocos estão conectados na tela com o cursor mostrado no meio deles. Quando o usuário pressiona a tecla x, os bloqueios são desconectados.

Como inserir um bloco da caixa de ferramentas

  1. Pressione a tecla T para abrir a caixa de ferramentas
  2. Use as teclas W e S para navegar pelas categorias
  3. Pressione a tecla D para ir até os blocos no menu suspenso
  4. Navegue pelos blocos usando as teclas W e S.
  5. Pressione a tecla Enter para inserir um bloco no menu suspenso.

Quando um usuário pressiona t uma caixa de ferramentas é aberta mostrando diferentes categorias de blocos. O pressionamento passa pelas diferentes categorias. Quando um usuário clica no primeiro bloco da categoria, ele é destacado. Pressione Enter para colocar o bloco no espaço de trabalho e fechar a caixa de ferramentas.

Experimentação

Acreditamos que há quatro áreas principais em que as pessoas podem estar interessadas em experimentar:

  1. Mapeamentos de teclas: quais teclas devem ser mapeadas para quais ações.
  2. Texto para leitores de tela/registro/avisos: como um leitor de tela deve ler a localização dos cursores, além de quaisquer erros ou avisos.
  3. Navegação do Workspace: como um usuário navega pelos diferentes blocos, campos, entradas e conexões no espaço de trabalho.
  4. Aparência do cursor: a aparência do cursor e do marcador.

Para mais informações sobre como usar essas APIs, consulte o laboratório de códigos de navegação por teclado em blocos (em inglês).

Se você tiver outras áreas em que queira testar e que possamos ajudar, preencha este formulário.

Perguntas frequentes

P: Por que vocês não usaram as teclas de seta para a navegação pelo teclado?
R:Os leitores de tela geralmente usam as teclas de seta. Não queríamos interferir nesse processo, então optamos por usar as chaves WASD.
No entanto, reconhecemos que todos têm necessidades diferentes. Por isso, recomendamos criar uma maneira fácil de alterar os mapeamentos de teclas.

P: Parece complicado. Por que precisamos de camadas diferentes?
R:Ao pensar na navegação pelo teclado, precisávamos de uma maneira estruturada de percorrer os diferentes blocos, conexões, campos, entradas e coordenadas do espaço de trabalho.
Internamente, representamos isso com uma árvore de sintaxe abstrata (AST, na sigla em inglês). A implementação do cursor padrão não se afasta desse modelo.Isso é intencional para que os desenvolvedores entendam melhor a arquitetura subjacente. Há outros cursors que podem ser mais fáceis de entender para um usuário final.

Limitações

Ainda não oferecemos suporte à navegação para componentes que não bloqueiam (por exemplo, lixeira, botões de zoom e botões suspensos). Para mais informações sobre limitações, consulte a lista de bugs de navegação por teclado aberto.