WCAG support

[ellinge]

There's currently no support for keyboard navigation and no ARIA-attributes present.
Here are some guidelines one should consider complying with WCAG:
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

Here are some of the highlights on attributes one should consider implementing:

• role
• aria-haspopup
• aria-expanded
• aria-selected

[mrchief]

Thanks for opening this. Having WCAG support would be great. I believe there are no clear guidelines for a mixed or combo control like this.

This component essentially is a mix of:

• an input
• a dropdown
• a TreeView
• label + checkboxes (each tree node)
• tags (selected tree nodes that have text plus a "x" button)
• node action item(s) - these are optional but essentially they are just buttons

To fully implement WCAG in a meaningful way, we'd need the following:

To add ARIA attributes

• Determine proper attributes to apply (RFC: ARIA Attributes #235)
• PR for adding the attributes (feat: Add ARIA roles and attributes #233)
• Automated tests to ensure compliance (preferably integrated with CI)

To add Keyboard navigation

• Figure out what Keyboard navigation should look like with all possible variations (e.g., with or without checkboxes, with or without action items, scrolling, adding/removing/navigating tags, etc.)
• Handle scroll virtualization
• PR for Adding keyboard navigation capabilities (feat: Add keyboard navigation #225)
• Automated tests to ensure compliance (preferably integrated with CI)

As you can see, the scope can be quite broad for getting it right a 100%, but I think we can probably add stuff incrementally in multiple PRs.

I'll start looking into it, and I'm open to ideas, suggestions, and PRs for this.

[ellinge]

Did some first tries to include a11y-testing through axe:
https://github.com/ellinge/react-dropdown-tree-select/tree/feat/%23216-tests

It only detects missing labeling for search input though. Not sure it will detect our scenario/needs. Since some dom-nodes are not rendered by React, it propably cannot detect that we expand and collapse child nodes. Not sure of it's capabilties. But it probably will be able to validate the attributes we apply I guess.

They also state

There is limited support for JSDOM. We will attempt to make all rules compatible with JSDOM but where this is not possible, we recommend turning those rules off. Currently the color-contrast rule is known not to work with JSDOM.

Here is the rule list:
https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md