vakata
jsTree has no elements with tabindex="0" when focus is on tree item.
Currently, jsTree uses aria-activedescendant approach to manage focus inside tree link.
In recommendation we can see next:
If a component container has an ARIA role that supports the aria-activedescendant property, it is not necessary to manipulate the tabindex attribute and move DOM focus among focusable elements within the container. Instead, only the container element needs to be included in the tab sequence.
In our case continer elemnts initially uses tabindex="0" and tree items use tabindex="-1". For example:
<div role ="tree" tabindex="0"><li role="none"><a role="treeitem" tabindex="-1"></li></a></div>
In this case all looks good as tabindex="0" is presented on container.
But if we move focus inside tree container index will be chainged - tabindex="-1". And we will have next:
<div role ="tree" tabindex="-1"><li role="none"><a role="treeitem" tabindex="-1"></li></a></div>
For this case, we are able to navigate between treeitems using arrow navigation as we use JS to focus them. But some accessibility tools might think that in the current state is impossible to move focus inside jsTree using TAB as container and treeitems have tabindex="-1".
For example, it causes AXE error if tree container is scrollable - [Ensure that scrollable region has keyboard access](https://dequeuniversity.com/rules/axe/4.2/scrollable-region-focusable?application=webdriverjs)
As result, jsTree might fail some accessibility tools checks when has a focused child.
Should we consider it as a lack of jsTree and try to fix it by not removing tabindex="0" from the tree container or this case should be considered as lack of accessibility tools?
From aria-activedescendant approach, it seems that tabindex="0" is required on a tree container and perhaps dynamically removing it could be a violation.
Frankly, I have no idea why I modify the tabindex when focusing / bluring links (this piece of code was created a long time ago). It should be easy to remove and leave it as 0, could you verify that if lines 660, 912, 921 (in jstree.js) are commented out the tree works as expected?
Hi, @vakata by commenting these lines the focus behavior becames broken - all treeitems became focusable in the same time. Meanwhile I found similar to our situation in the on of axe-core opened tickets https://github.com/dequelabs/axe-core/issues/2822 In this ticket the same AXE error is also raised aginst element with similar to jsTree behavior and this case considered as a false positive. As current AXE error doesn't affect the user experience and considered as a false positive I would close the current ticket if you don't mind?
After some investigation I proposed potential fix in #2565 We could set tabindex="0" on focused node and leave container tabindex behavior as it is. It will fix the described issue and will align jstree with standarts.