search

dgreene1 / react-accessible-treeview

A react component that implements the treeview pattern as described by the WAI-ARIA Authoring Practices.
https://dgreene1.github.io/react-accessible-treeview
MIT License
261 stars 37 forks source link

Focus on tree element after reload #156

Closed opreisSys closed 4 months ago

opreisSys commented 11 months ago

Problem description

After executing a context action on a tree element, the focus is lost and the user has to navigate again to the modified location in the tree.

Example: The user clicks on a menu at a tree element, which opens a dialog. The user changes the tree there (add, delete, edit an element). Afterwards the dialog closes and the tree is reloaded. The keyboard focus on the original tree element is lost and the user starts again in the tree above.

Currently it is not possible for me to manually set the focus in the tree. (Or is it?)

Possible solution

It would be helpful to set the focus manually/controlled on a tree element. This way the user comes back to his starting point and can continue there.

dgreene1 commented 11 months ago

We’d be open to a PR if you want to submit it but I can’t promise it will be merged since there are normal react, jquery, and browser API ways to do this.

opreisSys commented 11 months ago

Yes there are normal ways to set the focus, but not in such a way that the tree accepts it properly. If I set the focus on a tree element and want to navigate from there with the keyboard, the focus starts again at the top of the tree.

dgreene1 commented 11 months ago

Okay. We’ll review your PR if you’d like to submit one.

stale[bot] commented 9 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] commented 8 months ago

This issue was closed automatically since it was marked as stale because it has not had recent activity. Thank you for your contributions.

Ethaan commented 5 months ago

@opreisSys did you manage to solve this? i'm trying to put the keyboard focus on the first element id inside defaultExpandedIds but no luck

opreisSys commented 5 months ago

@opreisSys did you manage to solve this? i'm trying to put the keyboard focus on the first element id inside defaultExpandedIds but no luck

I currently have no capacity to fix it. But I still need a solution here, because it is an accessibility problem.

dgreene1 commented 5 months ago

Can you provide documentation that this is an accessibility problem? It appears to be a usability problem.

I’ll reopen the issues so that someone might contribute it. But currently it’s out of scope for my team too.

help wanted.

opreisSys commented 5 months ago

@dgreene1 Thank you for reopening the issue! From my point of view, it is both an usability and accessibility problem.

  1. a blind user navigates in the tree using the keyboard and opens a dialog from there.
  2. user is in the dialog and rerenders the tree when closing the dialogue.
  3. user loses focus in the tree and has to find the location again.

As I mentioned above, unfortunately it does not help to set the focus with browser API methods, as the tree does not accept it and navigates from there back to the top of the tree.

As soon as I have found the relevant place in the accessibility guidelines, I will get back to you.

yhy-1 commented 4 months ago

opreisSys Can you try with the new focus props? V2.9.0

opreisSys commented 4 months ago

opreisSys Can you try with the new focus props? V2.9.0

Oh super! This property solved my problem. Thank you.