Drag'n'Drop

Métodos de Interação

Possíveis métodos de interação em componentes do tipo Drag'n'Drop.

Importante:
Apenas os principais métodos estão listados aqui. Componentes customizados devem ter estudos aprofundados.

Interação com mouse (qualquer dispositivo de apontamento)

• Ao passar o mouse, o componente deve retornar feedback visual confirmando possibilidade de interação.
• Ao clicar com o botão do mouse o componente deve retornar feedback visual confirmando o clique.
• Ao clicar com o botão do mouse e segurar, o componente deve retornar feedback visual confirmando estar pronto para ser arrastado.
• Ao soltar o botão do mouse o componente deve se posicionar no local de destino.
• Deve ser possível cancelar o movimento sem perder nenhum tipo de dado armazenado.

Interação com teclado (qualquer dispositivo que não seja de apontamento)

• Ao focar com teclado, ocomponente deve retornar feedback visual com foco visível.
• Deve ser possível navegar para o próximo item ou para o anterior utilizando as teclas TAB ou SHIFT+TAB respectivamente.
• Deve ser possível selecionar componentes com a tecla ENTER.
• Deve ser possível cancelar a seleção do componente com a tecla ESC.
• Após acionamento com a tecla ENTER, deve ser possível utilizar utilizar as setas direcionais northseta para cimaesouthseta para baixoeeastseta para direitaewestseta para esquerda para reposicionar o componente.
• Após reposição do componente, pode-se navegar novamente através das teclas TAB ou SHIFT+TAB.

Interação com teclado (ou gestos) + leitor de telas

• Ao focar no agrupamento de componentes é possível ouvir do que se trata o agrupamento.
• Ao focar em um componente do agrupamento é possível ouvir qual é o componente é "arrastável".
• Ao focar o componente é possível ouvir instruções claras do que fazer para reposicionar o componente.
• Após reposicionar o componente é possível ouvir a localização de sua nova posição.
• Caso posição não seja permitida, deve ser possível ouvir o motivo de não ser possível.
• Caso reposicionamento do componente obrigue uma ação do sistema (exemplo: reiniciar), deve ser informado essa necessidade e deve ser possível cancelar o reposicionamento.

Gherkin

Metodologia BDD (Behavior-Driven Development ou Desenvolvimento Orientado ao Comportamento) com foco em 3 pilares: Histórias de Usuário, Critérios de Aceite e Sintaxes Gherkin (Dado (Given), Quando (When), Então (Then)).

Cenário: Considerando que estou em uma página que contém Drag'n'Drop

Navegação por teclado

1. QUANDO uso a tecla Tab para mover o foco para um item arrastável
2. O foco que VEJO é fortemente indicado visualmente
3. ENTÃO, quando uso a tecla Enter para selecionar o item
4. VEJO que o item selecionado está pronto para ser reposicionado
5. ENTÃO, quando uso as setas direcionais para mover o item
6. VEJO que a posição do item é atualizada
7. E, quando uso a tecla Esc, VEJO que a seleção ou movimentação é cancelada sem perda de dados

Leitor de telas para desktop

1. Quando uso um leitor de tela no computador (NVDA, JAWS, VoiceOver) e uso a tecla Tab para mover o foco para um item arrastável
   • OUÇO o nome do item em foco.
   • OUÇO que o item pode ser reposicionado.
   • OUÇO instruções claras de como iniciar, mover, confirmar ou cancelar a interação.
2. ENTÃO, quando reposiciono o item com teclado
3. OUÇO a nova posição do item ou uma mensagem informando que a posição escolhida não é permitida.

Leitor de telas para dispositivos móveis

1. QUANDO uso um leitor de tela no celular (Talkback, VoiceOver) e deslizo o dedo para focar em um item arrastável, acontece o seguinte:
   • OUÇO o nome do item em foco.
   • OUÇO que o item pode ser reposicionado.
   • OUÇO instruções claras de como interagir com o componente usando gestos disponíveis.
2. ENTÃO, quando reposiciono o item
3. OUÇO a nova posição do item ou uma mensagem informando que a posição escolhida não é permitida.

Pontos de Atenção

Pontos de atenção para se preocupar em componentes do tipo Drag'n'Drop.

• componentes do tipo Drag'n'Drop são complexos de se manter a consistência da interação em diferentes métodos. Eles devem ser utilizados apenas quando realmente necessários.

Referências

Referências adicionais sobre componentes do tipo Drag'n'Drop.

Importante:
A maior parte das referências estão na plataforma do curso junto com as aulas citadas neste material.

Isenção de responsabilidade:
Os links indicados aqui não são recomendações, mas apenas uma curadoria de referências onde você pode encontrar componentes construídos. É importante ressaltar que não há uma unificação nos formatos de construção e não há garantias de que os links mencionados aqui cumpram todos os padrões de design. Dúvidas devem ser direcionadas para as respectivas equipes envolvidas nas construções dos materiais indicados. Antes de "copiar" algum modelo apresentado, leve em consideração que todos os materiais são atualizados constantemente e que os padrões (principalmente proprietários) podem sofrer alterações.

Padrões de Design

• Apple - Human Interface Guidelines - Drag and Drop open_in_newlink externo - abre em uma nova janela (abre em uma nova aba)
• Google - Material Design open_in_newlink externo - abre em uma nova janela (abre em uma nova aba)
• Documentação de padrões HTML: Drag and Drop open_in_newlink externo - abre em uma nova janela (abre em uma nova aba)
• Mozilla Web Docs: HTML Drag and Drop API open_in_newlink externo - abre em uma nova janela (abre em uma nova aba)

Design System

• Salesforce Lightning - Drag'n'Drop open_in_newlink externo - abre em uma nova janela (abre em uma nova aba)