summaryrefslogtreecommitdiff
path: root/program/js/treelist.js
diff options
context:
space:
mode:
Diffstat (limited to 'program/js/treelist.js')
-rw-r--r--program/js/treelist.js114
1 files changed, 107 insertions, 7 deletions
diff --git a/program/js/treelist.js b/program/js/treelist.js
index 90eeeeae7..65f5fd4f4 100644
--- a/program/js/treelist.js
+++ b/program/js/treelist.js
@@ -55,6 +55,7 @@ function rcube_treelist_widget(node, p)
drag_active = false,
search_active = false,
last_search = '',
+ has_focus = false,
box_coords = {},
item_coords = [],
autoexpand_timer,
@@ -151,6 +152,19 @@ function rcube_treelist_widget(node, p)
})
}
+ container.on('focusin', function(e){
+ // TODO: only accept focus on virtual nodes from keyboard events
+ has_focus = true;
+ })
+ .on('focusout', function(e){
+ has_focus = false;
+ });
+
+ container.attr('role', 'tree');
+
+ $(document.body)
+ .bind('keydown', keypress);
+
/////// private methods
@@ -201,13 +215,13 @@ function rcube_treelist_widget(node, p)
function select(id)
{
if (selection) {
- id2dom(selection).removeClass('selected');
+ id2dom(selection).removeClass('selected').removeAttr('aria-selected');
selection = null;
}
var li = id2dom(id);
if (li.length) {
- li.addClass('selected');
+ li.addClass('selected').attr('aria-selected', 'true');
selection = id;
// TODO: expand all parent nodes if collapsed
scroll_to_node(li);
@@ -262,6 +276,7 @@ function rcube_treelist_widget(node, p)
// insert as child of an existing node
if (parent_node) {
+ node.level = parent_node.level + 1;
if (!parent_node.children)
parent_node.children = [];
@@ -296,6 +311,7 @@ function rcube_treelist_widget(node, p)
}
// insert at top level
else {
+ node.level = 0;
data.push(node);
li = render_node(node, container);
}
@@ -392,7 +408,7 @@ function rcube_treelist_widget(node, p)
*/
function update_data()
{
- data = walk_list(container);
+ data = walk_list(container, 0);
}
/**
@@ -401,6 +417,7 @@ function rcube_treelist_widget(node, p)
function update_dom(node)
{
var li = id2dom(node.id);
+ li.attr('aria-expanded', node.collapsed ? 'false' : 'true');
li.children('ul').first()[(node.collapsed ? 'hide' : 'show')]();
li.children('div.treetoggle').removeClass('collapsed expanded').addClass(node.collapsed ? 'collapsed' : 'expanded');
me.triggerEvent('toggle', node);
@@ -507,6 +524,7 @@ function rcube_treelist_widget(node, p)
// render child nodes
for (var i=0; i < data.length; i++) {
+ data[i].level = 0;
render_node(data[i], container);
}
@@ -523,6 +541,7 @@ function rcube_treelist_widget(node, p)
var li = $('<li>')
.attr('id', p.id_prefix + (p.id_encode ? p.id_encode(node.id) : node.id))
+ .attr('role', 'treeitem')
.addClass((node.classes || []).join(' '))
.data('id', node.id);
@@ -546,12 +565,14 @@ function rcube_treelist_widget(node, p)
// add child list and toggle icon
if (node.children && node.children.length) {
+ li.attr('aria-expanded', node.collapsed ? 'false' : 'true');
$('<div class="treetoggle '+(node.collapsed ? 'collapsed' : 'expanded') + '">&nbsp;</div>').appendTo(li);
- var ul = $('<ul>').appendTo(li).attr('class', node.childlistclass);
+ var ul = $('<ul>').appendTo(li).attr('class', node.childlistclass).attr('role', 'group');
if (node.collapsed)
ul.hide();
for (var i=0; i < node.children.length; i++) {
+ node.children[i].level = node.level + 1;
render_node(node.children[i], ul);
}
}
@@ -563,7 +584,7 @@ function rcube_treelist_widget(node, p)
* Recursively walk the DOM tree and build an internal data structure
* representing the skeleton of this tree list.
*/
- function walk_list(ul)
+ function walk_list(ul, level)
{
var result = [];
ul.children('li').each(function(i,e){
@@ -572,9 +593,10 @@ function rcube_treelist_widget(node, p)
id: dom2id(li),
classes: String(li.attr('class')).split(' '),
virtual: li.hasClass('virtual'),
+ level: level,
html: li.children().first().get(0).outerHTML,
text: li.children().first().text(),
- children: walk_list(sublist)
+ children: walk_list(sublist, level+1)
}
if (sublist.length) {
@@ -592,15 +614,29 @@ function rcube_treelist_widget(node, p)
if (!li.children('div.treetoggle').length)
$('<div class="treetoggle '+(node.collapsed ? 'collapsed' : 'expanded') + '">&nbsp;</div>').appendTo(li);
+
+ li.attr('aria-expanded', node.collapsed ? 'false' : 'true');
}
if (li.hasClass('selected')) {
+ li.attr('aria-selected', 'true');
selection = node.id;
}
li.data('id', node.id);
+
+ // declare list item as treeitem
+ li.attr('role', 'treeitem').attr('aria-level', node.level+1);
+
+ // allow virtual nodes to receive focus
+ if (node.virtual) {
+ li.children('a:first').attr('tabindex', '0');
+ }
+
result.push(node);
indexbyid[node.id] = node;
- })
+ });
+
+ ul.attr('role', level == 0 ? 'tree' : 'group');
return result;
}
@@ -683,6 +719,70 @@ function rcube_treelist_widget(node, p)
return undefined;
}
+ /**
+ * Handler for keyboard events on treelist
+ */
+ function keypress(e)
+ {
+ var target = e.target || {},
+ keyCode = rcube_event.get_keycode(e);
+
+ if (!has_focus || target.nodeName == 'INPUT' || target.nodeName == 'TEXTAREA' || target.nodeName == 'SELECT')
+ return true;
+
+ switch (keyCode) {
+ case 38:
+ case 40:
+ case 63232: // 'up', in safari keypress
+ case 63233: // 'down', in safari keypress
+ var li = container.find(':focus').closest('li');
+ if (li.length) {
+ focus_next(li, (mod = keyCode == 38 || keyCode == 63232 ? -1 : 1));
+ }
+ break;
+
+ case 37: // Left arrow key
+ case 39: // Right arrow key
+ var id, node, li = container.find(':focus').closest('li');
+ if (li.length) {
+ id = dom2id(li);
+ node = indexbyid[id];
+ if (node && node.children.length)
+ toggle(id, rcube_event.get_modifier(e) == SHIFT_KEY); // toggle subtree
+ }
+ return false;
+ }
+
+ return true;
+ }
+
+ function focus_next(li, dir, from_child)
+ {
+ var mod = dir < 0 ? 'prev' : 'next',
+ next = li[mod](), limit, parent;
+
+ if (dir > 0 && !from_child && li.children('ul[role=group]:visible').length) {
+ li.children('ul').children('li:first').children('a:first').focus();
+ }
+ else if (dir < 0 && !from_child && next.children('ul[role=group]:visible').length) {
+ next.children('ul').children('li:last').children('a:last').focus();
+ }
+ else if (next.length && next.children('a:first')) {
+ next.children('a:first').focus();
+ }
+ else {
+ parent = li.parent().closest('li[role=treeitem]');
+ if (parent.length)
+ if (dir < 0) {
+ parent.children('a:first').focus();
+ }
+ else {
+ focus_next(parent, dir, true);
+ }
+ }
+>>>>>>> dev-accessibility
+ }
+
///// drag & drop support