patternfly / patternfly/patternfly-react
Bug - TreeView - keyboard navigation not working properly for certain variants
Personne n'a encore pris cette issue.
- Langage dominant
- TypeScript
- Étoiles
- 862
- Forks
- 392
- Merge moyen
- 4 j 8 h
- PR mergées (30 j)
- 9
Description
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
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par les exemples de TreeView pour la sélection et l’expansion séparées, les cases à cocher et les actions, puis reproduisez le comportement du clavier dans le CodeSandbox lié. Suivez les changements de focus et de tabindex lors de l’utilisation de Left, Right, Tab et Shift+Tab ; le travail est considéré comme terminé lorsque la navigation et le retour du focus sont cohérents dans les trois variantes.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react, typescript
- Domaine
- accessibility, frontend
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- Calme
- Clarté
- À clarifier
- Accessibilité débutants
- 35/100