Angular Tree Grid Keyboard Navigation

    A navegação por teclado no IgxTreeGrid fornece uma rica variedade de interações de teclado para o usuário. Ele aprimora a acessibilidade do IgxTreeGrid e permite navegar por qualquer tipo de elemento interno (célula, linha, cabeçalho de coluna, barra de ferramentas, rodapé, etc.). Essa funcionalidade é habilitada por padrão e o desenvolvedor tem a opção de substituir qualquer um dos comportamentos padrão de maneira fácil.

    As tabulações do IgxTreeGrid foram reduzidas para que a navegação seja compatível com os padrões de acessibilidade do W3C e conveniente de usar.

    Atualmente, o IgxTreeGrid introduz as seguintes paradas de tabulação:

    • Área GroupBy ou Toolbar (se habilitada);
    • IgxTreeGrid header;
    • IgxTreeGrid body;
    • Resumos de coluna (se ativado);
    • IgxTreeGrid paginator (if enabled);
    Note

    Devido a essa alteração, a navegação entre as células com tab e Shift + Tab não é mais suportada no IgxTreeGrid. Pressionar a Tab tecla agora percorre as paradas de tabulação na seguinte ordem: GroupBy / Toolbar-> Headers-> Body-> Summaries-> Footer / Paginator.

    Note

    A exposição de qualquer elemento focalizável no corpo IgxTreeGrid por meio do modelo pode introduzir efeitos colaterais na navegação do teclado, pois o comportamento padrão do navegador não é impedido. É responsabilidade do desenvolvedor evitá-lo ou modificá-lo adequadamente.

    Header Navigation

    Um suporte completo à navegação por teclado no cabeçalho IgxTreeGrid agora é introduzido. Os cabeçalhos das colunas podem ser facilmente percorridos com as teclas de seta. Além disso, há uma série de combinações de teclas que acionam ações nas colunas, como filtragem, classificação, agrupamento e etc. Quando o contêiner de cabeçalho IgxTreeGrid está focado, as seguintes combinações de teclas estão disponíveis:

    Key Combinations

    • Arrow Up navega uma célula para cima nos cabeçalhos (sem looping). Disponível somente quando Layout de várias linhas (MRL) ou Cabeçalhos de várias colunas (MCH) são definidos
    • Arrow Down navega uma célula para baixo nos cabeçalhos (sem quebra). Disponível somente quando Layout de várias linhas (MRL) ou Cabeçalhos de várias colunas (MCH) são definidos
    • Arrow Left navega uma célula restante (sem looping)
    • Arrow Right navega uma célula para a direita (sem quebra entre linhas)
    • Ctrl + Arrow Left navega até a célula mais à esquerda da linha; se o LMR ou o MCH estiverem ativados, navega para a célula mais à esquerda no mesmo nível
    • Home navega até a célula mais à esquerda da linha; se o LMR ou o MCH estiverem ativados, navega para a célula mais à esquerda no mesmo nível
    • Ctrl + Arrow Right navega até a célula mais à direita na linha; se o LMR ou o MCH estiverem ativados, navega para a célula mais à direita no mesmo nível
    • End navega até a célula mais à direita na linha; se o LMR ou o MCH estiverem ativados, navega para a célula mais à direita no mesmo nível
    • Alt + L abre a caixa de diálogo Filtragem Avançada se a Filtragem Avançada estiver ativada
    • Ctrl + Shift + L abre a caixa de diálogo Filtro de Estilo do Excel ou o filtro padrão (linha) se a coluna for filtrável
    • Ctrl + Arrow Up classifica o cabeçalho da coluna ativa na ordem ASC. Se a coluna já estiver classificada no ASC, o estado de classificação será limpo
    • Ctrl + Arrow Down classifica o cabeçalho da coluna ativa na ordem DSC. Se a coluna já estiver classificada na DSC, o estado de classificação será limpo
    • Space seleciona a coluna; Se a coluna já estiver selecionada, a seleção será desmarcada

    Body navigation

    Quando o corpo IgxTreeGrid está focado, as seguintes combinações de teclas estão disponíveis:

    Key Combination

    • Arrow Up- navega uma célula para cima (sem encapsulamento)
    • Arrow Down navega uma célula para baixo (sem encapsulamento)
    • Arrow Left navega uma célula à esquerda (sem quebra entre as linhas)
    • Arrow Right- navega uma célula para a direita (sem quebra entre as linhas)
    • Ctrl + Arrow Left navega até a célula mais à esquerda da linha
    • Ctrl + Arrow Right Navega para a célula mais à direita na linha
    • Ctrl + Arrow Up navega até a primeira célula da coluna
    • Ctrl + Arrow Down Navega até a última célula da coluna
    • Home navega até a célula mais à esquerda da linha
    • End Navega para a célula mais à direita na linha
    • Ctrl + Home Navega até a célula de dados superior esquerda na grade
    • Ctrl + End Navega até a célula de dados inferior direita da grade
    • Page Up rola uma página (porta de visualização) para cima
    • Page Down rola uma página (porta de visualização) para baixo
    • Enter entra no modo de edição
    • F2 entra no modo de edição
    • Esc sai do modo de edição
    • Tab disponível apenas se houver uma célula no modo de edição; move o foco para a próxima célula editável na linha; Depois de chegar à última célula da linha, move o foco para a primeira célula editável na próxima linha. Quando a Edição de Linha está ativada, move o foco da célula editável mais à direita para os botões CANCELAR e CONCLUÍDO e do botão CONCLUÍDO para a célula editável mais à esquerda na linha
    • Shift + Tab- disponível apenas se houver uma célula no modo de edição; move o foco para a célula editável anterior na linha; Depois de alcançar a primeira célula da linha, move o foco para a última célula editável na linha anterior. Quando a Edição de Linha está ativada, move o foco da célula editável mais à direita para os botões CANCELAR e CONCLUÍDO e do botão CONCLUÍDO para a célula editável mais à direita na linha
    • Space- seleciona a linha, se Row Selection estiver ativada
    • Alt + Arrow Left or Alt + Arrow Up - collapses the current node
    • Alt + Arrow Right or Alt + Arrow Down - expands the current node

    Pratique todas as ações mencionadas acima no exemplo de demonstração abaixo. Concentre qualquer elemento de grade navegável e uma lista com algumas das ações disponíveis para o elemento será mostrada para guiá-lo.

    Demo

    Custom keyboard navigation

    Substituir o comportamento padrão de uma determinada tecla ou combinação de teclas é um dos benefícios que o recurso de navegação por teclado oferece. Por exemplo: pressione a Enter tecla ou Tab para navegar até a próxima célula ou a célula abaixo. Esse ou qualquer outro cenário de navegação é facilmente obtido pela API de navegação por teclado:

    API Descrição Argumentos
    gridKeydown Um evento que é emitido quando qualquer uma das combinações de teclas descritas acima é executada. Pode ser cancelado. Para qualquer outra tecla pressionada/combinada, use o evento padrãoonkeydown. IGridKeydownEventArgs
    activeNodeChange Um evento que é emitido quando o nó ativo é alterado. Você pode usá-lo para determinar a posição do foco ativo (cabeçalho, tbody etc.), índice de coluna, índice de linha ou nível aninhado. IActiveNodeChangeEventArgs
    navigateTo Navega para uma posição na grade, com base no fornecidorowindex evisibleColumnIndex. Ele também pode executar uma lógica personalizada sobre o elemento de destino, por meio de uma função de retorno de chamada que aceita o parâmetro do tipo{ targetType: GridKeydownTargetType, target: Object }. Uso:
    grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });    		 rowindex: number, visibleColumnIndex: number, callback: ({ targetType: GridKeydownTargetType, target: Object }) => {}
    getNextCell retornaICellPosition objeto, que define a próxima célula porrowIndex evisibileColumnIndex. Uma função de retorno de chamada pode ser passada como um terceiro parâmetro dogetNextCell método. A função de retorno de chamada aceitaIgxColumnComponent como um parâmetro e retorna uma indicação deboolean valor se um determinado critério for atendido:
    const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);    		 currentRowIndex: número,currentVisibleColumnIndex: número,callback: (IgxColumnComponent) => booleano
    getPreviousCell retornaICellPosition objeto, que define a célula anterior porrowIndex evisibileColumnIndex. Uma função de retorno de chamada pode ser passada como um terceiro parâmetro dogetPreviousCell método. A função de retorno de chamada aceitaIgxColumnComponent como um parâmetro e retorna uma indicação deboolean valor se um determinado critério for atendido:
    const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);    		 currentRowIndex: número,currentVisibleColumnIndex: número,callback: (IgxColumnComponent) => booleano

    Vamos experimentar a API para demonstrar como obter cenários comuns, como validação de entrada do usuário e navegação personalizada. Primeiro, precisamos registrar um manipulador de eventos para o gridKeydown evento:

    <igx-tree-grid #grid1 [data]="data" (gridKeydown)="customKeydown($event)">
</igx-tree-grid>

    public customKeydown(args: IGridKeydownEventArgs) {
    const target: IgxGridCell = args.target as IgxGridCell;
    const evt: KeyboardEvent = args.event as KeyboardEvent;
    const type = args.targetType;

    if (type === 'dataCell' && target.inEditMode && evt.key.toLowerCase() === 'tab') {
        // 1. USER INPUT VALIDATON ON TAB
    }
    if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') {
        // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
    }
}

    Com base nos valores de IGridKeydownEventArgs, identificamos dois casos, em que fornecer nossa própria lógica (veja acima). Agora, usando os métodos da API, vamos realizar o desejado - se o usuário estiver pressionando Tab a tecla sobre uma célula no modo de edição, realizaremos a validação na entrada. Se o usuário estiver pressionando Enter a tecla sobre uma célula, moveremos o foco para a célula na próxima linha:

        // 1. USER INPUT VALIDATON ON TAB
    if (target.column.dataType === 'number' && target.editValue < 18) {
        // alert the user that the input is invalid
        return;
    }
    // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
    const nexRowIndex = target.row.expanded ? target.rowIndex + 2 : target.rowIndex + 1;
    grid.navigateTo(nexRowIndex, target.visibleColumnIndex,
        (obj) => { obj.target.nativeElement.focus(); });

    Observação: consulte o código de exemplo para obter detalhes completos da implementação.

    Use a demonstração abaixo para experimentar os cenários personalizados que acabamos de implementar:

    • Clique duas vezes ou pressione F2 a tecla em uma célula da Age coluna, altere o valor para 16 e pressione tab a tecla. A mensagem de prompt será exibida.
    • Selecione uma célula e pressione Enter a tecla algumas vezes. Cada pressionamento de tecla moverá o foco para uma célula na próxima linha, na mesma coluna.

    Known Limitations

    Limitação Descrição
    Navegando dentro de uma grade com contêiner pai rolável. Se a grade estiver posicionada dentro de um contêiner pai rolável e o usuário navegar até uma célula de grade que está fora de exibição, o contêiner pai não será rolado.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.