Help with complex ARIA Trees

[Bryan Garaventa]

Hi, if anyone is willing to help me confirm something, I'd appreciate it.

 

I'm trying to determine if it's possible to make complex ARIA Tree structures accessible if tree item nodes contain embedded widgets and additional active elements.

 

This isn't hypothetical, because this is already being done in GWT, as seen at
http://gwt.googleusercontent.com/samples/Showcase/Showcase.html
Within the widgets: Cell Tree, Stack Layout Panel, Stack Panel, and Tree, which are available to all companies currently using GWT, so this is sort of important.

 

Here is the sample HTML code.

<div class="testTree">
<ul role="tree" aria-label="Information">
<li role="treeitem" tabindex="0" aria-label="Billing Address">
<form style="display:block;visibility:visible;" role="document">
<fieldset>
<legend>Billing Address</legend><br />
<label for="pStreet">Street:</label>
<input type="text" id="pStreet" />
<label for="pState">State:</label>
<input type="text" id="pState" />
<label for="pZip">Zip:</label>
<input type="text" id="pZip" />
</fieldset>
</form>
</li>
<li role="treeitem" tabindex="-1" aria-label="Mailing Address">
<form style="display:none;visibility:hidden;" role="document">
<fieldset>
<legend>Mailing Address</legend><br />
<label for="mStreet">Street:</label>
<input type="text" id="mStreet" />
<label for="mState">State:</label>
<input type="text" id="mState" />
<label for="mZip">Zip:</label>
<input type="text" id="mZip" />
</fieldset>
</form>
</li>
</ul>
</div>

 

And here is the jQuery code to enable keyboard interaction for the sample.

 

<script type="text/javascript">
$(function(){
var nodes = $('div.testTree li[role="treeitem"]').each(function(i, o){
var cur = 0,
go = function(n){
$(nodes).each(function(j, p){
$(p).attr({
tabindex: '-1'
}).find('form').css({
display: 'none', visibility: 'hidden'
});
});
cur = n;
$(nodes[n]).attr({
tabindex: '0'
}).focus()
.find('form').css({
display: 'block', visibility: 'visible'
});
};
$(o).keydown(function(ev){
if (ev.which == 38 || ev.which == 40){
var n = ev.which == 38 ? 0 : 1;
go(n);
ev.preventDefault();
}
});
}).get();

 

$('div.testTree li[role="treeitem"] form').bind('keydown', function(ev){
ev.stopPropagation();
});
});
</script>

 

From what I can tell, there is no way to make this accessible using an ARIA Tree structure.

 

Can any of you see a way of doing this without having to restructure the widget as an accordion?

[David Ward]

I'll try an look at it later today. let u know.

[Bryan Garaventa]

Thanks, I've been experimenting with this as well, and it doesn't look like it is possible to embed interactive widgets within ARIA Tree nodes accessibly. Especially when such widgets include a combination of static text and active elements.

 

 

--
You received this message because you are subscribed to the Google Groups "Free ARIA Community" group.
To view this discussion on the web visit https://groups.google.com/d/msg/free-aria/-/jQEqv3h0aLAJ.
To post to this group, send email to free...@googlegroups.com.
To unsubscribe from this group, send email to free-aria+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/free-aria?hl=en.