From e8bcf08c72a18b3bf396e6448d6658227ecb46f2 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 30 Apr 2014 16:21:29 +0200
Subject: 1. Prepare core and Larry skin for improved accessibility 2.
 Implement full keyboard navigation in main mail view

---
 program/js/treelist.js | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'program/js/treelist.js')

diff --git a/program/js/treelist.js b/program/js/treelist.js
index 353eb6be7..0dbedd256 100644
--- a/program/js/treelist.js
+++ b/program/js/treelist.js
@@ -105,6 +105,8 @@ function rcube_treelist_widget(node, p)
     }
   });
 
+  container.attr('role', 'tree');
+
 
   /////// private methods
 
@@ -425,6 +427,9 @@ function rcube_treelist_widget(node, p)
         selection = node.id;
       }
 
+      // declare list item as treeitem
+      li.attr('role', 'treeitem');
+
       result.push(node);
       indexbyid[node.id] = node;
     })
-- 
cgit v1.2.3


From eb95518ef9b1bf9160f0e95d45811a4ef8c0e1fb Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Thu, 1 May 2014 10:54:45 +0200
Subject: Enable keyboard navigation on treelist widgets with cursor keys

---
 program/js/treelist.js | 93 +++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 89 insertions(+), 4 deletions(-)

(limited to 'program/js/treelist.js')

diff --git a/program/js/treelist.js b/program/js/treelist.js
index 0dbedd256..fa3907894 100644
--- a/program/js/treelist.js
+++ b/program/js/treelist.js
@@ -52,6 +52,7 @@ function rcube_treelist_widget(node, p)
     indexbyid = {},
     selection = null,
     drag_active = false,
+    has_focus = false,
     box_coords = {},
     item_coords = [],
     autoexpand_timer,
@@ -105,8 +106,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
 
@@ -156,13 +168,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);
@@ -368,6 +380,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(' '));
 
     if (replace)
@@ -388,7 +401,7 @@ function rcube_treelist_widget(node, p)
     // add child list and toggle icon
     if (node.children && node.children.length) {
       $('<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', 'tree');
       if (node.collapsed)
         ul.hide();
 
@@ -424,15 +437,23 @@ function rcube_treelist_widget(node, p)
         node.collapsed = sublist.css('display') == 'none';
       }
       if (li.hasClass('selected')) {
+        li.attr('aria-selected', 'true');
         selection = node.id;
       }
 
       // declare list item as treeitem
       li.attr('role', 'treeitem');
 
+      // 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', 'tree');
 
     return result;
   }
@@ -481,6 +502,70 @@ function rcube_treelist_widget(node, p)
       scroller.scrollTop(rel_offset + current_offset);
   }
 
+  /**
+   * 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=tree]:visible').length) {
+      li.children('ul').children('li:first').children('a:first').focus();
+    }
+    else if (dir < 0 && !from_child && next.children('ul[role=tree]: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);
+        }
+    }
+  }
+
+
   ///// drag & drop support
 
   /**
-- 
cgit v1.2.3


From a2f8fa236143b44f90e53c19806cfd0efa014857 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Mon, 12 May 2014 10:32:45 +0200
Subject: Set aria-selected and aria-expanded state attributes

---
 program/js/app.js                     |  8 +++++---
 program/js/list.js                    | 12 ++++++------
 program/js/treelist.js                | 13 ++++++++-----
 skins/larry/includes/mailtoolbar.html |  8 ++++----
 skins/larry/templates/compose.html    |  6 +++---
 skins/larry/templates/mail.html       |  9 ++++-----
 6 files changed, 30 insertions(+), 26 deletions(-)

(limited to 'program/js/treelist.js')

diff --git a/program/js/app.js b/program/js/app.js
index dd172cd99..06008b2da 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -6967,7 +6967,7 @@ function rcube_webmail()
         this.hide_menu(this.menu_stack[0], event);
       }
 
-      obj.show().attr('aria-hidden', 'false').data('opener', ref.get(0));
+      obj.show().attr('aria-hidden', 'false').data('opener', ref.attr('aria-expanded', 'true').get(0));
       this.triggerEvent('menu-open', { name:name, obj:obj, props:prop, originalEvent:event });
       this.menu_stack.push(name);
 
@@ -6999,8 +6999,10 @@ function rcube_webmail()
       this.triggerEvent('menu-close', { name:this.menu_stack[j], obj:obj, props:{ menu:this.menu_stack[j] }, originalEvent:event });
       if (this.menu_stack[j] == name) {
         j = -1;  // stop loop
-        if (keyboard && obj.data('opener')) {
-          obj.data('opener').focus();
+        if (obj.data('opener')) {
+          $(obj.data('opener')).attr('aria-expanded', 'false');
+          if (keyboard)
+            obj.data('opener').focus();
         }
       }
       this.menu_stack.pop();
diff --git a/program/js/list.js b/program/js/list.js
index fa37353e8..f64d38bc3 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -116,7 +116,7 @@ init: function()
       this.focus_elem = $('<a>')
         .attr('tabindex', '0')
         .attr('style', 'display:block; width:1px; height:1px; line-height:1px; overflow:hidden; position:fixed; top:-1000px')
-        .html('Select List')
+        .html($(this.list).attr('summary') || 'Select List')
         .insertAfter(this.list)
         .on('focus', function(e){ me.focus(e); })
         .on('blur', function(e){ me.blur(e); });
@@ -1086,7 +1086,7 @@ select_all: function(filter)
       this.highlight_row(n, true, true);
     }
     else {
-      $(this.rows[n].obj).removeClass('selected').removeClass('unfocused');
+      $(this.rows[n].obj).removeClass('selected').removeClass('unfocused').removeAttr('aria-selected');
     }
   }
 
@@ -1143,7 +1143,7 @@ clear_selection: function(id, no_event)
   else {
     for (n in this.selection)
       if (this.rows[this.selection[n]]) {
-        $(this.rows[this.selection[n]].obj).removeClass('selected').removeClass('unfocused');
+        $(this.rows[this.selection[n]].obj).removeClass('selected').removeClass('unfocused').removeAttr('aria-selected');
       }
 
     this.selection = [];
@@ -1206,13 +1206,13 @@ highlight_row: function(id, multiple, norecur)
     if (this.selection.length > 1 || !this.in_selection(id)) {
       this.clear_selection(null, true);
       this.selection[0] = id;
-      $(this.rows[id].obj).addClass('selected');
+      $(this.rows[id].obj).addClass('selected').attr('aria-selected', 'true');
     }
   }
   else {
     if (!this.in_selection(id)) { // select row
       this.selection.push(id);
-      $(this.rows[id].obj).addClass('selected');
+      $(this.rows[id].obj).addClass('selected').attr('aria-selected', 'true');
       if (!norecur && !this.rows[id].expanded)
         this.highlight_children(id, true);
     }
@@ -1222,7 +1222,7 @@ highlight_row: function(id, multiple, norecur)
         a_post = this.selection.slice(p+1, this.selection.length);
 
       this.selection = a_pre.concat(a_post);
-      $(this.rows[id].obj).removeClass('selected').removeClass('unfocused');
+      $(this.rows[id].obj).removeClass('selected').removeClass('unfocused').removeAttr('aria-selected');
       if (!norecur && !this.rows[id].expanded)
         this.highlight_children(id, false);
     }
diff --git a/program/js/treelist.js b/program/js/treelist.js
index fa3907894..8b55b32b1 100644
--- a/program/js/treelist.js
+++ b/program/js/treelist.js
@@ -323,7 +323,7 @@ function rcube_treelist_widget(node, p)
    */
   function update_data()
   {
-    data = walk_list(container);
+    data = walk_list(container, 0);
   }
 
   /**
@@ -332,6 +332,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);
@@ -400,8 +401,9 @@ 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).attr('role', 'tree');
+      var ul = $('<ul>').appendTo(li).attr('class', node.childlistclass).attr('role', 'group');
       if (node.collapsed)
         ul.hide();
 
@@ -417,7 +419,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){
@@ -427,7 +429,7 @@ function rcube_treelist_widget(node, p)
         classes: li.attr('class').split(' '),
         virtual: li.hasClass('virtual'),
         html: li.children().first().get(0).outerHTML,
-        children: walk_list(sublist)
+        children: walk_list(sublist, level+1)
       }
 
       if (sublist.length) {
@@ -435,6 +437,7 @@ function rcube_treelist_widget(node, p)
       }
       if (node.children.length) {
         node.collapsed = sublist.css('display') == 'none';
+        li.attr('aria-expanded', node.collapsed ? 'false' : 'true');
       }
       if (li.hasClass('selected')) {
         li.attr('aria-selected', 'true');
@@ -453,7 +456,7 @@ function rcube_treelist_widget(node, p)
       indexbyid[node.id] = node;
     });
 
-    ul.attr('role', 'tree');
+    ul.attr('role', level == 0 ? 'tree' : 'group');
 
     return result;
   }
diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html
index 6af114ac2..a70cc023a 100644
--- a/skins/larry/includes/mailtoolbar.html
+++ b/skins/larry/includes/mailtoolbar.html
@@ -3,11 +3,11 @@
 <roundcube:button command="reply" type="link" class="button reply disabled" classAct="button reply" classSel="button reply pressed" label="reply" title="replytomessage" />
 <span class="dropbutton">
 	<roundcube:button command="reply-all" type="link" class="button reply-all disabled" classAct="button reply-all" classSel="button reply-all pressed" label="replyall" title="replytoallmessage" />
-	<a href="#reply-all" class="dropbuttontip" id="replyallmenulink" onclick="UI.toggle_popup('replyallmenu',event);return false" aria-haspopup="true" aria-owns="replyallmenu-menu" tabindex="0">Reply-all options</a>
+	<a href="#reply-all" class="dropbuttontip" id="replyallmenulink" onclick="UI.toggle_popup('replyallmenu',event);return false" aria-haspopup="true" aria-expanded="false"aria-owns="replyallmenu-menu" tabindex="0">Reply-all options</a>
 </span>
 <span class="dropbutton">
 	<roundcube:button command="forward" type="link" class="button forward disabled" classAct="button forward" classSel="button forward pressed" label="forward" title="forwardmessage" />
-	<a href="#reply-all" class="dropbuttontip" id="forwardmenulink" onclick="UI.toggle_popup('forwardmenu',event);return false" aria-haspopup="true" aria-owns="forwardmenu-menu" tabindex="0">Forwarding options</a>
+	<a href="#reply-all" class="dropbuttontip" id="forwardmenulink" onclick="UI.toggle_popup('forwardmenu',event);return false" aria-haspopup="true" aria-expanded="false"aria-owns="forwardmenu-menu" tabindex="0">Forwarding options</a>
 </span>
 <roundcube:button command="delete" type="link" class="button delete disabled" classAct="button delete" classSel="button delete pressed" label="delete" title="deletemessage" />
 <roundcube:if condition="template:name == 'message'" />
@@ -15,8 +15,8 @@
 <roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" title="printmessage" />
 <roundcube:endif />
 <roundcube:container name="toolbar" id="mailtoolbar" />
-<roundcube:button name="markmenulink" id="markmessagemenulink" type="link" class="button markmessage" label="mark" title="markmessages" onclick="UI.toggle_popup('markmessagemenu',event);return false" aria-haspopup="true" aria-owns="markmessagemenu-menu" />
-<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button more" label="more" title="moreactions" onclick="UI.toggle_popup('messagemenu',event);return false" aria-haspopup="true" aria-owns="messagemenu-menu" />
+<roundcube:button name="markmenulink" id="markmessagemenulink" type="link" class="button markmessage" label="mark" title="markmessages" onclick="UI.toggle_popup('markmessagemenu',event);return false" aria-haspopup="true" aria-expanded="false"aria-owns="markmessagemenu-menu" />
+<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button more" label="more" title="moreactions" onclick="UI.toggle_popup('messagemenu',event);return false" aria-haspopup="true" aria-expanded="false"aria-owns="messagemenu-menu" />
 
 <div id="forwardmenu" class="popupmenu" aria-hidden="true">
 	<h3 id="aria-label-forwardmenu" class="voice">Forwarding options</h3>
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html
index 14f5a6d2d..7b229f3df 100644
--- a/skins/larry/templates/compose.html
+++ b/skins/larry/templates/compose.html
@@ -27,12 +27,12 @@
 	<roundcube:if condition="config:enable_spellcheck" />
 	<span class="dropbutton">
 		<roundcube:button command="spellcheck" type="link" class="button spellcheck disabled" classAct="button spellcheck" classSel="button spellcheck pressed" label="spellcheck" title="checkspelling" tabindex="2" />
-		<a href="#languages" class="dropbuttontip" id="spellmenulink" onclick="UI.toggle_popup('spellmenu',event);return false" aria-haspopup="true" tabindex="2">Select Spell Language</a>
+		<a href="#languages" class="dropbuttontip" id="spellmenulink" onclick="UI.toggle_popup('spellmenu',event);return false" aria-haspopup="true" aria-expanded="false"tabindex="2">Select Spell Language</a>
 	</span>
 	<roundcube:endif />
-	<roundcube:button name="addattachment" type="link" class="button attach" label="attach" title="addattachment" onclick="UI.show_uploadform(event);return false" aria-haspopup="true" tabindex="2" />
+	<roundcube:button name="addattachment" type="link" class="button attach" label="attach" title="addattachment" onclick="UI.show_uploadform(event);return false" aria-haspopup="true" aria-expanded="false"tabindex="2" />
 	<roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" label="signature" title="insertsignature" tabindex="2" />
-	<a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="UI.toggle_popup('responsesmenu',event);return false" tabindex="2" aria-haspopup="true" aria-owns="textresponsesmenu"><roundcube:label name="responses" /></a>
+	<a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="UI.toggle_popup('responsesmenu',event);return false" tabindex="2" aria-haspopup="true" aria-expanded="false"aria-owns="textresponsesmenu"><roundcube:label name="responses" /></a>
 	<roundcube:container name="toolbar" id="compose-toolbar" />
 </div>
 
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index 1e360b422..3d91629d8 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -39,7 +39,7 @@
 <h2 id="aria-label-searchform" class="voice">Email message search form</h2>
 <label for="quicksearchbox" class="voice">Email search input</label>
 <roundcube:object name="searchform" id="quicksearchbox" />
-<roundcube:button command="menu-open" prop="searchmenu" id="searchmenulink" class="iconbutton searchoptions" title="searchmod" label="options" aria-haspopup="true" aria-owns="searchmenu-menu" />
+<roundcube:button command="menu-open" prop="searchmenu" id="searchmenulink" class="iconbutton searchoptions" title="searchmod" label="options" aria-haspopup="true" aria-expanded="false"aria-owns="searchmenu-menu" />
 <roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content="Reset" />
 
 <div id="searchmenu" class="popupmenu" data-editable="true">
@@ -73,7 +73,7 @@
 <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
 </div>
 <div id="folderlist-footer" class="boxfooter">
-	<roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.toggle_popup('mailboxmenu',event);return false" innerClass="inner" content="&#9881;" aria-haspopup="true" aria-owns="mailboxmenu-menu" />
+	<roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.toggle_popup('mailboxmenu',event);return false" innerClass="inner" content="&#9881;" aria-haspopup="true" aria-expanded="false"aria-owns="mailboxmenu-menu" />
 	<roundcube:if condition="env:quota" />
 		<roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" />
 	<roundcube:endif />
@@ -98,7 +98,6 @@
 	class="records-table messagelist sortheader fixedheader"
 	optionsmenuIcon="true"
 	summary="Email Messages Listing"
-	role="grid"
 	aria-labelledby="aria-label-messagelist" />
 </div>
 
@@ -110,9 +109,9 @@
 	</div>
 	
 	<div id="listselectors">
-	<a href="#select" id="listselectmenulink" class="menuselector" onclick="UI.toggle_popup('listselectmenu', event);return false" aria-haspopup="true" aria-owns="listselectmenu-menu"><span class="handle"><roundcube:label name="select" /></span></a>
+	<a href="#select" id="listselectmenulink" class="menuselector" onclick="UI.toggle_popup('listselectmenu', event);return false" aria-haspopup="true" aria-expanded="false"aria-owns="listselectmenu-menu"><span class="handle"><roundcube:label name="select" /></span></a>
 	<roundcube:if condition="env:threads" />
-		&nbsp; <a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.toggle_popup('threadselectmenu', event);return false" aria-haspopup="true" aria-owns="threadselectmenu-menu"><span class="handle"><roundcube:label name="threads" /></span></a>
+		&nbsp; <a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.toggle_popup('threadselectmenu', event);return false" aria-haspopup="true" aria-expanded="false"aria-owns="threadselectmenu-menu"><span class="handle"><roundcube:label name="threads" /></span></a>
 	<roundcube:endif />
 	</div>
 
-- 
cgit v1.2.3


From 782a86e49780a2720890f51c48e161f7052510c4 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Mon, 12 May 2014 10:42:34 +0200
Subject: Fix treelist keyboard navigation + assign aria-level attributes to
 treeitems

---
 program/js/treelist.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

(limited to 'program/js/treelist.js')

diff --git a/program/js/treelist.js b/program/js/treelist.js
index 8b55b32b1..4cffdac21 100644
--- a/program/js/treelist.js
+++ b/program/js/treelist.js
@@ -209,6 +209,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 = [];
 
@@ -227,6 +228,7 @@ function rcube_treelist_widget(node, p)
     }
     // insert at top level
     else {
+      node.level = 0;
       data.push(node);
       li = render_node(node, container);
     }
@@ -365,6 +367,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);
     }
 
@@ -408,6 +411,7 @@ function rcube_treelist_widget(node, p)
         ul.hide();
 
       for (var i=0; i < node.children.length; i++) {
+        node.children[i].level = node.level + 1;
         render_node(node.children[i], ul);
       }
     }
@@ -428,6 +432,7 @@ function rcube_treelist_widget(node, p)
         id: dom2id(li),
         classes: li.attr('class').split(' '),
         virtual: li.hasClass('virtual'),
+        level: level,
         html: li.children().first().get(0).outerHTML,
         children: walk_list(sublist, level+1)
       }
@@ -445,7 +450,7 @@ function rcube_treelist_widget(node, p)
       }
 
       // declare list item as treeitem
-      li.attr('role', 'treeitem');
+      li.attr('role', 'treeitem').attr('aria-level', node.level+1);
 
       // allow virtual nodes to receive focus
       if (node.virtual) {
@@ -547,10 +552,10 @@ function rcube_treelist_widget(node, p)
     var mod = dir < 0 ? 'prev' : 'next',
       next = li[mod](), limit, parent;
 
-    if (dir > 0 && !from_child && li.children('ul[role=tree]:visible').length) {
+    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=tree]:visible').length) {
+    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')) {
-- 
cgit v1.2.3