patternfly / patternfly/patternfly-react

Bug - TreeView - keyboard navigation not working properly for certain variants

Aperta
#10,221 8 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

A11y PF Team Stale
Lingua principale
TypeScript
Stelle
862
Fork
392
Merge medio
4g 8h
PR unite (30g)
9

Descrizione

Describe the problem
Namely the treeview with separate expansion and selection, treeview with checkboxes, and treeview with actions.

This is tricky because typically Left and Right arrow keys will either expand/collapse a node if it's not expanded, or it'll traverse to the parent/first child if it is expanded. May be difficult to do that when we need to traverse left and right to go to/from the expansion toggle and the node checkbox/button or an action button.

Another issue may be that the tabindexes don't get updated correctly, or at least they don't seem to. Only the expansion toggles get their tabindex updates to or from -1 and 0. I was sort of expecting that pressing Right Arrow to go to the node content in the "separate selection and expansion" example would update the expand toggle to tabIndex of -1, meaning that if I tab out of the tree view then Shift + Tab back into it, the node content recieves focus, not the expanion toggle.

How do you reproduce the problem?
Provide steps to reproduce. A codesandbox demonstrating the problem is appreciated.

Expected behavior
A clear and concise description of the expected behavior.

Is this issue blocking you?
List the workaround if there is one.

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

What is your product and what release date are you targeting?

Any other information?


Jira Issue: PF-91

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con gli esempi di TreeView per la selezione e l'espansione separate, le caselle di controllo e le azioni, e riproduci il comportamento della tastiera nel CodeSandbox collegato. Traccia le cambiamenti di focus e tabindex usando Left, Right, Tab e Shift+Tab; il lavoro è completo quando la navigazione e il ritorno del focus sono coerenti in tutte e tre le varianti.

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

Valutazione

Stack tecnologico
react, typescript
Ambito
accessibility, frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Da chiarire
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.