Re: [aria] example of aria-owns in section "Example: building a tree widget"

Hi Alexander. My responses are inline below.

On Jan 26, 2009, at 12:32 AM, Alexander Surkov wrote:

> There is an example of aria-owns usage In the section "Example:  
> building a tree widget" (http://www.w3.org/WAI/PF/aria/#Exampletree):
>
> <div role="treeitem" aria-owns="yellowtreegroup">Yellow<div>
> …
> <div id="yellowtreegroup" role="group">
>   <div role="treeitem">Bell peppers</div>
>   <div role="treeitem">Squash</div>
> </div>
>
> which is described as " In the following example, the aria-owns  
> property indicates that the item with id "yellowtreegroup" should be  
> considered a child of the div element with the property, even though  
> it is not a child in the DOM.".
>
> It sounds aria-owns attribute should be placed on "yellowtreegroup"  
> element instead of external treeitem element. So that this example  
> should be corrected by the following way
>
> <div role="treeitem" id="external_treeitem">Yellow<div>
> …
> <div id="yellowtreegroup" role="group" aria-owns="external_treeitem">
>   <div role="treeitem">Bell peppers</div>
>   <div role="treeitem">Squash</div>
> </div>
>
> Do I understand right?

The code sample and verbiage are correct, but I believe I understand  
your confusion. The intended outcome was to have a nested tree group,  
where "Bell Peppers" and "Squash" are children of "Yellow." The  
equivalent of this:

<div role="treeitem">
   Yellow
   <div role="group">
     <div role="treeitem">Bell peppers</div>
     <div role="treeitem">Squash</div>
   </div>
<div>

Your code sample would also be correct, but would end up with "Yellow"  
being a sibling of the other two. Like this:

<div role="group">
   <div role="treeitem">Bell peppers</div>
   <div role="treeitem">Squash</div>
   <div role="treeitem">Yellow<div>
</div>

The confusion is partially due to the fact that the previous example  
changed and partially due to the fact that it's a little less  
intuitive to have a group being a child of an item. It's also somewhat  
strange to have bell peppers–usually green–under a yellow category.

The example should not be overly complex, so we should take your idea  
for an aria-owns example that adds an item as a child of the group,  
rather than a group as the child of an item. How about something like  
this:

<h3 id="header">Vegetables</h3>
<ul role="list" aria-labelledby="header" aria-owns="external_listitem">
   <li role="listitem">Carrot</li>
   <li role="listitem">Tomato</li>
   <li role="listitem">Lettuce</li>
</ul>
…
<div role="listitem" id="external_listitem">Asparagus</div>

James