Navegação pelo teclado

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

.

Como usar a navegação por teclado

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

  • Mover-se pelo espaço de trabalho
  • Conectar blocos em um espaço de trabalho
  • Adicionar um bloco ao espaço de trabalho
  • Desconectar blocos
  • Navegar pela caixa de ferramentas
  • Navegar pelo menu flutuante
  • Inserir blocos do menu suspenso

A seguir, explicamos como a navegação padrão do teclado do Blockly realiza essas tarefas.

Como ativar a navegação por teclado

O usuário pode ativar e desativar a navegação pelo teclado pressionando Shift + Ctrl + k. Quando a navegação por teclado é ativada pela primeira vez, uma linha vermelha piscando aparece no espaço de trabalho. Esse é o cursor. Ele mostra o local atual do usuário e é atualizado conforme o usuário navega pelo espaço de trabalho.
Quando um usuário pressiona shift control k, uma linha vermelha piscante aparece na tela. Esse é o cursor.

Ao pressionar Enter, uma linha azul é criada no local atual, representando o marcador do usuário. Um marcador mostra um local de destino para a inserção do bloco. Ele não é atualizado conforme você move o cursor pelo espaço de trabalho.
Quando um usuário pressiona a tecla Enter, uma linha azul aparece na tela. Este é o marcador.

Como usar o cursor padrão

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

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

Nível do espaço de trabalho

Entre no modo de navegação por teclado pressionando Shift + Ctrl + k. Isso coloca o cursor no espaço de trabalho ou no primeiro bloco dele. 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 na área de trabalho, use Shift + WASD. Para mover para o nível da pilha, use a tecla D.
O cursor no espaço de trabalho do Blockly 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 ao redor da primeira pilha de blocos.

Nível da pilha

No nível da pilha, é possível 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 ao redor de todos os blocos em uma pilha. Para acessar 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 piscando acima do primeiro bloco na pilha selecionada.

Nível de blocos e conexões

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

Quando o usuário pressiona d, o cursor muda de um retângulo vermelho ao redor da pilha de blocos para a metade de um retângulo ao redor do primeiro bloco na 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. Estas são as conexões anteriores, seguintes e de saída em um bloco.

No nível de bloco e conexão, é possível navegar pelas conexões externas usando as chaves W e S. Nesse nível, o cursor é representado por um contorno vermelho intermitente da conexão atual. Para acessar 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 ao redor do primeiro campo no bloco.

Campos e nível de entrada

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

O cursor se move pelas entradas e campos do bloco quando um usuário pressiona a tecla S. Quando um usuário pressiona a tecla D em uma entrada com um bloco conectado, o cursor aparece como uma linha vermelha piscando na parte de cima do bloco conectado.

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

O cursor aparece como um retângulo vermelho ao redor de um campo. Quando o usuário pressiona Enter, um menu suspenso é aberto. O usuário pressiona a tecla S para selecionar um valor no menu suspenso e depois pressiona Enter para fechar o menu suspenso.

Como conectar blocos no Workspace

  1. Navegue até a conexão de destino usando as teclas WASD.
  2. Marcar 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 chave I (para inserção)

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

Como mover um bloco no Workspace

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 de teclado, você marca o local de destino, navega até o bloco que quer mover e o instrui a mover.

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

Um cursor é mostrado no espaço de trabalho do Blockly. Quando o usuário pressiona Enter, ele marca o local e uma linha azul aparece nessa posição. Usando as teclas WASD, eles movem o cursor para a conexão externa de um bloco. Quando o usuário clica em "i", o bloco se move para o local marcado.

Desconectar blocos

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

  1. Navegue até a conexão que você quer interromper usando as teclas 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 blocos 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 mover 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 de "s" alterna entre as diferentes categorias. Quando um usuário pressiona d, o primeiro bloco na categoria é destacado. Ao pressionar Enter, o bloco é colocado no espaço de trabalho e a caixa de ferramentas é fechada.

Experimentação

Acreditamos que há quatro áreas principais em que as pessoas podem ter interesse em testar:

  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 os locais do cursor, bem como erros ou avisos.
  3. Navegação no espaço de trabalho: 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ódigo de navegação de teclado do Blockly.

Se você quiser experimentar outras áreas em que podemos ajudar, preencha o formulário.

Perguntas frequentes

P: Por que você não usou as teclas de seta para navegar pelo teclado?
A:Os leitores de tela geralmente usam as teclas de seta. Não queremos interferir nisso e, por isso, optamos por usar as teclas WASD.
No entanto, reconhecemos que cada pessoa tem necessidades diferentes. Por isso, recomendamos criar uma maneira fácil de mudar os mapeamentos de chaves.

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

Limitações

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