Issue metadata
Sign in to add a comment
|
ARIA treeitem nodes may have non-presentational children |
||||||||||||||||||||||
Issue description
The below markup results in an unexpected tree structure. Namely, each of the links inside of each treeitem do not get added to the tree.
(tree (treeitem (statictext)))
is the heirarchy.
In addition, the treeitem does not have an accessible name set.
Snippet:
<ul class="tree" role="tree" tabindex="0" id="tree0" aria-activedescendant="tree0-node1">
<li id="tree0-node0" role="treeitem" aria-selected="false" tabindex="-1" class="hasChildren" aria-expanded="false"><div aria-hidden="true" class="toggle collapsed"></div><a href="#flora" tabindex="-1">Flora</a>
<ul class="children" role="group" style="display: none;">
<li id="tree0-node0-0" role="treeitem" aria-selected="false" tabindex="-1" class="hasChildren" aria-expanded="false"><div aria-hidden="true" class="toggle collapsed"></div><a href="#herbs" tabindex="-1">Herbs</a>
<ul class="children" role="group" style="display: none;">
<li id="tree0-node0-0-0" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#sage" tabindex="-1">Sage</a></li>
<li id="tree0-node0-0-1" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#rosemary" tabindex="-1">Rosemary</a></li>
<li id="tree0-node0-0-2" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#thyme" tabindex="-1">Thyme</a></li>
</ul>
</li>
<li id="tree0-node0-1" role="treeitem" aria-selected="false" tabindex="-1" class="hasChildren" aria-expanded="false"><div aria-hidden="true" class="toggle collapsed"></div><a href="#flowers" tabindex="-1">Flowers</a>
<ul class="children" role="group" style="display: none;">
<li id="tree0-node0-1-0" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#daisy" tabindex="-1">Daisy</a></li>
<li id="tree0-node0-1-1" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#poppy" tabindex="-1">Poppy</a></li>
<li id="tree0-node0-1-2" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#rose" tabindex="-1">Rose</a></li>
</ul>
</li>
</ul>
</li>
<li id="tree0-node1" role="treeitem" aria-selected="true" tabindex="-1" class="hasChildren activedescendant" aria-expanded="false"><div aria-hidden="true" class="toggle collapsed"></div><a href="#fauna" tabindex="-1">Fauna</a>
<ul class="children" role="group" style="display: none;">
<li id="tree0-node1-0" role="treeitem" aria-selected="false" tabindex="-1" class="hasChildren" aria-expanded="false"><div aria-hidden="true" class="toggle collapsed"></div><a href="#mammals" tabindex="-1">Mammals</a>
<ul class="children" role="group" style="display: none;">
<li id="tree0-node1-0-0" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#elephant" tabindex="-1">Elephant</a></li>
<li id="tree0-node1-0-1" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#monkey" tabindex="-1">Monkey</a></li>
<li id="tree0-node1-0-2" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#whale" tabindex="-1">Whale</a></li>
</ul>
</li>
<li id="tree0-node1-1" role="treeitem" aria-selected="false" tabindex="-1" class="hasChildren" aria-expanded="false"><div aria-hidden="true" class="toggle collapsed"></div><a href="#reptiles" tabindex="-1">Reptiles</a>
<ul class="children" role="group" style="display: none;">
<li id="tree0-node1-1-0" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#lizard" tabindex="-1">Lizard</a></li>
<li id="tree0-node1-1-1" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#snake" tabindex="-1">Snake</a></li>
<li id="tree0-node1-1-2" role="treeitem" aria-selected="false" tabindex="-1" class="noChildren"><a href="#turtle" tabindex="-1">Turtle</a></li>
</ul>
</li>
</ul>
</li>
</ul>
,
May 3 2016
Is this valid ARIA markup? The ARIA Spec 1.1 says that for ARIA trees the required owned elements should be treeitem or a group with children of treeitem. I don't think that links and other divs are allowed. In fact we have code in AXLayoutObject.cpp that explicitly disallows anything that doesn't have those roles. The ARIA Spec says that in cases that the one in the sample you provided, role="presentation" should be used on the <li> element in order to expose the link which is in fact the real tree item. I might be mistaken though.
,
May 3 2016
Also, shouldn't <li> elements be properly closed? Here is a snippet from ARIA 1.1: In the following code sample, because the anchor (HTML a element) is acting as the treeitem, the list item (HTML li element) is assigned an explicit WAI-ARIA role of presentation to override the user agent's implicit native semantics for list items. EXAMPLE 12 <ul role="tree"> <li role="presentation"> <a role="treeitem" aria-expanded="true">An expanded tree node</a> </li> … </ul>
,
Oct 25 2016
,
Nov 14 2016
,
Mar 6 2017
,
Mar 27 2017
,
Apr 21 2017
,
Apr 21 2017
,
Jul 27 2017
,
Aug 9 2017
(changed summary) It looks like the links are being marked presentational because the old version of the ARIA spec specified that they should be. However, for ARIA 1.1 non-presentational children are allowed: https://www.w3.org/TR/wai-aria-1.1/#treeitem
,
Aug 11 2017
,
Aug 11 2017
,
Aug 13
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Sep 14
Aaron, I think you fixed some of this in the process of making your tree explorer widget - is this still an issue or can it be closed? |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by dtseng@chromium.org
, May 2 2016