aria-practices
react-arborist
aria-practices | react-arborist | |
---|---|---|
4 | 13 | |
1,160 | 2,804 | |
1.1% | 3.2% | |
8.0 | 6.7 | |
about 10 hours ago | 14 days ago | |
HTML | TypeScript | |
GNU General Public License v3.0 or later | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
aria-practices
-
Here are the 10 projects I am contributing to over the next 6 months. Share yours
W3C Aria Practices
-
React Arborist – A full-featured tree component for React
I should apologize off-the-bat for not digging in too deeply, but how does this handle keyboard and screenreader accessibility?
W3C has some in-depth list of expected keyboard interactions, though I'm not sure how complete they are:
https://w3c.github.io/aria-practices/#TreeView
https://w3c.github.io/aria-practices/examples/treeview/treev...
I ask because I've tried to implement a [TreeGrid](https://w3c.github.io/aria-practices/#treegrid) myself before and... it's a lot of work. I'd love an accessible, keyboard-friendly React tree :).
-
Custom JavaScript controls can't capture the nuance of form fields (2021)
Yep I totally agree with this.
There are however a bunch of ARIA tags & best practices etc (https://w3c.github.io/aria-practices/) that exist to make popups and dialogs (and other things e.g. tree views or "email-inbox-style" "treegrids" etc) accessible (if implemented correctly).
I am conflicted about these - it is nice that there are ARIA tags for this, but it would also be nice if browsers "understood" aria tags and added some default behaviors (e.g. keyboard navigation). As it is, ARIA tags are essentially "pointless" to anyone who doesn't use an assistive technology, and so non-assitive-technology users nor developers benefit from using ARIA tags so they are often forgotten. If the browsers saw that there was an A11y-tree that matched a treeview or a treegrid, it would be really really nice if they applied some default common keyboard navigation implementation, rather than do nothing and leave it up to the developer to decide what keys do what on each and every site. .... Or on the other hand, is that too prescriptive and should we give developers and UX designers more leeway to design something better, rather than rely on browser-enforced defaults? I guess we are happy with browser defaults for basic inputs, but would we be for a treegrid?
-
4 takeaways from axe-con 2021
The ARIA practices GitHub is a good resource to see where certain patterns fall short.
react-arborist
-
MUI Grid with Infinite (10000) Grid Items
To note: we had to represent hierarchical data, that sometimes return 10 items in a level, or 1000. https://github.com/brimdata/react-arborist ended up being a solid pick for us.
- React Arborist v2.0.0 - A Tree View Component
- React Arborist v2.0 – The Complete Tree View Component (Keyboard Nav and More)
- A full-featured tree component for React
-
React Arborist – A full-featured tree component for React
https://github.com/brimdata/react-arborist/blob/main/package...
"memoize-one": "^6.0.0",
- React Arborist - a full-featured tree component for React
What are some alternatives?
react-table-library - :bento: React Table Library
react-treebeard - React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
bootstrap-select - :rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
monaco-tree - Curiosity hacks with Monaco Editor's tree component
standards-support - Contains documentation for Vispero software support of Web standards
react-complex-tree - Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
react-treeview - Easy, light, flexible tree view made with React.
aktenkoffer - 💼 Personal document management made easy.
gecko-dev - Read-only Git mirror of the Mercurial gecko repositories at https://hg.mozilla.org. How to contribute: https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html