Currently the FileTree component is a custom component that renders just buttons. There are no lists, list items or appropriate element roles used. Files and folders are just buttons after buttons. Keyboard usage is not implemented. Element states are not properly indicated.
Implementing such component is difficult and slow. It's not something that TutorialKit itself should focus on.
Check Radix, React Aria and similar component libraries for ready-to-use treeview components and build TutorialKit's FileTree on top of that.
Describe alternatives you've considered.
Ignore accessibility and usability completely and wait for users to file bug reports. Keep building more and more work-arounds on top of the current component. 🫠
Additional context
[!NOTE]
Help wanted!
Check existing component libraries like Radix and React Aria, and see if they have treeview component that could be used.
Is your feature request related to a problem?
Currently the
FileTreecomponent is a custom component that renders just buttons. There are no lists, list items or appropriate element roles used. Files and folders are just buttons after buttons. Keyboard usage is not implemented. Element states are not properly indicated.https://github.com/stackblitz/tutorialkit/blob/aa9a5d9f5efd83bfa7e2df6ea531a43623b78a35/packages/react/src/core/FileTree.tsx#L1-L264
Describe the solution you'd like.
File tree should implement proper HTML semantics and expected interactivity. It should follow https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ pattern.
Implementing such component is difficult and slow. It's not something that TutorialKit itself should focus on.
Check Radix, React Aria and similar component libraries for ready-to-use treeview components and build TutorialKit's
FileTreeon top of that.Describe alternatives you've considered.
Ignore accessibility and usability completely and wait for users to file bug reports. Keep building more and more work-arounds on top of the current component. 🫠
Additional context