angular / angular/components

[mat-tree] Keyboard Interaction recommended by WAI-ARIA

Aperta
#13,018 9 commenti 12 reazioni 0 assegnatari Vedi su GitHub
Accessibility area: material/tree feature P2
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Bug, feature request, or proposal:
Feature request

#### What is the expected behavior?
Read expected behavior under "Keyboard interactions" at [w3.org/TR/wai-aria-practices/#TreeView](https://www.w3.org/TR/wai-aria-practices/#TreeView). Should use `TAB` to focus [mat-tree] and use arrows to navigate. Similar to radio button behaviour.

#### What is the current behavior?
`TAB` and `SHIFT + TAB` to navigate. `SPACE` or `ENTER` to open/close a node.

#### What are the steps to reproduce?
Look at the example here: [w3.org/TR/wai-aria-practices/examples/treeview/treeview-1/treeview-1a.html](https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-1/treeview-1a.html)
![keyboard-navigation](https://user-images.githubusercontent.com/412615/45206042-4ce05e80-b284-11e8-94f1-4836e462693e.gif)

#### What is the use-case or motivation for changing an existing behavior?
To make [mat-tree] more usable and accessible. Especially important when having lots of items in a tree.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular: 6.1.4
@angular/material: 6.4.6
OS: Windows 10
Chrome: 69.0.3497.81
Typescript: 2.7.2

#### Is there anything else we should know?
No

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con il componente mat-tree e confronta il suo comportamento attuale con TAB, SHIFT+TAB, SPACE ed ENTER con le linee guida WAI-ARIA sulle interazioni da tastiera di TreeView e con l’esempio di treeview collegato. Il lavoro è completato quando mat-tree segue il comportamento richiesto per il focus e la navigazione con le frecce, mantenendo al contempo l’interazione prevista per l’apertura e la chiusura dei nodi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
accessibility, frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
42/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.