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/app.js      | 31 +++++++++++++++++---------
 program/js/common.js   | 20 +++++++++++++++++
 program/js/list.js     | 60 +++++++++++++++++++++++++++++++++++++++++---------
 program/js/treelist.js |  5 +++++
 4 files changed, 95 insertions(+), 21 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index 2451a6d3d..b2c9209a7 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -199,6 +199,9 @@ function rcube_webmail()
     this.enable_command('close', 'logout', 'mail', 'addressbook', 'settings', 'save-pref',
       'compose', 'undo', 'about', 'switch-task', 'menu-open', 'menu-save', true);
 
+    // set active task button
+    this.set_button(this.task, 'sel');
+
     if (this.env.permaurl)
       this.enable_command('permaurl', 'extwin', true);
 
@@ -233,7 +236,7 @@ function rcube_webmail()
           });
 
           document.onmouseup = function(e){ return ref.doc_mouse_up(e); };
-          this.gui_objects.messagelist.parentNode.onmousedown = function(e){ return ref.click_on_list(e); };
+          this.gui_objects.messagelist.parentNode.onclick = function(e){ return ref.click_on_list(e || window.event); };
 
           this.enable_command('toggle_status', 'toggle_flag', 'sort', true);
           this.enable_command('set-listmode', this.env.threads && !this.is_multifolder_listing());
@@ -1605,9 +1608,9 @@ function rcube_webmail()
       this.gui_objects.qsearchbox.blur();
 
     if (this.message_list)
-      this.message_list.focus();
+      this.message_list.focus(e);
     else if (this.contact_list)
-      this.contact_list.focus();
+      this.contact_list.focus(e);
 
     return true;
   };
@@ -1953,10 +1956,12 @@ function rcube_webmail()
 
     // build subject link
     if (cols.subject) {
-      var action = flags.mbox == this.env.drafts_mailbox ? 'compose' : 'show';
-      var uid_param = flags.mbox == this.env.drafts_mailbox ? '_draft_uid' : '_uid';
-      cols.subject = '<a href="./?_task=mail&_action='+action+'&_mbox='+urlencode(flags.mbox)+'&'+uid_param+'='+urlencode(uid)+'"'+
-        ' onclick="return rcube_event.cancel(event)" onmouseover="rcube_webmail.long_subject_title(this,'+(message.depth+1)+')"><span>'+cols.subject+'</span></a>';
+      var action  = flags.mbox == this.env.drafts_mailbox ? 'compose' : 'show',
+        uid_param = flags.mbox == this.env.drafts_mailbox ? '_draft_uid' : '_uid',
+        query = { _mbox: flags.mbox };
+      query[uid_param] = uid;
+      cols.subject = '<a href="' + this.url(action, query) + '" onclick="return rcube_event.keyboard_only(event)"' +
+        ' onmouseover="rcube_webmail.long_subject_title(this,'+(message.depth+1)+')" tabindex="-1"><span>'+cols.subject+'</span></a>';
     }
 
     // add each submitted col
@@ -6182,9 +6187,6 @@ function rcube_webmail()
         init_button(cmd, this.buttons[cmd][i]);
       }
     }
-
-    // set active task button
-    this.set_button(this.task, 'sel');
   };
 
   // set button to a specific state
@@ -6197,7 +6199,7 @@ function rcube_webmail()
       button = a_buttons[n];
       obj = document.getElementById(button.id);
 
-      if (!obj)
+      if (!obj || button.status == state)
         continue;
 
       // get default/passive setting of the button
@@ -6226,8 +6228,14 @@ function rcube_webmail()
         obj.disabled = state == 'pas';
       }
       else if (button.type == 'uibutton') {
+        button.status = state;
         $(obj).button('option', 'disabled', state == 'pas');
       }
+      else {
+        $(obj)
+          .attr('tabindex', state == 'pas' || state == 'sel' ? '-1' : '0')
+          .attr('aria-disabled', state == 'pas' || state == 'sel' ? 'true' : 'false');
+      }
     }
   };
 
@@ -7116,6 +7124,7 @@ function rcube_webmail()
           this.enable_command('set-listmode', this.env.threads && !is_multifolder);
 
           if ((response.action == 'list' || response.action == 'search') && this.message_list) {
+            this.message_list.focus();
             this.msglist_select(this.message_list);
             this.triggerEvent('listupdate', { folder:this.env.mailbox, rowcount:this.message_list.rowcount });
           }
diff --git a/program/js/common.js b/program/js/common.js
index ff5f9b9bd..e15c34a3b 100644
--- a/program/js/common.js
+++ b/program/js/common.js
@@ -281,6 +281,26 @@ cancel: function(evt)
   return false;
 },
 
+/**
+ * Determine whether the given event was trigered from keyboard
+ */
+is_keyboard: function(e)
+{
+  return e && (
+      (e.mozInputSource && e.mozInputSource == e.MOZ_SOURCE_KEYBOARD) ||
+      (!e.pageX && (e.pageY || 0) <= 0 && !e.clientX && (e.clientY || 0) <= 0)
+    );
+},
+
+/**
+ * Accept event if triggered from keyboard action (e.g. <Enter>)
+ */
+keyboard_only: function(e)
+{
+  console.log(e);
+  return rcube_event.is_keyboard(e) ? true : rcube_event.cancel(e);
+},
+
 touchevent: function(e)
 {
   return { pageX:e.pageX, pageY:e.pageY, offsetX:e.pageX - e.target.offsetLeft, offsetY:e.pageY - e.target.offsetTop, target:e.target, istouch:true };
diff --git a/program/js/list.js b/program/js/list.js
index 560ee0d9b..b4b775566 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -98,7 +98,7 @@ init: function()
     this.rows = {};
     this.rowcount = 0;
 
-    var r, len, rows = this.tbody.childNodes;
+    var r, len, rows = this.tbody.childNodes, me = this;
 
     for (r=0, len=rows.length; r<len; r++) {
       this.rowcount += this.init_row(rows[r]) ? 1 : 0;
@@ -108,8 +108,19 @@ init: function()
     this.frame = this.list.parentNode;
 
     // set body events
-    if (this.keyboard)
+    if (this.keyboard) {
       rcube_event.add_listener({event:'keydown', object:this, method:'key_press'});
+
+      // install a link element to receive focus.
+      // this helps to maintain the natural tab order when moving focus with keyboard
+      this.focus_elem = $('<a>')
+        .attr('tabindex', '0')
+        .attr('style', 'display:block; width:1px; height:1px; line-height:1px; overflow:hidden; position:absolute; top:-1000px')
+        .html('Select List')
+        .insertAfter(this.list)
+        .on('focus', function(e){ me.focus(e); })
+        .on('blur', function(e){ me.blur(e); });
+    }
   }
 
   return this;
@@ -175,9 +186,9 @@ init_header: function()
 
     if (this.fixed_header) {  // copy (modified) fixed header back to the actual table
       $(this.list.tHead).replaceWith($(this.fixed_header).find('thead').clone());
-      $(this.list.tHead).find('tr td').attr('style', '');  // remove fixed widths
+      $(this.list.tHead).find('tr td').attr('style', '').find('a.sortcol').attr('tabindex', '-1');  // remove fixed widths
     }
-    else if (!bw.touch && this.list.className.indexOf('fixedheader') >= 0) {
+    else if (!bw.touch && this.list.className.indexOf('fixedheader') >= 0 && 0) {
       this.init_fixed_header();
     }
 
@@ -220,6 +231,12 @@ init_fixed_header: function()
     $(this.fixed_header).find('thead').replaceWith(clone);
   }
 
+  // avoid scrolling header links being focused
+  $(this.list.tHead).find('a.sortcol').attr('tabindex', '-1');
+
+  // set tabindex to fixed header sort links
+  clone.find('a.sortcol').attr('tabindex', '0');
+
   this.thead = clone.get(0);
   this.resize();
 },
@@ -265,6 +282,8 @@ clear: function(sel)
 
   if (sel)
     this.clear_selection();
+  else
+    this.last_selected = 0;
 
   // reset scroll position (in Opera)
   if (this.frame)
@@ -370,6 +389,9 @@ update_row: function(id, cols, newid, select)
  */
 focus: function(e)
 {
+  if (this.focused)
+    return;
+
   var n, id;
   this.focused = true;
 
@@ -380,20 +402,26 @@ focus: function(e)
     }
   }
 
+  if (e)
+    rcube_event.cancel(e);
+
   // Un-focus already focused elements (#1487123, #1487316, #1488600, #1488620)
   // It looks that window.focus() does the job for all browsers, but not Firefox (#1489058)
-  $('iframe,:focus:not(body)').blur();
-  window.focus();
+  // We now fix this by explicitly assigning focus to a dedicated link element
+  this.focus_elem.focus();
 
-  if (e || (e = window.event))
-    rcube_event.cancel(e);
+  $(this.list).addClass('focus');
+
+  // set internal focus pointer to first row
+  if (!this.last_selected)
+    this.select_first(CONTROL_KEY);
 },
 
 
 /**
  * remove focus from the list
  */
-blur: function()
+blur: function(e)
 {
   var n, id;
   this.focused = false;
@@ -403,6 +431,8 @@ blur: function()
       $(this.rows[id].obj).removeClass('selected focused').addClass('unfocused');
     }
   }
+  
+  $(this.list).removeClass('focus');
 },
 
 
@@ -1101,8 +1131,10 @@ clear_selection: function(id, no_event)
     this.selection = [];
   }
 
-  if (num_select && !this.selection.length && !no_event)
+  if (num_select && !this.selection.length && !no_event) {
     this.triggerEvent('select');
+    this.last_selected = 0;
+  }
 },
 
 
@@ -1311,9 +1343,17 @@ use_arrow_key: function(keyCode, mod_key)
   }
 
   if (new_row) {
+    // simulate ctr-key if no rows are selected
+    if (!mod_key && !this.selection.length)
+      mod_key = CONTROL_KEY;
+
     this.select_row(new_row.uid, mod_key, false);
     this.scrollto(new_row.uid);
   }
+  else if (!new_row && !selected_row) {
+    // select the first row if none selected yet
+    this.select_first(CONTROL_KEY);
+  }
 
   return false;
 },
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 2ba491a0f93002424f7848c8a1726a03d857e381 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Thu, 1 May 2014 09:00:55 +0200
Subject: Fix list focus in non-keyboard mode: restore old behavior

---
 program/js/list.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

(limited to 'program/js')

diff --git a/program/js/list.js b/program/js/list.js
index b4b775566..14dfde379 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -406,9 +406,15 @@ focus: function(e)
     rcube_event.cancel(e);
 
   // Un-focus already focused elements (#1487123, #1487316, #1488600, #1488620)
-  // It looks that window.focus() does the job for all browsers, but not Firefox (#1489058)
-  // We now fix this by explicitly assigning focus to a dedicated link element
-  this.focus_elem.focus();
+  if (this.focus_elem) {
+    // We now fix this by explicitly assigning focus to a dedicated link element
+    this.focus_elem.focus();
+  }
+  else {
+    // It looks that window.focus() does the job for all browsers, but not Firefox (#1489058)
+    $('iframe,:focus:not(body)').blur();
+    window.focus();
+  }
 
   $(this.list).addClass('focus');
 
-- 
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')

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 a539cebdaac8141189f51cb9de87525bb2c8571a Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Thu, 1 May 2014 16:13:58 +0200
Subject: Improve mail view document structure with headings, roles, labels and
 aria-attributes

---
 program/js/app.js                         |   3 +-
 skins/larry/includes/header.html          |  20 +++---
 skins/larry/includes/mailtoolbar.html     |  20 +++---
 skins/larry/mail.css                      |  10 +++
 skins/larry/styles.css                    |  35 +++++++---
 skins/larry/templates/mail.html           | 111 +++++++++++++++++-------------
 skins/larry/templates/message.html        |  13 ++--
 skins/larry/templates/messagepreview.html |  43 ++++++------
 skins/larry/ui.js                         |   2 +
 9 files changed, 156 insertions(+), 101 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index b2c9209a7..f0aadd970 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -6359,7 +6359,8 @@ function rcube_webmail()
       this.messages[key].labels = [{'id': id, 'msg': msg}];
     }
     else {
-      obj.click(function() { return ref.hide_message(obj); });
+      obj.click(function() { return ref.hide_message(obj); })
+        .attr('role', 'alert');
     }
 
     this.triggerEvent('message', { message:msg, type:type, timeout:timeout, object:obj });
diff --git a/skins/larry/includes/header.html b/skins/larry/includes/header.html
index 8ce784b02..4692913fa 100644
--- a/skins/larry/includes/header.html
+++ b/skins/larry/includes/header.html
@@ -1,5 +1,6 @@
-<div id="header" role="banner">
-<div id="topline">
+<div id="header">
+<div id="topline" role="banner" aria-labelledby="aria-label-topnav">
+	<h2 id="aria-label-topnav" class="voice">Window Control</h2>
 	<div class="topleft">
 		<roundcube:container name="topline-left" id="topline-left" />
 		<roundcube:button name="about" type="link" label="about" class="about-link" onclick="UI.show_about(this);return false" condition="!env:extwin" />
@@ -21,13 +22,14 @@
 
 <roundcube:if condition="!env:extwin &amp;&amp; !env:framed" />
 <div id="topnav">
-	<div id="taskbar" class="topright" role="navigation" aria-label="Application Tasks">
-	<roundcube:button command="mail" label="mail" class="button-mail" classSel="button-mail button-selected" innerClass="button-inner" />
-	<roundcube:button command="addressbook" label="addressbook" class="button-addressbook" classSel="button-addressbook button-selected" innerClass="button-inner" />
-	<roundcube:container name="taskbar" id="taskbar" />
-	<roundcube:button command="settings" label="settings" class="button-settings" classSel="button-settings button-selected" innerClass="button-inner" />
-	<roundcube:button command="logout" label="logout" class="button-logout" classSel="button-logout" innerClass="button-inner" />
-	<span class="minmodetoggle"></span>
+	<h2 id="aria-label-tasknav" class="voice">Application Tasks</h2>
+	<div id="taskbar" class="topright" role="navigation" aria-labelledby="aria-label-tasknav">
+		<roundcube:button command="mail" label="mail" class="button-mail" classSel="button-mail button-selected" innerClass="button-inner" />
+		<roundcube:button command="addressbook" label="addressbook" class="button-addressbook" classSel="button-addressbook button-selected" innerClass="button-inner" />
+		<roundcube:container name="taskbar" id="taskbar" />
+		<roundcube:button command="settings" label="settings" class="button-settings" classSel="button-settings button-selected" innerClass="button-inner" />
+		<roundcube:button command="logout" label="logout" class="button-logout" classSel="button-logout" innerClass="button-inner" />
+		<span class="minmodetoggle"></span>
 	</div>
 	<roundcube:object name="logo" src="/images/roundcube_logo.png" id="toplogo" alt="Logo" onclick="if(window.rcmail)rcmail.command('switch-task','mail')" />
 </div>
diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html
index 5efea7cf7..d73fa7dba 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" />
-	<span class="dropbuttontip" id="replyallmenulink" onclick="UI.toggle_popup('replyallmenu',event);return false"></span>
+	<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>
 </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" />
-	<span class="dropbuttontip" id="forwardmenulink" onclick="UI.toggle_popup('forwardmenu',event);return false"></span>
+	<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>
 </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,11 +15,12 @@
 <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" />
-<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" />
+<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" />
 
 <div id="forwardmenu" class="popupmenu">
-	<ul class="toolbarmenu" role="menu">
+	<h3 id="aria-label-forwardmenu" class="voice">Forwarding options</h3>
+	<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-forwardmenu">
 		<li role="menuitem"><roundcube:button command="forward-inline" label="forwardinline" prop="sub" classAct="forwardlink active" class="forwardlink" /></li>
 		<li role="menuitem"><roundcube:button command="forward-attachment" label="forwardattachment" prop="sub" classAct="forwardattachmentlink active" class="forwardattachmentlink" /></li>
 		<roundcube:container name="forwardmenu" id="forwardmenu" />
@@ -27,7 +28,8 @@
 </div>
 
 <div id="replyallmenu" class="popupmenu">
-	<ul class="toolbarmenu" role="menu">
+	<h3 id="aria-label-replyallmenu" class="voice">Reply-all options</h3>
+	<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-replyallmenu">
 		<li role="menuitem"><roundcube:button command="reply-all" label="replyall" prop="sub" class="replyalllink" classAct="replyalllink active" /></li>
 		<li role="menuitem"><roundcube:button command="reply-list" label="replylist" prop="sub" class="replylistlink" classAct="replylistlink active" /></li>
 		<roundcube:container name="replyallmenu" id="replyallmenu" />
@@ -35,7 +37,8 @@
 </div>
 
 <div id="messagemenu" class="popupmenu">
-  <ul class="toolbarmenu iconized" role="menu">
+  <h3 id="aria-label-messagemenu" class="voice">More message toolbar actions</h3>
+  <ul id="messagemenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-messagemenu">
 	<li role="menuitem"><roundcube:button command="print" label="printmessage" class="icon" classAct="icon active" innerclass="icon print" /></li>
 	<li role="menuitem"><roundcube:button command="download" label="emlsave" class="icon" classAct="icon active" innerclass="icon download" /></li>
 	<li role="menuitem"><roundcube:button command="edit" prop="new" label="editasnew" class="icon" classAct="icon active" innerclass="icon edit" /></li>
@@ -48,7 +51,8 @@
 </div>
 
 <div id="markmessagemenu" class="popupmenu">
-  <ul class="toolbarmenu iconized" role="menu">
+  <h3 id="aria-label-markmessagemenu" class="voice">Mark selected messages as...</h3>
+  <ul id="markmessagemenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-markmessagemenu">
 	<li role="menuitem"><roundcube:button command="mark" prop="read" label="markread" classAct="icon active" class="icon" innerclass="icon read" /></li>
 	<li role="menuitem"><roundcube:button command="mark" prop="unread" label="markunread" classAct="icon active" class="icon" innerclass="icon unread" /></li>
 	<li role="menuitem"><roundcube:button command="mark" prop="flagged" label="markflagged" classAct="icon active" class="icon" innerclass="icon flagged" /></li>
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index a3f7e7ba8..c0bd3db5b 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -924,6 +924,16 @@ h3.subject {
 	border-radius: 3px 0 0 0; /* for Opera */
 }
 
+.moreheaderstoggle:focus {
+	background: #f2f2f2;
+	background: -moz-linear-gradient(left, #66bcd9 0, #49b3d2 100%);
+	background: -webkit-gradient(linear, left top, right top, color-stop(0,#66bcd9), color-stop(100%,#49b3d2));
+	background: -o-linear-gradient(left, #66bcd9 0, #49b3d2 100%);
+	background: -ms-linear-gradient(left, #66bcd9 0, #49b3d2 100%);
+	background: linear-gradient(left, #66bcd9 0, #49b3d2 100%);
+	border-right-color: #149cc5;
+}
+
 .moreheaderstoggle .iconlink {
 	display: inline-block;
 	position: absolute;
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 4ef57e722..6c59b88d5 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -35,6 +35,10 @@ img {
   border: 0;
 }
 
+.voice {
+	display: none;
+}
+
 input[type="text"],
 input[type="password"],
 textarea {
@@ -312,6 +316,16 @@ input.button:active {
 	border-left-color: #555;
 }
 
+.buttongroup a.button:focus,
+.buttongroup a.button.selected:focus {
+	background: #f2f2f2;
+	background: -moz-linear-gradient(top, #49b3d2 0, #66bcd9 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#49b3d2), color-stop(100%,#66bcd9));
+	background: -o-linear-gradient(top, #49b3d2 0, #66bcd9 100%);
+	background: -ms-linear-gradient(top, #49b3d2 0, #66bcd9 100%);
+	background: linear-gradient(top, #49b3d2 0, #66bcd9 100%);
+}
+
 .pagenav a.button {
 	padding: 1px 3px;
 	height: 16px;
@@ -948,7 +962,7 @@ a.iconlink.upload {
 #taskbar a:focus {
 	color: #fff;
 	text-shadow: 0px 1px 1px #666;
-	background-color: #3da0c2;
+	background-color: rgba(73,180,210,0.7);
 	outline: none;
 }
 
@@ -1248,8 +1262,8 @@ ul.treelist li a {
 }
 
 ul.treelist li a:focus {
-	color: #fff;
-	background: #4db0d2;
+	color: #fff !important;
+	background-color: rgba(73,180,210,0.6);
 	text-shadow: 0px 1px 1px #666;
 	outline: none;
 }
@@ -1336,7 +1350,7 @@ ul.treelist li.selected > div.expanded {
 
 .boxfooter a.listbutton:focus {
 	color: #fff;
-	background: #4db0d2;
+	background-color: rgba(73,180,210,0.6);
 	text-shadow: 0px 1px 1px #666;
 	outline: none;
 }
@@ -1498,7 +1512,7 @@ table.records-table {
 
 .records-table thead td a:focus {
 	color: #fff;
-	background: #4db0d2;
+	background-color: rgba(73,180,210,0.7);
 	text-shadow: 0px 1px 1px #666;
 	outline: none;
 }
@@ -1938,11 +1952,12 @@ ul.proplist li {
 	border-radius: 0;
 }
 
+.dropbutton .dropbuttontip:focus,
 .toolbar a.button:focus {
 	color: #fff;
 	text-shadow: 0px 1px 1px #666;
-	background-color: #4db0d2;
-	border-radius: 4px;
+	background-color: rgba(30,150,192, 0.5);
+	border-radius: 3px;
 }
 
 .toolbar a.button.disabled {
@@ -1960,12 +1975,16 @@ ul.proplist li {
 	position: absolute;
 	right: 0;
 	top: 0;
-	height: 42px;
+	height: 41px;
 	width: 18px;
+	overflow: hidden;
+	text-indent: -5000px;
 	background: url(images/buttons.png) 0 -1255px no-repeat;
 	cursor: pointer;
+	outline: none;
 }
 
+.dropbutton .dropbuttontip:focus,
 .dropbutton .dropbuttontip:hover {
 	background-position: -26px -1255px;
 }
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index d92324fe8..07020f62b 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -17,8 +17,11 @@
 
 <div id="mainscreen">
 
+<h1 class="voice"><roundcube:label name="mail" /></h1>
+
 <!-- toolbar -->
-<div id="messagetoolbar" class="toolbar" role="toolbar">
+<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
+<div id="messagetoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar">
 	<roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="refresh" title="checkmail" />
 	<roundcube:include file="/includes/mailtoolbar.html" />
 </div>
@@ -27,14 +30,35 @@
 
 <!-- search filter -->
 <div id="searchfilter">
-	<roundcube:object name="searchfilter" class="searchfilter decorated" aria-controls="messagelist" />
+	<label for="messagessearchfilter" class="voice">Email listing filter</label>
+	<roundcube:object name="searchfilter" class="searchfilter decorated" id="messagessearchfilter" aria-controls="messagelist" />
 </div>
 
 <!-- search box -->
-<div id="quicksearchbar" class="searchbox" role="search" aria-label="Email message search form">
+<div id="quicksearchbar" class="searchbox" role="search" aria-labelledby="aria-label-searchform">
+<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 name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.toggle_popup('searchmenu',event);return false" title="searchmod" content=" " />
-<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
+<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.toggle_popup('searchmenu',event);return false" title="searchmod" label="options" aria-haspopup="true" aria-owns="searchmenu-menu" />
+<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content="Reset" />
+
+<div id="searchmenu" class="popupmenu">
+	<h3 id="aria-label-searchmenu" class="voice"><roundcube:label name="searchmod" /></h3>
+	<ul class="toolbarmenu" id="searchmenu-menu" role="menu" aria-labelledby="aria-label-searchmenu">
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="subject" /></span></label></li>
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="from" /></span></label></li>
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="to" /></span></label></li>
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="cc" /></span></label></li>
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="bcc" /></span></label></li>
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="body" id="s_mod_body" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="body" /></span></label></li>
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="msgtext" /></span></label></li>
+		<li role="separator" class="separator"><label><roundcube:label name="searchscope" /></label></li>
+		<li role="menuitem"><label><input type="radio" name="s_scope" value="base" id="s_scope_base" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="currentfolder" /></span></label></li>
+		<li role="menuitem"><label><input type="radio" name="s_scope" value="sub" id="s_scope_sub" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="subfolders" /></span></label></li>
+		<li role="menuitem"><label><input type="radio" name="s_scope" value="all" id="s_scope_all" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="allfolders" /></span></label></li>
+	</ul>
+</div>
+
 </div>
 
 </div>
@@ -43,12 +67,13 @@
 <div id="mailview-left">
 
 <!-- folders list -->
-<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-label="Email folder selection">
+<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
+<h2 id="aria-label-folderlist" class="voice">Email folder selection</h2>
 <div id="folderlist-content" class="scroller withfooter">
 <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;" />
+	<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:if condition="env:quota" />
 		<roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" />
 	<roundcube:endif />
@@ -67,10 +92,13 @@
 
 <!-- messagelist -->
 <div id="messagelistcontainer" class="boxlistcontent">
+<h2 id="aria-label-messagelist" class="voice">Messages list</h2>
 <roundcube:object name="messages"
 	id="messagelist"
 	class="records-table messagelist sortheader fixedheader"
-	optionsmenuIcon="true" />
+	optionsmenuIcon="true"
+    role="grid"
+	aria-labelledby="aria-label-messagelist" />
 </div>
 
 <!-- list footer -->
@@ -81,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"><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-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"><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-owns="threadselectmenu-menu"><span class="handle"><roundcube:label name="threads" /></span></a>
 	<roundcube:endif />
 	</div>
 
@@ -106,7 +134,8 @@
 
 <div id="mailview-bottom" class="uibox">
 
-<div id="mailpreviewframe" class="iframebox">
+<div id="mailpreviewframe" class="iframebox" role="complementary" aria-labelledby="aria-label-mailpreviewframe">
+<h2 id="aria-label-mailpreviewframe" class="voice">Message preview</h2>
 <roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
 </div>
 
@@ -118,59 +147,47 @@
 
 </div><!-- end mainscreen -->
 
-<div id="searchmenu" class="popupmenu">
-	<ul class="toolbarmenu">
-		<li><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="subject" /></span></label></li>
-		<li><label><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="from" /></span></label></li>
-		<li><label><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="to" /></span></label></li>
-		<li><label><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="cc" /></span></label></li>
-		<li><label><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="bcc" /></span></label></li>
-		<li><label><input type="checkbox" name="s_mods[]" value="body" id="s_mod_body" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="body" /></span></label></li>
-		<li><label><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="msgtext" /></span></label></li>
-		<li class="separator"><label><roundcube:label name="searchscope" /></label></li>
-		<li><label><input type="radio" name="s_scope" value="base" id="s_scope_base" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="currentfolder" /></span></label></li>
-		<li><label><input type="radio" name="s_scope" value="sub" id="s_scope_sub" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="subfolders" /></span></label></li>
-		<li><label><input type="radio" name="s_scope" value="all" id="s_scope_all" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="allfolders" /></span></label></li>
-	</ul>
-</div>
-
 <div id="dragmessagemenu" class="popupmenu">
-	<ul class="toolbarmenu">
-		<li><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li>
-		<li><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
+	<ul class="toolbarmenu" role="menu">
+		<li role="menuitem"><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li>
+		<li role="menuitem"><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
 	</ul>
 </div>
 
 <div id="mailboxmenu" class="popupmenu">
-	<ul class="toolbarmenu" id="mailboxoptionsmenu">
-		<li><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li>
-		<li><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li>
-		<li><roundcube:button command="import-messages" name="messageimport" type="link" classAct="active" label="importmessages" onclick="if(rcmail.command_enabled('import-messages'))UI.show_uploadform();return false" /></li>
-		<li><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
+	<h3 id="aria-label-mailboxmenu" class="voice">Folder actions menu</h3>
+	<ul id="mailboxmenu-menu" class="toolbarmenu" id="mailboxoptionsmenu" role="menu" aria-labelledby="aria-label-mailboxmenu">
+		<li role="menuitem"><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li>
+		<li role="menuitem"><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li>
+		<li role="menuitem"><roundcube:button command="import-messages" name="messageimport" type="link" classAct="active" label="importmessages" onclick="if(rcmail.command_enabled('import-messages'))UI.show_uploadform();return false" /></li>
+		<li role="menuitem"><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
 		<roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" />
 	</ul>
 </div>
 
 <div id="listselectmenu" class="popupmenu dropdown">
-	<ul class="toolbarmenu iconized">
-		<li><roundcube:button command="select-all" type="link" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li>
-		<li><roundcube:button command="select-all" type="link" prop="page" label="currpage" class="icon" classAct="icon active" innerclass="icon list" /></li>
-		<li><roundcube:button command="select-all" type="link" prop="unread" label="unread" class="icon" classAct="icon active" innerclass="icon unread" /></li>
-		<li><roundcube:button command="select-all" type="link" prop="flagged" label="flagged" class="icon" classAct="icon active" innerclass="icon flagged" /></li>
-		<li><roundcube:button command="select-all" type="link" prop="invert" label="invert" class="icon" classAct="icon active" innerclass="icon invert" /></li>
-		<li><roundcube:button command="select-none" type="link" label="none" class="icon" classAct="icon active" innerclass="icon cross" /></li>
+	<h3 id="aria-label-listselectmenu" class="voice">List selection menu</h3>
+	<ul id="listselectmenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-listselectmenu">
+		<li role="menuitem"><roundcube:button command="select-all" type="link" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li>
+		<li role="menuitem"><roundcube:button command="select-all" type="link" prop="page" label="currpage" class="icon" classAct="icon active" innerclass="icon list" /></li>
+		<li role="menuitem"><roundcube:button command="select-all" type="link" prop="unread" label="unread" class="icon" classAct="icon active" innerclass="icon unread" /></li>
+		<li role="menuitem"><roundcube:button command="select-all" type="link" prop="flagged" label="flagged" class="icon" classAct="icon active" innerclass="icon flagged" /></li>
+		<li role="menuitem"><roundcube:button command="select-all" type="link" prop="invert" label="invert" class="icon" classAct="icon active" innerclass="icon invert" /></li>
+		<li role="menuitem"><roundcube:button command="select-none" type="link" label="none" class="icon" classAct="icon active" innerclass="icon cross" /></li>
 	</ul>
 </div>
 
 <div id="threadselectmenu" class="popupmenu dropdown">
-	<ul class="toolbarmenu">
-		<li><roundcube:button command="expand-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
-		<li><roundcube:button command="expand-unread" type="link" label="expand-unread" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
-		<li><roundcube:button command="collapse-all" type="link" label="collapse-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
+	<h3 id="aria-label-threadselectmenu" class="voice">Threads listing menu</h3>
+	<ul id="threadselectmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-threadselectmenu">
+		<li role="menuitem"><roundcube:button command="expand-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
+		<li role="menuitem"><roundcube:button command="expand-unread" type="link" label="expand-unread" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
+		<li role="menuitem"><roundcube:button command="collapse-all" type="link" label="collapse-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
 	</ul>
 </div>
 
-<div id="listoptions" class="propform popupdialog">
+<div id="listoptions" class="propform popupdialog" role="dialog" aria-labelledby="aria-label-listoptions">
+<h2 id="aria-label-listoptions" class="voice">Message list display and sorting options</h2>
 <roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" />
 	<fieldset class="floating">
 		<legend><roundcube:label name="listcolumns" /></legend>
diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html
index a661f5720..37ee71fe8 100644
--- a/skins/larry/templates/message.html
+++ b/skins/larry/templates/message.html
@@ -43,12 +43,6 @@
 <div id="messageheader">
 <span class="moreheaderstoggle"></span>
 
-<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
-<div class="message-headers">
-<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" />
-</div>
-<roundcube:object name="messageFullHeaders" id="full-headers" />
-
 <!-- record navigation -->
 <div id="countcontrols" class="pagenav">
 	<roundcube:object name="messageCountDisplay" class="countdisplay" />
@@ -70,11 +64,16 @@
 </div>
 <roundcube:endif />
 
+<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
+<div class="message-headers">
+<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" />
+</div>
+<roundcube:object name="messageFullHeaders" id="full-headers" />
 
 <div id="contactphoto"><roundcube:object name="contactphoto" /></div>
 </div>
 
-<div id="messagecontent">
+<div id="messagecontent" role="main">
 <div class="rightcol">
 <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
 </div>
diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html
index 4a6d76ead..e2be09937 100644
--- a/skins/larry/templates/messagepreview.html
+++ b/skins/larry/templates/messagepreview.html
@@ -7,26 +7,6 @@
 <body class="iframe fullheight">
 
 <div id="messageheader" class="previewheader">
-<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
-
-<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
-<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
-
-<table class="headers-table" id="preview-shortheaders"><tbody><tr>
-<roundcube:if condition="env:mailbox == config:drafts_mbox || env:mailbox == config:sent_mbox">
-	<td class="header-title"><roundcube:label name="to" /></td>
-	<td class="header from"><roundcube:object name="messageHeaders" valueOf="to" max="3" addicon="/images/addcontact.png" /></td>
-<roundcube:else />
-	<td class="header-title"><roundcube:label name="from" /></td>
-	<td class="header from"><roundcube:object name="messageHeaders" valueOf="from" addicon="/images/addcontact.png" /></td>
-<roundcube:endif />
-	<td class="header-title"><roundcube:label name="date" /></td>
-	<td class="header date"><span><roundcube:object name="messageHeaders" valueOf="date" /></span></td>
-</tr></tbody></table>
-
-<roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" max="10" exclude="subject,replyto" />
-
-<roundcube:object name="messageFullHeaders" id="full-headers" />
 
 <!-- record navigation -->
 <div id="countcontrols">
@@ -50,9 +30,30 @@
 	<roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" />
 </div>
 
+<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
+
+<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
+<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
+
+<table class="headers-table" id="preview-shortheaders"><tbody><tr>
+<roundcube:if condition="env:mailbox == config:drafts_mbox || env:mailbox == config:sent_mbox">
+	<td class="header-title"><roundcube:label name="to" /></td>
+	<td class="header from"><roundcube:object name="messageHeaders" valueOf="to" max="3" addicon="/images/addcontact.png" /></td>
+<roundcube:else />
+	<td class="header-title"><roundcube:label name="from" /></td>
+	<td class="header from"><roundcube:object name="messageHeaders" valueOf="from" addicon="/images/addcontact.png" /></td>
+<roundcube:endif />
+	<td class="header-title"><roundcube:label name="date" /></td>
+	<td class="header date"><span><roundcube:object name="messageHeaders" valueOf="date" /></span></td>
+</tr></tbody></table>
+
+<roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" max="10" exclude="subject,replyto" />
+
+<roundcube:object name="messageFullHeaders" id="full-headers" />
+
 </div>
 
-<div id="messagepreview">
+<div id="messagepreview" role="main">
 <div class="rightcol">
 <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
 </div>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index add02b85e..9006b35d2 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -475,6 +475,8 @@ function rcube_mail_ui()
           minHeight: 90
         }).show();
 
+      me.messagedialog.closest('div[role=dialog]').attr('role', 'alertdialog');
+
       me.message_timer = window.setTimeout(dialog_close, p.timeout);
     }
   }
-- 
cgit v1.2.3


From d2bf33b242e9578fcb05bbf1365eeaf1d0dac67c Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 7 May 2014 12:44:10 +0200
Subject: Forward keyboard event through 'menu-open' command to enable keyboard
 navigation

---
 program/js/app.js |  2 +-
 skins/larry/ui.js | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index f0aadd970..fecd5a0ee 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -711,7 +711,7 @@ function rcube_webmail()
         }
 
       case 'menu-save':
-        this.triggerEvent(command, {props:props});
+        this.triggerEvent(command, {props:props, e:event});
         return false;
 
       case 'open':
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 9006b35d2..8476d91c7 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -160,7 +160,10 @@ function rcube_mail_ui()
 
         // add menu link for each attachment
         $('#attachment-list > li').each(function() {
-          $(this).append($('<a class="drop"></a>').click(function() { attachmentmenu(this); }));
+          $(this).append($('<a class="drop" tabindex="0" aria-haspopup="true">Show options</a>')
+              .click(function(e) { attachmentmenu(this, e); return false; })
+              .keypress(function(e){ if (rcube_event.get_keycode(e) == 13) attachmentmenu(this, e); return false; })
+          );
         });
 
         if (get_pref('previewheaders') == '1') {
@@ -491,7 +494,7 @@ function rcube_mail_ui()
     $('#message-objects div a').addClass('button');
 
     if (!$('#attachment-list li').length) {
-      $('div.rightcol').hide();
+      $('div.rightcol').hide().attr('aria-hidden', 'true');
       $('div.leftcol').css('margin-right', '0');
     }
   }
@@ -652,12 +655,12 @@ function rcube_mail_ui()
       ref.focus();
     }
 
-    obj[show?'show':'hide']();
+    obj[show?'show':'hide']().attr('aria-hidden', show?'false':'true');
 
     popup_keyboard_active = show && keyboard;
     if (popup_keyboard_active) {
       focused_popup = popup;
-      obj.find('a,input').not('[aria-disabled=true]').first().focus();
+      obj.find('a,input:not(:disabled)').not('[aria-disabled=true]').first().focus();
     }
     else {
       focused_popup = null;
@@ -819,7 +822,7 @@ function rcube_mail_ui()
   function menu_open(p)
   {
     if (p && p.props && p.props.menu == 'attachmentmenu')
-      show_popupmenu('attachmentmenu');
+      show_popupmenu('attachmentmenu', true, rcube_event.is_keyboard(p.e));
     else
       show_listoptions();
   }
@@ -863,7 +866,7 @@ function rcube_mail_ui()
     }
   }
 
-  function attachmentmenu(elem)
+  function attachmentmenu(elem, event)
   {
     var id = elem.parentNode.id.replace(/^attach/, '');
 
@@ -876,7 +879,7 @@ function rcube_mail_ui()
     });
 
     popupconfig.attachmentmenu.link = elem;
-    rcmail.command('menu-open', {menu: 'attachmentmenu', id: id});
+    rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}, elem, event);
   }
 
   function spellmenu(show)
-- 
cgit v1.2.3


From b2992dd2283c3d0ac95f3293497dfaed0493f607 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 7 May 2014 17:34:28 +0200
Subject: Further accessibility improvements regarding keyboard navigation and
 document structure

---
 plugins/zipdownload/zipdownload.php       |  8 +++-
 program/js/app.js                         | 14 ++++++-
 program/steps/mail/compose.inc            |  5 ++-
 program/steps/mail/func.inc               | 21 ++++++----
 program/steps/mail/show.inc               |  7 +++-
 skins/classic/mail.css                    |  6 ++-
 skins/larry/includes/mailtoolbar.html     |  8 ++--
 skins/larry/mail.css                      | 16 ++++++--
 skins/larry/styles.css                    | 10 +++++
 skins/larry/templates/compose.html        | 50 +++++++++++++----------
 skins/larry/templates/login.html          |  4 +-
 skins/larry/templates/mail.html           | 22 ++++++-----
 skins/larry/templates/message.html        | 33 ++++++++++------
 skins/larry/templates/messageerror.html   | 14 ++++---
 skins/larry/templates/messagepart.html    | 14 ++++---
 skins/larry/templates/messagepreview.html | 11 ++++--
 skins/larry/ui.js                         | 66 ++++++++++++++++++-------------
 17 files changed, 198 insertions(+), 111 deletions(-)

(limited to 'program/js')

diff --git a/plugins/zipdownload/zipdownload.php b/plugins/zipdownload/zipdownload.php
index 90a314437..edb8188cc 100644
--- a/plugins/zipdownload/zipdownload.php
+++ b/plugins/zipdownload/zipdownload.php
@@ -96,7 +96,10 @@ class zipdownload extends rcube_plugin
 
         $rcmail  = rcmail::get_instance();
         $menu    = array();
-        $ul_attr = $rcmail->config->get('skin') == 'classic' ? null : array('class' => 'toolbarmenu');
+        $ul_attr = array('role' => 'menu', 'aria-labelledby' => 'aria-label-zipdownloadmenu');
+        if ($rcmail->config->get('skin') != 'classic') {
+            $ul_attr['class'] = 'toolbarmenu';
+        }
 
         foreach (array('eml', 'mbox', 'maildir') as $type) {
             $menu[] = html::tag('li', null, $rcmail->output->button(array(
@@ -106,7 +109,8 @@ class zipdownload extends rcube_plugin
             )));
         }
 
-        $rcmail->output->add_footer(html::div(array('id' => 'zipdownload-menu', 'class' => 'popupmenu'),
+        $rcmail->output->add_footer(html::div(array('id' => 'zipdownload-menu', 'class' => 'popupmenu', 'aria-hidden' => 'true'),
+            html::tag('h2', array('class' => 'voice', 'id' => 'aria-label-zipdownloadmenu'), "Message Download Options Menu") .
             html::tag('ul', $ul_attr, implode('', $menu))));
     }
 
diff --git a/program/js/app.js b/program/js/app.js
index fecd5a0ee..11236d0cb 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -197,7 +197,7 @@ function rcube_webmail()
 
     // enable general commands
     this.enable_command('close', 'logout', 'mail', 'addressbook', 'settings', 'save-pref',
-      'compose', 'undo', 'about', 'switch-task', 'menu-open', 'menu-save', true);
+      'compose', 'undo', 'about', 'switch-task', 'menu-open', 'menu-close', 'menu-save', true);
 
     // set active task button
     this.set_button(this.task, 'sel');
@@ -711,7 +711,8 @@ function rcube_webmail()
         }
 
       case 'menu-save':
-        this.triggerEvent(command, {props:props, e:event});
+      case 'menu-close':
+        this.triggerEvent(command, {props:props, originalEvent:event});
         return false;
 
       case 'open':
@@ -2316,6 +2317,7 @@ function rcube_webmail()
       url._page = page;
 
     this.http_request('list', url, lock);
+    this.update_state({ _mbox: mbox, _page: (page && page > 1 ? page : null) });
   };
 
   // removes messages that doesn't exists from list selection array
@@ -3592,6 +3594,7 @@ function rcube_webmail()
       $('<a>').addClass('insertresponse active')
         .attr('href', '#')
         .attr('rel', key)
+        .attr('tabindex', '0')
         .html(this.quote_html(response.name))
         .appendTo(li)
         .mousedown(function(e){
@@ -6940,6 +6943,13 @@ function rcube_webmail()
     this.start_keepalive();
   };
 
+  // update browser location to remember current view
+  this.update_state = function(query)
+  {
+    if (window.history.replaceState)
+      window.history.replaceState({}, document.title, rcmail.url('', query));
+  };
+
   // send a http request to the server
   this.http_request = function(action, query, lock)
   {
diff --git a/program/steps/mail/compose.inc b/program/steps/mail/compose.inc
index 2b717d673..b56938596 100644
--- a/program/steps/mail/compose.inc
+++ b/program/steps/mail/compose.inc
@@ -977,7 +977,7 @@ function rcmail_compose_body($attrib)
         $OUTPUT->set_env('spellcheck_langs', join(',', $editor_lang_set));
     }
 
-    $out .= "\n".'<iframe name="savetarget" src="program/resources/blank.gif" style="width:0;height:0;border:none;visibility:hidden;"></iframe>';
+    $out .= "\n".'<iframe name="savetarget" src="program/resources/blank.gif" style="width:0;height:0;border:none;visibility:hidden;" aria-hidden="true"></iframe>';
 
     return $out;
 }
@@ -1864,9 +1864,10 @@ function rcmail_compose_responses_list($attrib)
     foreach ($RCMAIL->get_compose_responses(true) as $response) {
         $key = $response['key'];
         $item = html::a(array(
-            'href '=> '#'.urlencode($response['name']),
+            'href' => '#'.urlencode($response['name']),
             'class' => rtrim('insertresponse ' . $attrib['itemclass']),
             'unselectable' => 'on',
+            'tabindex' => '0',
             'rel' => $key,
         ), rcube::Q($response['name']));
 
diff --git a/program/steps/mail/func.inc b/program/steps/mail/func.inc
index b9971ce0c..811e8782d 100644
--- a/program/steps/mail/func.inc
+++ b/program/steps/mail/func.inc
@@ -507,14 +507,19 @@ function rcmail_message_list_head($attrib, $a_show_cols)
         $a_sort_cols = array('subject', 'date', 'from', 'to', 'fromto', 'size', 'cc');
 
     if (!empty($attrib['optionsmenuicon'])) {
-        $onclick = 'return ' . rcmail_output::JS_OBJECT_NAME . ".command('menu-open', 'messagelistmenu')";
-        if ($attrib['optionsmenuicon'] === true || $attrib['optionsmenuicon'] == 'true')
-            $list_menu = html::div(array('onclick' => $onclick, 'class' => 'listmenu',
-                'id' => 'listmenulink', 'title' => $RCMAIL->gettext('listoptions')));
-        else
-            $list_menu = html::a(array('href' => '#', 'onclick' => $onclick),
-                html::img(array('src' => $skin_path . $attrib['optionsmenuicon'],
-                    'id' => 'listmenulink', 'title' => $RCMAIL->gettext('listoptions'))));
+        $onclick = 'return ' . rcmail_output::JS_OBJECT_NAME . ".command('menu-open', 'messagelistmenu', null, event)";
+        $inner   = 'v';
+        if (is_string($attrib['optionsmenuicon']) && $attrib['optionsmenuicon'] != 'true') {
+            $inner = html::img(array('src' => $skin_path . $attrib['optionsmenuicon'], 'alt' => $RCMAIL->gettext('listoptions')));
+        }
+        $list_menu = html::a(array(
+            'href' => '#list-options',
+            'onclick' => $onclick,
+            'class' => 'listmenu',
+            'id' => 'listmenulink',
+            'title' => $RCMAIL->gettext('listoptions'),
+            'tabindex' => '0',
+        ), $inner);
     }
     else {
         $list_menu = '';
diff --git a/program/steps/mail/show.inc b/program/steps/mail/show.inc
index 9498d1dc5..7f9a23e7d 100644
--- a/program/steps/mail/show.inc
+++ b/program/steps/mail/show.inc
@@ -198,6 +198,7 @@ function rcmail_message_attachments($attrib)
     if (sizeof($MESSAGE->attachments)) {
         foreach ($MESSAGE->attachments as $attach_prop) {
             $filename = rcmail_attachment_name($attach_prop, true);
+            $size = '';
 
             if ($PRINT_MODE) {
                 $size = $RCMAIL->message_part_size($attach_prop);
@@ -212,6 +213,10 @@ function rcmail_message_attachments($attrib)
                     $title = '';
                 }
 
+                if ($attach_prop->size) {
+                    $size = ' ' . html::span('attachment-size', '(' . $RCMAIL->show_bytes($attach_prop->size) . ')');
+                }
+
                 $mimetype = rcmail_fix_mimetype($attach_prop->mimetype);
                 $class    = rcube_utils::file2class($mimetype, $filename);
                 $id       = 'attach' . $attach_prop->mime_id;
@@ -221,7 +226,7 @@ function rcmail_message_attachments($attrib)
                         rcmail_output::JS_OBJECT_NAME, $attach_prop->mime_id),
                     'onmouseover' => $title ? '' : 'rcube_webmail.long_subject_title_ex(this, 0)',
                     'title'       => rcube::Q($title),
-                    ), rcube::Q($filename));
+                    ), rcube::Q($filename) . $size);
 
                 $ol .= html::tag('li', array('class' => $class, 'id' => $id), $link);
 
diff --git a/skins/classic/mail.css b/skins/classic/mail.css
index fc066e023..43a658b7c 100644
--- a/skins/classic/mail.css
+++ b/skins/classic/mail.css
@@ -814,7 +814,7 @@ table.messagelist.fixedcopy
 
 .messagelist tr td div.collapsed,
 .messagelist tr td div.expanded,
-.messagelist tr td.threads div.listmenu,
+.messagelist tr td.threads .listmenu,
 .messagelist tr td.attachment span.attachment,
 .messagelist tr td.attachment span.report,
 .messagelist tr td.priority span.priority,
@@ -954,10 +954,12 @@ table.messagelist.fixedcopy
   cursor: pointer;
 }
 
-.messagelist tr td.threads div.listmenu
+.messagelist tr td.threads .listmenu
 {
   background-position: 0 -238px;
   cursor: pointer;
+  overflow: hidden;
+  text-indent: -5000px;
 }
 
 .messagelist tbody tr td.subject
diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html
index d73fa7dba..ac93d47cb 100644
--- a/skins/larry/includes/mailtoolbar.html
+++ b/skins/larry/includes/mailtoolbar.html
@@ -18,7 +18,7 @@
 <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" />
 
-<div id="forwardmenu" class="popupmenu">
+<div id="forwardmenu" class="popupmenu" aria-hidden="true">
 	<h3 id="aria-label-forwardmenu" class="voice">Forwarding options</h3>
 	<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-forwardmenu">
 		<li role="menuitem"><roundcube:button command="forward-inline" label="forwardinline" prop="sub" classAct="forwardlink active" class="forwardlink" /></li>
@@ -27,7 +27,7 @@
 	</ul>
 </div>
 
-<div id="replyallmenu" class="popupmenu">
+<div id="replyallmenu" class="popupmenu" aria-hidden="true">
 	<h3 id="aria-label-replyallmenu" class="voice">Reply-all options</h3>
 	<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-replyallmenu">
 		<li role="menuitem"><roundcube:button command="reply-all" label="replyall" prop="sub" class="replyalllink" classAct="replyalllink active" /></li>
@@ -36,7 +36,7 @@
 	</ul>
 </div>
 
-<div id="messagemenu" class="popupmenu">
+<div id="messagemenu" class="popupmenu" aria-hidden="true">
   <h3 id="aria-label-messagemenu" class="voice">More message toolbar actions</h3>
   <ul id="messagemenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-messagemenu">
 	<li role="menuitem"><roundcube:button command="print" label="printmessage" class="icon" classAct="icon active" innerclass="icon print" /></li>
@@ -50,7 +50,7 @@
   </ul>
 </div>
 
-<div id="markmessagemenu" class="popupmenu">
+<div id="markmessagemenu" class="popupmenu" aria-hidden="true">
   <h3 id="aria-label-markmessagemenu" class="voice">Mark selected messages as...</h3>
   <ul id="markmessagemenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-markmessagemenu">
 	<li role="menuitem"><roundcube:button command="mark" prop="read" label="markread" classAct="icon active" class="icon" innerclass="icon read" /></li>
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index c0bd3db5b..ff590c45d 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -599,7 +599,7 @@ table.messagelist.fixedcopy {
 
 .messagelist tr td div.collapsed,
 .messagelist tr td div.expanded,
-.messagelist tr td.threads div.listmenu,
+.messagelist tr td.threads .listmenu,
 .messagelist tr td.attachment span.attachment,
 .messagelist tr td.attachment span.report,
 .messagelist tr td.priority span.priority,
@@ -734,10 +734,20 @@ table.messagelist.fixedcopy {
 	cursor: pointer;
 }
 
-.messagelist tr td.threads div.listmenu {
-	background-position: 0 -976px;
+.messagelist tr td.threads .listmenu {
+	background-position: 6px -972px;
 	cursor: pointer;
 	width: 26px;
+	height: 21px;
+	overflow: hidden;
+	text-indent: -5000px;
+	margin: -3px -5px -2px -6px;
+	padding: 3px  5px  2px  6px;
+}
+
+.messagelist tr td.threads .listmenu:focus {
+	background-color: rgba(73,180,210,0.7);
+	outline: none;
 }
 
 .messagelist thead tr td.subject,
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 6c59b88d5..cbff87bec 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -2678,6 +2678,7 @@ ul.toolbarmenu li span.copy {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	line-height: 20px;
+	outline: none;
 }
 
 .attachmentslist li a.drop {
@@ -2689,6 +2690,15 @@ ul.toolbarmenu li span.copy {
 	right: 0;
 	top: 0;
 	padding: 0;
+	overflow: hidden;
+	text-indent: -5000px;
+	outline: none;
+}
+
+.attachmentslist li a:focus,
+.attachmentslist li a.drop:focus {
+	background-color: rgba(30,150,192, 0.5);
+	border-radius: 2px;
 }
 
 #compose-attachments ul li {
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html
index d0338292b..07d935795 100644
--- a/skins/larry/templates/compose.html
+++ b/skins/larry/templates/compose.html
@@ -13,9 +13,11 @@
 
 <div id="mainscreen">
 
+<h1 class="voice"><roundcube:object name="pagetitle" /></h1>
+
 <!-- toolbar -->
-<div id="messagetoolbar" class="fullwidth">
-<div id="mailtoolbar" class="toolbar">
+<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
+<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
 	<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="cancel" condition="!env:extwin" />
 	<roundcube:button command="close" type="link" class="button close disabled" classAct="button close" classSel="button close pressed" label="cancel" condition="env:extwin" />
 	<span class="spacer"></span>
@@ -25,25 +27,26 @@
 	<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" />
-		<span class="dropbuttontip" id="spellmenulink" onclick="UI.show_popup('spellmenu');return false"></span>
+		<a href="#languages" class="dropbuttontip" id="spellmenulink" onclick="UI.toggle_popup('spellmenu',event);return false" aria-haspopup="true"></a>
 	</span>
 	<roundcube:endif />
 	<roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attach pressed" label="attach" title="addattachment" onclick="UI.show_uploadform();return false" />
 	<roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" classSel="button insertsig pressed" label="signature" title="insertsignature" />
-	<a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="UI.show_popup('responsesmenu');return false"><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" aria-haspopup="true" aria-owns="textresponsesmenu"><roundcube:label name="responses" /></a>
 	<roundcube:container name="toolbar" id="compose-toolbar" />
 </div>
-</div>
 
 <div id="mainscreencontent">
 
 <div id="composeview-left">
 
 <!-- inline address book -->
-<div id="compose-contacts" class="uibox listbox">
-<h2 class="boxtitle"><roundcube:label name="contacts" /></h2>
-	<div id="composequicksearch">
+<div id="compose-contacts" class="uibox listbox" role="region" aria-labelledby="aria-label-composecontacts">
+<h2 id="aria-label-composecontacts" class="boxtitle"><roundcube:label name="contacts" /></h2>
+	<div id="composequicksearch" role="search" aria-labelledby="aria-label-composequicksearch">
+		<h3 id="aria-label-composequicksearch" class="voice">Contacts search form</h3>
 		<div class="searchbox">
+			<label for="contactsearchbox" class="voice">Contact search input</label>
 			<roundcube:object name="searchform" id="contactsearchbox" />
 			<a id="searchmenulink" class="iconbutton searchoptions"> </a>
 			<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
@@ -66,12 +69,14 @@
 
 </div>
 
-<div id="composeview-right">
+<div id="composeview-right" role="main">
 
 <roundcube:form name="form" method="post" id="compose-content" class="uibox">
 
 <!-- message headers -->
-<div id="composeheaders">
+<div id="composeheaders" role="region" aria-labelledby="aria-label-composeheaders">
+<h2 id="aria-label-composeheaders" class="voice">Message headers</h2>
+
 <a href="#options" id="composeoptionstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='options' />"></span></a>
 
 <table class="headers-table compose-headers">
@@ -80,7 +85,7 @@
 		<td class="title"><label for="_from"><roundcube:label name="from" /></label></td>
 		<td class="editfield">
 			<roundcube:object name="composeHeaders" part="from" form="form" id="_from" tabindex="1" />
-			<a href="#identities" onclick="return rcmail.command('identities')" class="iconlink edit"><roundcube:label name="editidents" /></a>
+			<a href="#identities" onclick="return rcmail.command('identities')" class="iconlink edit" tabindex="0"><roundcube:label name="editidents" /></a>
 		</td>
 	</tr><tr>
 		<td class="title top"><label for="_to"><roundcube:label name="to" /></label></td>
@@ -129,7 +134,8 @@
 </div>
 
 <!-- (collapsable) message options -->
-<div id="composeoptions">
+<div id="composeoptions" role="region" aria-labelledby="aria-label-composeoptions">
+	<h2 id="aria-label-composeoptions" class="voice">Composition options</h2>
 	<roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
 	<span class="composeoption">
 		<label><roundcube:label name="editortype" />
@@ -163,7 +169,8 @@
 	<div id="composebodycontainer">
 		<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="9" />
 	</div>
-	<div id="compose-attachments" class="rightcol">
+	<div id="compose-attachments" class="rightcol" role="region">
+		<h2 id="aria-label-composeoptions" class="voice"><roundcube:label name="attachments" /></h2>
 		<div style="text-align:center; margin-bottom:20px">
 			<roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform();return false" />
 		</div>
@@ -187,7 +194,8 @@
 
 </div><!-- end mainscreen -->
 
-<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />">
+<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />" aria-hidden="true">
+	<h2 id="aria-label-uploaddialog" class="voice">Attachment upload form</h2>
 	<roundcube:object name="composeAttachmentForm" id="uploadform" buttons="no" />
 	<div class="formbuttons">
 		<roundcube:button command="send-attachment" type="input" class="button mainaction" label="upload" />
@@ -195,15 +203,15 @@
 	</div>
 </div>
 
-<div id="spellmenu" class="popupmenu"></div>
+<div id="spellmenu" class="popupmenu" aria-hidden="true"></div>
 
-<div id="responsesmenu" class="popupmenu">
-    <ul class="toolbarmenu" id="textresponsesmenu">
-		<li class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li>
+<div id="responsesmenu" class="popupmenu" aria-hidden="true">
+	<ul class="toolbarmenu" id="textresponsesmenu" role="menu">
+		<li role="separator" class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li>
 		<roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" />
-		<li class="separator"><label><roundcube:label name="manageresponses" /></label></li>
-		<li><roundcube:button command="save-response" type="link" label="savenewresponse" classAct="active" unselectable="on" /></li>
-		<li><roundcube:button command="responses" type="link" label="editresponses" classAct="active" /></li>
+		<li role="separator" class="separator"><label><roundcube:label name="manageresponses" /></label></li>
+		<li role="menuitem"><roundcube:button command="save-response" type="link" label="savenewresponse" classAct="active" unselectable="on" /></li>
+		<li role="menuitem"><roundcube:button command="responses" type="link" label="editresponses" classAct="active" /></li>
 	</ul>
 </div>
 
diff --git a/skins/larry/templates/login.html b/skins/larry/templates/login.html
index b14d1965e..557b029ee 100644
--- a/skins/larry/templates/login.html
+++ b/skins/larry/templates/login.html
@@ -7,6 +7,8 @@
 </head>
 <body>
 
+<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1>
+
 <div id="login-form">
 <div class="box-inner" role="main">
 <roundcube:object name="logo" src="/images/roundcube_logo.png" id="logo" />
@@ -25,7 +27,7 @@
 </div>
 
 <div id="bottomline" role="contentinfo">
-	<roundcube:var name="config:product_name"> <roundcube:object name="version" condition="config:display_version" />
+	<roundcube:object name="productname" /> <roundcube:object name="version" condition="config:display_version" />
 	<roundcube:if condition="config:support_url" />
 		&nbsp;&#9679;&nbsp; <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a>
 	<roundcube:endif />
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index 07020f62b..b41e4b9ae 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -92,12 +92,13 @@
 
 <!-- messagelist -->
 <div id="messagelistcontainer" class="boxlistcontent">
-<h2 id="aria-label-messagelist" class="voice">Messages list</h2>
+<h2 id="aria-label-messagelist" class="voice">Email Messages Listing</h2>
 <roundcube:object name="messages"
 	id="messagelist"
 	class="records-table messagelist sortheader fixedheader"
 	optionsmenuIcon="true"
-    role="grid"
+	summary="Email Messages Listing"
+	role="grid"
 	aria-labelledby="aria-label-messagelist" />
 </div>
 
@@ -136,7 +137,7 @@
 
 <div id="mailpreviewframe" class="iframebox" role="complementary" aria-labelledby="aria-label-mailpreviewframe">
 <h2 id="aria-label-mailpreviewframe" class="voice">Message preview</h2>
-<roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+<roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="Message preview" />
 </div>
 
 </div><!-- end mailview-bottom -->
@@ -147,14 +148,14 @@
 
 </div><!-- end mainscreen -->
 
-<div id="dragmessagemenu" class="popupmenu">
+<div id="dragmessagemenu" class="popupmenu" aria-hidden="true">
 	<ul class="toolbarmenu" role="menu">
 		<li role="menuitem"><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li>
 		<li role="menuitem"><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
 	</ul>
 </div>
 
-<div id="mailboxmenu" class="popupmenu">
+<div id="mailboxmenu" class="popupmenu" aria-hidden="true">
 	<h3 id="aria-label-mailboxmenu" class="voice">Folder actions menu</h3>
 	<ul id="mailboxmenu-menu" class="toolbarmenu" id="mailboxoptionsmenu" role="menu" aria-labelledby="aria-label-mailboxmenu">
 		<li role="menuitem"><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li>
@@ -165,7 +166,7 @@
 	</ul>
 </div>
 
-<div id="listselectmenu" class="popupmenu dropdown">
+<div id="listselectmenu" class="popupmenu dropdown" aria-hidden="true">
 	<h3 id="aria-label-listselectmenu" class="voice">List selection menu</h3>
 	<ul id="listselectmenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-listselectmenu">
 		<li role="menuitem"><roundcube:button command="select-all" type="link" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li>
@@ -177,7 +178,7 @@
 	</ul>
 </div>
 
-<div id="threadselectmenu" class="popupmenu dropdown">
+<div id="threadselectmenu" class="popupmenu dropdown" aria-hidden="true">
 	<h3 id="aria-label-threadselectmenu" class="voice">Threads listing menu</h3>
 	<ul id="threadselectmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-threadselectmenu">
 		<li role="menuitem"><roundcube:button command="expand-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
@@ -186,7 +187,7 @@
 	</ul>
 </div>
 
-<div id="listoptions" class="propform popupdialog" role="dialog" aria-labelledby="aria-label-listoptions">
+<div id="listoptions" class="propform popupdialog" role="dialog" aria-labelledby="aria-label-listoptions" aria-hidden="true">
 <h2 id="aria-label-listoptions" class="voice">Message list display and sorting options</h2>
 <roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" />
 	<fieldset class="floating">
@@ -236,11 +237,12 @@
 	<br style="clear:both" />
 	<div class="formbuttons">
 		<roundcube:button command="menu-save" id="listmenusave" type="input" class="button mainaction" label="save" />
-		<roundcube:button command="menu-open" id="listmenucancel" type="input" class="button" label="cancel" />
+		<roundcube:button command="menu-close" id="listmenucancel" type="input" class="button" label="cancel" />
 	</div>
 </div>
 
-<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='importmessages' />">
+<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='importmessages' />" aria-hidden="true">
+	<h2 id="aria-label-uploaddialog" class="voice">Message import dialog</h2>
 	<roundcube:object name="messageimportform" id="uploadform" buttons="no" />
 	<div class="formbuttons">
 		<roundcube:button command="import-messages" type="input" class="button mainaction" label="upload" />
diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html
index 37ee71fe8..c7df4d8b3 100644
--- a/skins/larry/templates/message.html
+++ b/skins/larry/templates/message.html
@@ -10,8 +10,11 @@
 
 <div id="mainscreen">
 
+<h1 class="voice"><roundcube:object name="messageHeaders" valueOf="subject" /></h1>
+
 <!-- toolbar -->
-<div id="messagetoolbar" class="toolbar fullwidth">
+<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
+<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
 <roundcube:if condition="!env:extwin" />
 	<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
 <roundcube:endif />
@@ -25,7 +28,8 @@
 <div id="mailview-left">
 
 <!-- folders list -->
-<div id="mailboxcontainer" class="uibox listbox">
+<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
+<h2 id="aria-label-folderlist" class="voice">Email folder selection</h2>
 <div class="scroller">
 <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
 </div>
@@ -33,18 +37,19 @@
 
 </div>
 
-<div id="mailview-right" class="uibox">
+<div id="mailview-right" class="uibox" role="main">
 <roundcube:else />
 <roundcube:object name="mailboxlist" folder_filter="mail" type="js" />
 
-<div id="mailview-right" class="offset fullwidth uibox">
+<div id="mailview-right" class="offset fullwidth uibox" role="main">
 <roundcube:endif />
 
 <div id="messageheader">
 <span class="moreheaderstoggle"></span>
 
 <!-- record navigation -->
-<div id="countcontrols" class="pagenav">
+<div id="countcontrols" class="pagenav" role="navigation" aria-labelledby="aria-label-countcontrols">
+	<h2 id="aria-label-countcontrols" class="voice">Message navigation</h2>
 	<roundcube:object name="messageCountDisplay" class="countdisplay" />
 	<roundcube:button command="previousmessage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previousmessage" content="&amp;lt;" />
 	<roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&amp;gt;" />
@@ -64,7 +69,7 @@
 </div>
 <roundcube:endif />
 
-<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
+<h2 class="subject"><span class="voice"><roundcube:label name="subject" />: </span><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
 <div class="message-headers">
 <roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" />
 </div>
@@ -73,11 +78,13 @@
 <div id="contactphoto"><roundcube:object name="contactphoto" /></div>
 </div>
 
-<div id="messagecontent" role="main">
-<div class="rightcol">
+<div id="messagecontent">
+<div class="rightcol" role="region" aria-labelledby="aria-label-messageattachments">
+<h2 id="aria-label-messageattachments" class="voice"><roundcube:label name="attachments" /></h2>
 <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
 </div>
-<div class="leftcol">
+<div class="leftcol" role="region" aria-labelledby="aria-label-messagebody">
+<h2 id="aria-label-messagebody" class="voice">Message Body</h2>
 <roundcube:object name="messageObjects" id="message-objects" />
 <roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" />
 </div>
@@ -91,10 +98,10 @@
 
 </div><!-- end mainscreen -->
 
-<div id="attachmentmenu" class="popupmenu">
-	<ul class="toolbarmenu">
-		<li><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /></li>
-		<li><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="icon" classAct="icon active" innerclass="icon download" /></li>
+<div id="attachmentmenu" class="popupmenu" aria-hidden="true">
+	<ul class="toolbarmenu" role="menu">
+		<li role="menuitem"><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /></li>
+		<li role="menuitem"><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="icon" classAct="icon active" innerclass="icon download" /></li>
 		<roundcube:container name="attachmentmenu" id="attachmentmenu" />
 	</ul>
 </div>
diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html
index d509ce804..ffe3a873a 100644
--- a/skins/larry/templates/messageerror.html
+++ b/skins/larry/templates/messageerror.html
@@ -16,11 +16,12 @@
 
 <div id="mainscreen">
 
+<h1 class="voice"><roundcube:label name="messageopenerror" /></h1>
+
 <!-- toolbar -->
-<div id="messagetoolbar" class="fullwidth">
-	<div id="mailtoolbar" class="toolbar">
-		<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
-	</div>
+<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
+<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
+	<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
 </div>
 
 <div id="mainscreencontent">
@@ -28,7 +29,8 @@
 <div id="mailview-left">
 
 <!-- folders list -->
-<div id="mailboxcontainer" class="uibox listbox">
+<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
+<h2 id="aria-label-folderlist" class="voice">Email folder selection</h2>
 <div class="scroller">
 	<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
 </div>
@@ -36,7 +38,7 @@
 
 </div>
 
-<div id="mailview-right" class="offset uibox">
+<div id="mailview-right" class="uibox">
 
 <div id="messagecontent" class="watermark"></div>
 
diff --git a/skins/larry/templates/messagepart.html b/skins/larry/templates/messagepart.html
index 3b878c9d7..c76d8a3d5 100644
--- a/skins/larry/templates/messagepart.html
+++ b/skins/larry/templates/messagepart.html
@@ -10,7 +10,10 @@
 
 <div id="mainscreen">
 
-<div id="messagetoolbar" class="toolbar fullwidth">
+<h1 class="voice"><roundcube:label name="attachment" />: <roundcube:var name="env:filename" /></h1>
+
+<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
+<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
 	<roundcube:button command="download" type="link" class="button download disabled" classAct="button download" classSel="button download pressed" label="download" />
 	<roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" />
 	<roundcube:container name="toolbar" id="messagetoolbar" />
@@ -18,16 +21,17 @@
 
 <div id="mainscreencontent">
 
-<div id="messagepartheader" class="uibox listbox">
-	<h2 class="boxtitle"><roundcube:label name="properties" /></h2>
+<div id="messagepartheader" class="uibox listbox" role="contentinfo" aria-labelledby="aria-label-contentinfo">
+	<h2 class="boxtitle" id="aria-label-contentinfo"><roundcube:label name="properties" /></h2>
 	<div class="scroller">
 		<roundcube:object name="messagePartControls" class="listing" />
 	</div>
 </div>
 
-<div id="messagepartcontainer" class="uibox">
+<div id="messagepartcontainer" class="uibox" role="main" aria-labelledby="aria-label-messagepart">
+	<h2 id="aria-label-messagepart" class="voice">Attachment preview</h2>
 	<div class="iframebox">
-	<roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" />
+	<roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" title="Attachment preview" />
 	</div>
 </div>
 
diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html
index e2be09937..0acc0d0ad 100644
--- a/skins/larry/templates/messagepreview.html
+++ b/skins/larry/templates/messagepreview.html
@@ -9,7 +9,8 @@
 <div id="messageheader" class="previewheader">
 
 <!-- record navigation -->
-<div id="countcontrols">
+<div id="countcontrols" role="toolbar" aria-labelledby="aria-label-messagetoolbar">
+<h2 id="aria-label-messagetoolbar" class="voice">Message actions</h2>
 <roundcube:if condition="env:optional_format=='text'" />
 	<span class="buttongroup">
 		<roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="icon" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button changeformat text pressed" innerClass="icon" title="changeformattext" content="Text" />
@@ -30,7 +31,7 @@
 	<roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" />
 </div>
 
-<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
+<h3 class="subject"><span class="voice"><roundcube:label name="subject" />: </span><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
 
 <a href="#details" id="previewheaderstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
 <div id="contactphoto"><roundcube:object name="contactphoto" /></div>
@@ -54,10 +55,12 @@
 </div>
 
 <div id="messagepreview" role="main">
-<div class="rightcol">
+<div class="rightcol" role="region" aria-labelledby="aria-label-messageattachments">
+<h2 id="aria-label-messageattachments" class="voice"><roundcube:label name="attachments" /></h2>
 <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
 </div>
-<div class="leftcol">
+<div class="leftcol" role="region" aria-labelledby="aria-label-messagebody">
+<h2 id="aria-label-messagebody" class="voice">Message Body</h2>
 <roundcube:object name="messageObjects" id="message-objects" />
 <roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" />
 </div>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 8476d91c7..922bb2119 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -141,8 +141,9 @@ function rcube_mail_ui()
 
     /***  mail task  ***/
     if (rcmail.env.task == 'mail') {
-      rcmail.addEventListener('menu-open', menu_open)
-        .addEventListener('menu-save', menu_save)
+      rcmail.addEventListener('menu-open', menu_toggle)
+        .addEventListener('menu-close', menu_toggle)
+        .addEventListener('menu-save', save_listoptions)
         .addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) })
         .addEventListener('responseaftersearch', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) });
 
@@ -161,8 +162,12 @@ function rcube_mail_ui()
         // add menu link for each attachment
         $('#attachment-list > li').each(function() {
           $(this).append($('<a class="drop" tabindex="0" aria-haspopup="true">Show options</a>')
-              .click(function(e) { attachmentmenu(this, e); return false; })
-              .keypress(function(e){ if (rcube_event.get_keycode(e) == 13) attachmentmenu(this, e); return false; })
+              .bind('click keypress', function(e) {
+                  if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) {
+                      attachmentmenu(this, e);
+                      return false;
+                  }
+              })
           );
         });
 
@@ -819,17 +824,12 @@ function rcube_mail_ui()
 
   /**** popup callbacks ****/
 
-  function menu_open(p)
+  function menu_toggle(p)
   {
     if (p && p.props && p.props.menu == 'attachmentmenu')
-      show_popupmenu('attachmentmenu', true, rcube_event.is_keyboard(p.e));
+      show_popupmenu('attachmentmenu', undefined, rcube_event.is_keyboard(p.originalEvent));
     else
-      show_listoptions();
-  }
-
-  function menu_save(prop)
-  {
-    save_listoptions();
+      show_listoptions(p);
   }
 
   function searchmenu(show)
@@ -884,20 +884,24 @@ function rcube_mail_ui()
 
   function spellmenu(show)
   {
-    var link, li,
+    var k, link, li,
       lang = rcmail.spellcheck_lang(),
       menu = popups.spellmenu,
       ul = $('ul', menu);
 
     if (!ul.length) {
-      ul = $('<ul class="toolbarmenu selectable">');
-
-      for (i in rcmail.env.spell_langs) {
-        li = $('<li>');
-        link = $('<a href="#"></a>').text(rcmail.env.spell_langs[i])
-          .addClass('active').data('lang', i)
-          .click(function() {
-            rcmail.spellcheck_lang_set($(this).data('lang'));
+      ul = $('<ul class="toolbarmenu selectable" role="menu">');
+
+      for (k in rcmail.env.spell_langs) {
+        li = $('<li role="menuitem">');
+        link = $('<a href="#'+k+'" tabindex="0"></a>').text(rcmail.env.spell_langs[k])
+          .addClass('active').data('lang', k)
+          .bind('click keypress', function(e) {
+              if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) {
+                  rcmail.spellcheck_lang_set($(this).data('lang'));
+                  show_popupmenu('spellmenu', false, rcube_event.is_keyboard(e))
+                  return false;
+              }
           });
 
         link.appendTo(li);
@@ -911,9 +915,9 @@ function rcube_mail_ui()
     $('li', ul).each(function() {
       var el = $('a', this);
       if (el.data('lang') == lang)
-        el.addClass('selected');
+        el.addClass('selected').attr('aria-selected', 'true');
       else if (el.hasClass('selected'))
-        el.removeClass('selected');
+        el.removeClass('selected').removeAttr('aria-selected');
     });
   }
 
@@ -921,13 +925,13 @@ function rcube_mail_ui()
   /**
    *
    */
-  function show_listoptions()
+  function show_listoptions(p)
   {
     var $dialog = $('#listoptions');
 
     // close the dialog
     if ($dialog.is(':visible')) {
-      $dialog.dialog('close');
+      $dialog.dialog('close', p.originalEvent);
       return;
     }
 
@@ -946,8 +950,13 @@ function rcube_mail_ui()
       resizable: false,
       closeOnEscape: true,
       title: null,
-      close: function() {
+      open: function(e) {
+        setTimeout(function(){ $dialog.find('a, input:not(:disabled)').not('[aria-disabled=true]').first().focus(); }, 100);
+      },
+      close: function(e) {
         $dialog.dialog('destroy').hide();
+        if (e.originalEvent && rcube_event.is_keyboard(e.originalEvent))
+          $('#listmenulink').focus();
       },
       minWidth: 500,
       width: $dialog.width()+25
@@ -958,10 +967,13 @@ function rcube_mail_ui()
   /**
    *
    */
-  function save_listoptions()
+  function save_listoptions(p)
   {
     $('#listoptions').dialog('close');
 
+    if (rcube_event.is_keyboard(p.originalEvent))
+      $('#listmenulink').focus();
+
     var sort = $('input[name="sort_col"]:checked').val(),
       ord = $('input[name="sort_ord"]:checked').val(),
       cols = $('input[name="list_col[]"]:checked')
-- 
cgit v1.2.3


From ea0866a1adc9239b8b115ab2490e1dd88f3c64ec Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 7 May 2014 20:04:13 +0200
Subject: Improve keyboard navigation on compose screen: define tabindex groups
 + enable keyboard controls of contacts list widget

---
 program/include/rcmail_output_html.php |  2 ++
 program/js/app.js                      | 31 +++++++++-------
 program/js/list.js                     |  2 ++
 skins/larry/addressbook.css            | 17 ---------
 skins/larry/mail.css                   | 29 +++++++++++++--
 skins/larry/styles.css                 | 30 ++++++++++++++++
 skins/larry/templates/addressbook.html |  2 +-
 skins/larry/templates/compose.html     | 66 +++++++++++++++++-----------------
 skins/larry/ui.js                      | 13 ++++---
 9 files changed, 121 insertions(+), 71 deletions(-)

(limited to 'program/js')

diff --git a/program/include/rcmail_output_html.php b/program/include/rcmail_output_html.php
index ff660a4df..19a8d142c 100644
--- a/program/include/rcmail_output_html.php
+++ b/program/include/rcmail_output_html.php
@@ -1135,6 +1135,8 @@ EOF;
             $attrib['role'] = 'button';
         }
         if (!empty($attrib['class']) && !empty($attrib['classact']) || !empty($attrib['imagepas']) && !empty($attrib['imageact'])) {
+            if (array_key_exists('tabindex', $attrib))
+                $attrib['data-tabindex'] = $attrib['tabindex'];
             $attrib['tabindex'] = '-1';  // disable button by default
             $attrib['aria-disabled'] = 'true';
         }
diff --git a/program/js/app.js b/program/js/app.js
index 11236d0cb..4c9462afa 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -300,10 +300,12 @@ function rcube_webmail()
             $('a.insertresponse', this.gui_objects.responseslist)
               .attr('unselectable', 'on')
               .mousedown(function(e){ return rcube_event.cancel(e); })
-              .mouseup(function(e){
-                ref.command('insert-response', $(this).attr('rel'));
-                $(document.body).trigger('mouseup');  // hides the menu
-                return rcube_event.cancel(e);
+              .bind('mouseup keypress', function(e){
+                if (e.type == 'mouseup' || rcube_event.get_keycode(e) == 13) {
+                  ref.command('insert-response', $(this).attr('rel'));
+                  $(document.body).trigger('mouseup');  // hides the menu
+                  return rcube_event.cancel(e);
+                }
               });
 
             // avoid textarea loosing focus when hitting the save-response button/link
@@ -337,11 +339,12 @@ function rcube_webmail()
         // init address book widget
         if (this.gui_objects.contactslist) {
           this.contact_list = new rcube_list_widget(this.gui_objects.contactslist,
-            { multiselect:true, draggable:false, keyboard:false });
+            { multiselect:true, draggable:false, keyboard:true });
           this.contact_list
             .addEventListener('initrow', function(o) { ref.triggerEvent('insertrow', { cid:o.uid, row:o }); })
             .addEventListener('select', function(o) { ref.compose_recipient_select(o); })
             .addEventListener('dblclick', function(o) { ref.compose_add_recipient('to'); })
+            .addEventListener('keypress', function(o) { if (o.key_pressed == o.ENTER_KEY) ref.compose_add_recipient('to'); })
             .init();
         }
 
@@ -3600,10 +3603,12 @@ function rcube_webmail()
         .mousedown(function(e){
           return rcube_event.cancel(e);
         })
-        .mouseup(function(e){
-          ref.command('insert-response', key);
-          $(document.body).trigger('mouseup');  // hides the menu
-          return rcube_event.cancel(e);
+        .bind('mouseup keypress', function(e){
+          if (e.type == 'mouseup' || rcube_event.get_keycode(e) == 13) {
+            ref.command('insert-response', $(this).attr('rel'));
+            $(document.body).trigger('mouseup');  // hides the menu
+            return rcube_event.cancel(e);
+          }
         });
     }
   };
@@ -6195,7 +6200,7 @@ function rcube_webmail()
   // set button to a specific state
   this.set_button = function(command, state)
   {
-    var n, button, obj, a_buttons = this.buttons[command],
+    var n, button, obj, $obj, a_buttons = this.buttons[command],
       len = a_buttons ? a_buttons.length : 0;
 
     for (n=0; n<len; n++) {
@@ -6235,8 +6240,9 @@ function rcube_webmail()
         $(obj).button('option', 'disabled', state == 'pas');
       }
       else {
-        $(obj)
-          .attr('tabindex', state == 'pas' || state == 'sel' ? '-1' : '0')
+        $obj = $(obj);
+        $obj
+          .attr('tabindex', state == 'pas' || state == 'sel' ? '-1' : ($obj.attr('data-tabindex') || '0'))
           .attr('aria-disabled', state == 'pas' || state == 'sel' ? 'true' : 'false');
       }
     }
@@ -7147,6 +7153,7 @@ function rcube_webmail()
             this.enable_command('search-create', this.env.source == '');
             this.enable_command('search-delete', this.env.search_id);
             this.update_group_commands();
+            this.contact_list.focus();
             this.triggerEvent('listupdate', { folder:this.env.source, rowcount:this.contact_list.rowcount });
           }
         }
diff --git a/program/js/list.js b/program/js/list.js
index 14dfde379..6a0c5b3b6 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -558,6 +558,8 @@ click_row: function(e, id)
   }
 
   this.rows[id].clicked = now;
+  this.focus();
+
   return false;
 },
 
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css
index bfdd68127..75dc0d8c3 100644
--- a/skins/larry/addressbook.css
+++ b/skins/larry/addressbook.css
@@ -138,23 +138,6 @@
 	background: url(images/listicons.png) -2px -1180px no-repeat;
 }
 
-/* This padding-left should be equal to the focused border-left + the focused padding-left */
-#contacts-table thead tr td:first-child,
-#contacts-table tbody tr td:first-child {
-	border-left: 0;
-	padding-left: 36px;
-}
-
-/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
-#contacts-table tbody tr.focused > td:first-child {
-	border-left: 2px solid #b0ccd7;
-	padding-left: 34px;
-}
-
-#contacts-table tbody tr.selected.focused > td:first-child {
-	border-left-color: #9ec2d0;
-}
-
 #contacts-table .contact td.name {
 	background-position: 6px -1603px;
 }
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index ff590c45d..c5919ffe3 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -1358,13 +1358,19 @@ div.message-partheaders .headers-table td.header {
 	margin-left: 0.5em;
 }
 
-#compose-contacts li a, #contacts-table td {
-	background: url(images/listicons.png) -100px 0 no-repeat;
+#compose-contacts li a,
+#contacts-table td {
+	background-image: url(images/listicons.png);
+	background-position: -100px 0;
+	background-repeat: no-repeat;
 	overflow: hidden;
-	padding-left: 36px;
 	text-overflow: ellipsis;
 }
 
+#compose-contacts li a {
+	padding-left: 36px;
+}
+
 #contacts-table td.contactgroup a {
 	color: #376572;
 	text-decoration: none;
@@ -1386,6 +1392,7 @@ div.message-partheaders .headers-table td.header {
 	background-position: 6px -766px;
 }
 
+#compose-contacts li.addressbook a:focus,
 #compose-contacts li.addressbook.selected a {
 	background-position: 6px -791px;
 }
@@ -1394,20 +1401,36 @@ div.message-partheaders .headers-table td.header {
 	background-position: 6px -1555px;
 }
 
+#contacts-table.focus tr.focused td.contactgroup {
+	background-position: 4px -1555px;
+}
+
 #contacts-table tr.unfocused td.contactgroup,
 #contacts-table tr.selected td.contactgroup {
 	background-position: 6px -1579px;
 }
 
+#contacts-table.focus tr.selected.focused td.contactgroup {
+	background-position: 4px -1579px;
+}
+
 #contacts-table td.contact {
 	background-position: 6px -1603px;
 }
 
+#contacts-table.focus tr.focused td.contact {
+	background-position: 4px -1603px;
+}
+
 #contacts-table tr.unfocused td.contact,
 #contacts-table tr.selected td.contact {
 	background-position: 6px -1627px;
 }
 
+#contacts-table.focus tr.selected.focused td.contact {
+	background-position: 4px -1627px;
+}
+
 #compose-content {
 	position: absolute;
 	top: 0;
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index cbff87bec..e1dbeeaa9 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -1190,6 +1190,36 @@ a.iconlink.upload {
 	height: 14px;
 }
 
+/* This padding-left minus the focused padding left should be half of the focused border-left */
+.listing thead tr td:first-child,
+.listing tbody tr td:first-child {
+	border-left: 0;
+	padding-left: 6px;
+}
+
+.listing.iconized thead tr td:first-child,
+.listing.iconized tbody tr td:first-child {
+	padding-left: 36px;
+}
+
+/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
+.listing.focus tbody tr.focused > td:first-child {
+	border-left: 2px solid #b0ccd7;
+	padding-left: 4px;
+}
+
+.listing.iconized.focus tbody tr.focused > td:first-child {
+	padding-left: 34px;
+}
+
+.listing.focus tbody tr.selected.focused > td:first-child {
+	border-left-color: #9ec2d0;
+}
+
+.listing.inconized.focus tr.focused td:first-child {
+	padding-left: 34px;
+}
+
 .listbox .listitem.selected,
 .listbox .tablink.selected,
 .listbox .listitem.selected > a,
diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html
index 97efdc6f3..0b1009f7e 100644
--- a/skins/larry/templates/addressbook.html
+++ b/skins/larry/templates/addressbook.html
@@ -54,7 +54,7 @@
 <div id="addresslist" class="uibox listbox">
 <roundcube:object name="addresslisttitle" label="contacts" tag="h2" class="boxtitle" />
 <div class="scroller withfooter">
-<roundcube:object name="addresslist" id="contacts-table" class="listing" noheader="true" />
+<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" />
 </div>
 <div class="boxfooter">
 	<roundcube:button command="add" type="link" title="newcontact" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button command="delete" type="link" title="deletecontact" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="x" /><roundcube:button command="group-remove-selected" type="link" title="groupremoveselected" class="listbutton removegroup disabled" classAct="listbutton removegroup" innerClass="inner" content="-" />
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html
index 07d935795..5eedca204 100644
--- a/skins/larry/templates/compose.html
+++ b/skins/larry/templates/compose.html
@@ -18,21 +18,21 @@
 <!-- toolbar -->
 <h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
 <div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
-	<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="cancel" condition="!env:extwin" />
-	<roundcube:button command="close" type="link" class="button close disabled" classAct="button close" classSel="button close pressed" label="cancel" condition="env:extwin" />
+	<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" label="cancel" condition="!env:extwin" tabindex="2" />
+	<roundcube:button command="close" type="link" class="button close disabled" classAct="button close" label="cancel" condition="env:extwin" tabindex="2" />
 	<span class="spacer"></span>
-	<roundcube:button command="send" type="link" class="button send" classAct="button send" classSel="button send pressed" label="send" title="sendmessage" />
-	<roundcube:button command="savedraft" type="link" class="button savedraft" classAct="button savedraft" classSel="button savedraft pressed" label="save" title="savemessage" />
+	<roundcube:button command="send" type="link" class="button send disabled" classAct="button send" label="send" title="sendmessage" tabindex="2" />
+	<roundcube:button command="savedraft" type="link" class="button savedraft disabled" classAct="button savedraft" label="save" title="savemessage" tabindex="2" />
 	<span class="spacer"></span>
 	<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" />
-		<a href="#languages" class="dropbuttontip" id="spellmenulink" onclick="UI.toggle_popup('spellmenu',event);return false" aria-haspopup="true"></a>
+		<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"></a>
 	</span>
 	<roundcube:endif />
-	<roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attach pressed" label="attach" title="addattachment" onclick="UI.show_uploadform();return false" />
-	<roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" classSel="button insertsig pressed" label="signature" title="insertsignature" />
-	<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" aria-haspopup="true" aria-owns="textresponsesmenu"><roundcube:label name="responses" /></a>
+	<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 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>
 	<roundcube:container name="toolbar" id="compose-toolbar" />
 </div>
 
@@ -52,9 +52,9 @@
 			<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
 		</div>
 	</div>
-	<roundcube:object name="addressbooks" id="directorylist" class="listing" />
-	<div class="scroller withfooter">
-		<roundcube:object name="addresslist" id="contacts-table" class="listing" noheader="true" />
+	<roundcube:object name="addressbooks" id="directorylist" class="treelist listing" />
+	<div class="scroller withfooter" tabindex="-1">
+		<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" />
 	</div>
 <div class="boxfooter">
 	<roundcube:button command="add-recipient" prop="to" type="link" title="to" class="listbutton addto disabled" classAct="listbutton addto" innerClass="inner" content="To+" /><roundcube:button command="add-recipient" prop="cc" type="link" title="cc" class="listbutton addcc disabled" classAct="listbutton addcc" innerClass="inner" content="Cc+" /><roundcube:button command="add-recipient" prop="bcc" type="link" title="bcc" class="listbutton addbcc disabled" classAct="listbutton addbcc" innerClass="inner" content="Bcc+" />
@@ -89,42 +89,42 @@
 		</td>
 	</tr><tr>
 		<td class="title top"><label for="_to"><roundcube:label name="to" /></label></td>
-		<td class="editfield"><roundcube:object name="composeHeaders" part="to" form="form" id="_to" cols="70" rows="1" tabindex="2" /></td>
+		<td class="editfield"><roundcube:object name="composeHeaders" part="to" form="form" id="_to" cols="70" rows="1" tabindex="1" aria-required="true" /></td>
 	</tr><tr id="compose-cc">
 		<td class="title top">
 			<label for="_cc"><roundcube:label name="cc" /></label>
-			<a href="#cc" onclick="return UI.hide_header_row('cc');" class="iconbutton cancel" title="<roundcube:label name='delete' />">x</a>
+			<a href="#cc" onclick="return UI.hide_header_row('cc');" class="iconbutton cancel" title="<roundcube:label name='delete' /> <roundcube:label name='cc' />" tabindex="3">x</a>
 		</td>
-		<td class="editfield"><roundcube:object name="composeHeaders" part="cc" form="form" id="_cc" cols="70" rows="1" tabindex="3" /></td>
+		<td class="editfield"><roundcube:object name="composeHeaders" part="cc" form="form" id="_cc" cols="70" rows="1" tabindex="1" /></td>
 	</tr><tr id="compose-bcc">
 		<td class="title top">
 			<label for="_bcc"><roundcube:label name="bcc" /></label>
-			<a href="#bcc" onclick="return UI.hide_header_row('bcc');" class="iconbutton cancel" title="<roundcube:label name='delete' />">x</a>
+			<a href="#bcc" onclick="return UI.hide_header_row('bcc');" class="iconbutton cancel" title="<roundcube:label name='delete' /> <roundcube:label name='bcc' />" tabindex="3">x</a>
 		</td>
-		<td class="editfield"><roundcube:object name="composeHeaders" part="bcc" form="form" id="_bcc" cols="70" rows="1" tabindex="4" /></td>
+		<td class="editfield"><roundcube:object name="composeHeaders" part="bcc" form="form" id="_bcc" cols="70" rows="1" tabindex="1" /></td>
 	</tr><tr id="compose-replyto">
 		<td class="title top">
 			<label for="_replyto"><roundcube:label name="replyto" /></label>
-			<a href="#replyto" onclick="return UI.hide_header_row('replyto');" class="iconbutton cancel" title="<roundcube:label name='delete' />">x</a>
+			<a href="#replyto" onclick="return UI.hide_header_row('replyto');" class="iconbutton cancel" title="<roundcube:label name='delete' /> <roundcube:label name='replyto' />" tabindex="3">x</a>
 		</td>
-		<td class="editfield"><roundcube:object name="composeHeaders" part="replyto" form="form" id="_replyto" size="70" tabindex="5" /></td>
+		<td class="editfield"><roundcube:object name="composeHeaders" part="replyto" form="form" id="_replyto" size="70" tabindex="1" /></td>
 	</tr><tr id="compose-followupto">
 		<td class="title top">
 			<label for="_followupto"><roundcube:label name="followupto" /></label>
-			<a href="#followupto" onclick="return UI.hide_header_row('followupto');" class="iconbutton cancel" title="<roundcube:label name='delete' />">x</a>
+			<a href="#followupto" onclick="return UI.hide_header_row('followupto');" class="iconbutton cancel" title="<roundcube:label name='delete' /> <roundcube:label name='followupto' />" tabindex="3">x</a>
 		</td>
-		<td class="editfield"><roundcube:object name="composeHeaders" part="followupto" form="form" id="_followupto" size="70" tabindex="7" /></td>
+		<td class="editfield"><roundcube:object name="composeHeaders" part="followupto" form="form" id="_followupto" size="70" tabindex="1" /></td>
 	</tr><tr>
 		<td></td>
 		<td class="formlinks">
-			<a href="#cc" onclick="return UI.show_header_row('cc')" id="cc-link" class="iconlink add"><roundcube:label name="addcc" /></a>
-			<a href="#bcc" onclick="return UI.show_header_row('bcc')" id="bcc-link" class="iconlink add"><roundcube:label name="addbcc" /></a>
-			<a href="#reply-to" onclick="return UI.show_header_row('replyto')" id="replyto-link" class="iconlink add"><roundcube:label name="addreplyto" /></a>
-			<a href="#followup-to" onclick="return UI.show_header_row('followupto')" id="followupto-link" class="iconlink add"><roundcube:label name="addfollowupto" /></a>
+			<a href="#cc" onclick="return UI.show_header_row('cc')" id="cc-link" class="iconlink add" tabindex="3"><roundcube:label name="addcc" /></a>
+			<a href="#bcc" onclick="return UI.show_header_row('bcc')" id="bcc-link" class="iconlink add" tabindex="3"><roundcube:label name="addbcc" /></a>
+			<a href="#reply-to" onclick="return UI.show_header_row('replyto')" id="replyto-link" class="iconlink add" tabindex="3"><roundcube:label name="addreplyto" /></a>
+			<a href="#followup-to" onclick="return UI.show_header_row('followupto')" id="followupto-link" class="iconlink add" tabindex="3"><roundcube:label name="addfollowupto" /></a>
 		</td>
 	</tr><tr>
 		<td class="title"><label for="compose-subject"><roundcube:label name="subject" /></label></td>
-		<td class="editfield"><roundcube:object name="composeSubject" id="compose-subject" form="form" tabindex="8" /></td>
+		<td class="editfield"><roundcube:object name="composeSubject" id="compose-subject" form="form" tabindex="1" /></td>
 	</tr>
 </tbody>
 </table>
@@ -139,24 +139,24 @@
 	<roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
 	<span class="composeoption">
 		<label><roundcube:label name="editortype" />
-			<roundcube:object name="editorSelector" editorid="composebody" tabindex="14" /></label>
+			<roundcube:object name="editorSelector" editorid="composebody" tabindex="4" /></label>
 	</span>
 	<roundcube:endif />
 	<span class="composeoption">
 		<label for="rcmcomposepriority"><roundcube:label name="priority" />
-			<roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" /></label>
+			<roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" tabindex="4" /></label>
 	</span>
 	<span class="composeoption">
-		<label><roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" /> <roundcube:label name="returnreceipt" /></label>
+		<label><roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" tabindex="4" /> <roundcube:label name="returnreceipt" /></label>
 	</span>
 	<roundcube:if condition="config:smtp_server != ''" />
 	<span class="composeoption">
-		<label><roundcube:object name="dsnCheckBox" form="form" id="rcmcomposedsn" /> <roundcube:label name="dsn" /></label>
+		<label><roundcube:object name="dsnCheckBox" form="form" id="rcmcomposedsn" tabindex="4" /> <roundcube:label name="dsn" /></label>
 	</span>
 	<roundcube:endif />
 	<roundcube:if condition="!config:no_save_sent_messages" />
 	<span class="composeoption">
-		<label><roundcube:label name="savesentmessagein" /> <roundcube:object name="storetarget" maxlength="30" style="max-width:12em" /></label>
+		<label><roundcube:label name="savesentmessagein" /> <roundcube:object name="storetarget" maxlength="30" style="max-width:12em" tabindex="4" /></label>
 	</span>
 	<roundcube:endif />
 	<roundcube:container name="composeoptions" id="composeoptions" />
@@ -167,12 +167,12 @@
 <!-- message compose body -->
 <div id="composeview-bottom">
 	<div id="composebodycontainer">
-		<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="9" />
+		<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="1" />
 	</div>
 	<div id="compose-attachments" class="rightcol" role="region">
 		<h2 id="aria-label-composeoptions" class="voice"><roundcube:label name="attachments" /></h2>
 		<div style="text-align:center; margin-bottom:20px">
-			<roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform();return false" />
+			<roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform(event);return false" tabindex="1" />
 		</div>
 		<roundcube:object name="composeAttachmentList" id="attachment-list" class="attachmentslist" />
 		<roundcube:object name="fileDropArea" id="compose-attachments" />
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 922bb2119..1d38ceae1 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -195,11 +195,13 @@ function rcube_mail_ui()
           }
         }
 
-        $('#composeoptionstoggle').click(function(){
+        $('#composeoptionstoggle').click(function(e){
           $('#composeoptionstoggle').toggleClass('remove');
           $('#composeoptions').toggle();
           layout_composeview();
           save_pref('composeoptions', $('#composeoptions').is(':visible') ? '1' : '0');
+          if (!rcube_event.is_keyboard(e))
+            this.blur();
           return false;
         }).css('cursor', 'pointer');
 
@@ -1071,7 +1073,7 @@ function rcube_mail_ui()
       });
   }
 
-  function show_uploadform()
+  function show_uploadform(e)
   {
     var $dialog = $('#upload-dialog');
 
@@ -1097,6 +1099,10 @@ function rcube_mail_ui()
       resizable: false,
       closeOnEscape: true,
       title: $dialog.attr('title'),
+      open: function(e) {
+        if (!document.all)
+          $('input[type=file]', $dialog).first().click();
+      },
       close: function() {
         try { $('#upload-dialog form').get(0).reset(); }
         catch(e){ }  // ignore errors
@@ -1106,9 +1112,6 @@ function rcube_mail_ui()
       },
       width: 480
     }).show();
-
-    if (!document.all)
-      $('input[type=file]', $dialog).first().click();
   }
 
   function add_uploadfile(e)
-- 
cgit v1.2.3


From 6789bf1f4dfd32cd54a0fbe520ff3e1a6f6afb8a Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Thu, 8 May 2014 18:19:20 +0200
Subject: Moved popup-menu functions to Roundcube core for seamless integration
 of (stackable) skin and core menus

---
 plugins/zipdownload/zipdownload.js    |  25 +--
 program/js/app.js                     | 291 +++++++++++++++++++++++++++++-----
 program/js/common.js                  |   6 +-
 skins/larry/includes/mailtoolbar.html |   4 +-
 skins/larry/templates/compose.html    |   5 +-
 skins/larry/templates/mail.html       |   6 +-
 skins/larry/ui.js                     | 249 ++++++++---------------------
 7 files changed, 331 insertions(+), 255 deletions(-)

(limited to 'program/js')

diff --git a/plugins/zipdownload/zipdownload.js b/plugins/zipdownload/zipdownload.js
index 644c1e030..af9136c1d 100644
--- a/plugins/zipdownload/zipdownload.js
+++ b/plugins/zipdownload/zipdownload.js
@@ -43,21 +43,10 @@ window.rcmail && rcmail.addEventListener('init', function(evt) {
             link.html('').append(span);
         }
 
-        span.addClass('folder-selector-link').text(rcmail.gettext('zipdownload.download'));
-
+        span.text(rcmail.gettext('zipdownload.download'));
         rcmail.env.download_link = link;
     });
-
-    // hide menu on click out of menu element
-    var fn = function(e) {
-        var menu = $('#zipdownload-menu');
-        if (e.target != menu.get(0))
-            menu.hide();
-    };
-    $(document.body).on('mouseup', fn);
-    $('iframe').contents().on('mouseup', fn)
-        .load(function(e) { try { $(this).contents().on('mouseup', fn); } catch(e) {}; });
-});
+  });
 
 
 function rcmail_zipdownload(mode)
@@ -100,14 +89,10 @@ function rcmail_zipdownload(mode)
 }
 
 // display download options menu
-function rcmail_zipdownload_menu()
+function rcmail_zipdownload_menu(e)
 {
-    // fix menu style and display menu
-    var z_index = rcmail.env.download_link.parents('.popupmenu').css('z-index'),
-        menu = $('#zipdownload-menu').css({'max-height': 'none', 'z-index': z_index + 1}).show();
-
-    // position menu on the screen
-    rcmail.element_position(menu, rcmail.env.download_link);
+    // show (sub)menu for download selection
+    rcmail.command('menu-open', 'zipdownload-menu', e && e.target ? e.target : rcmail.env.download_link, e);
 
     // abort default download action
     return false;
diff --git a/program/js/app.js b/program/js/app.js
index 4c9462afa..dd172cd99 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -46,6 +46,7 @@ function rcube_webmail()
   this.messages = {};
   this.group2expand = {};
   this.http_request_jobs = {};
+  this.menu_stack = new Array();
 
   // webmail client settings
   this.dblclick_time = 500;
@@ -235,7 +236,6 @@ function rcube_webmail()
             return ref.command('sort', $(this).attr('rel'), this);
           });
 
-          document.onmouseup = function(e){ return ref.doc_mouse_up(e); };
           this.gui_objects.messagelist.parentNode.onclick = function(e){ return ref.click_on_list(e || window.event); };
 
           this.enable_command('toggle_status', 'toggle_flag', 'sort', true);
@@ -279,7 +279,7 @@ function rcube_webmail()
           this.env.address_group_stack = [];
           this.env.compose_commands = ['send-attachment', 'remove-attachment', 'send', 'cancel',
             'toggle-editor', 'list-adresses', 'pushgroup', 'search', 'reset-search', 'extwin',
-            'insert-response', 'save-response'];
+            'insert-response', 'save-response', 'menu-open', 'menu-close'];
 
           if (this.env.drafts_mailbox)
             this.env.compose_commands.push('savedraft')
@@ -314,8 +314,6 @@ function rcube_webmail()
             }
           }
 
-          document.onmouseup = function(e){ return ref.doc_mouse_up(e); };
-
           // init message compose form
           this.init_messageform();
         }
@@ -395,7 +393,6 @@ function rcube_webmail()
             this.contact_list.highlight_row(this.env.cid);
 
           this.gui_objects.contactslist.parentNode.onmousedown = function(e){ return ref.click_on_list(e); };
-          document.onmouseup = function(e){ return ref.doc_mouse_up(e); };
 
           $(this.gui_objects.qsearchbox).focusin(function() { ref.contact_list.blur(); });
 
@@ -561,6 +558,18 @@ function rcube_webmail()
         .get(0).addEventListener('drop', function(e){ return ref.file_dropped(e); }, false);
     }
 
+    // catch document (and iframe) mouse clicks
+    var body_mouseup = function(e){ return ref.doc_mouse_up(e); };
+    $(document.body)
+      .bind('mouseup', body_mouseup)
+      .bind('keydown', function(e){ return ref.doc_keypress(e); });
+
+    $('iframe').load(function(e) {
+        try { $(this.contentDocument || this.contentWindow).on('mouseup', body_mouseup);  }
+        catch (e) {/* catch possible "Permission denied" error in IE */ }
+      })
+      .contents().on('mouseup', body_mouseup);
+
     // trigger init event hook
     this.triggerEvent('init', { task:this.task, action:this.env.action });
 
@@ -636,8 +645,8 @@ function rcube_webmail()
     }
 
     // trigger plugin hooks
-    this.triggerEvent('actionbefore', {props:props, action:command});
-    ret = this.triggerEvent('before'+command, props);
+    this.triggerEvent('actionbefore', {props:props, action:command, originalEvent:event});
+    ret = this.triggerEvent('before'+command, props || event);
     if (ret !== undefined) {
       // abort if one of the handlers returned false
       if (ret === false)
@@ -712,9 +721,14 @@ function rcube_webmail()
           var mimetype = this.env.attachments[props.id];
           this.enable_command('open-attachment', mimetype && this.env.mimetypes && $.inArray(mimetype, this.env.mimetypes) >= 0);
         }
+        this.show_menu(props, props.show || undefined, event);
+        break;
 
-      case 'menu-save':
       case 'menu-close':
+        this.hide_menu(props, event);
+        break;
+
+      case 'menu-save':
         this.triggerEvent(command, {props:props, originalEvent:event});
         return false;
 
@@ -900,14 +914,14 @@ function rcube_webmail()
       case 'move':
       case 'moveto': // deprecated
         if (this.task == 'mail')
-          this.move_messages(props, obj);
+          this.move_messages(props, event);
         else if (this.task == 'addressbook')
           this.move_contacts(props);
         break;
 
       case 'copy':
         if (this.task == 'mail')
-          this.copy_messages(props, obj);
+          this.copy_messages(props, event);
         else if (this.task == 'addressbook')
           this.copy_contacts(props);
         break;
@@ -1469,7 +1483,8 @@ function rcube_webmail()
     if (menu && modkey == SHIFT_KEY && this.commands['copy']) {
       var pos = rcube_event.get_mouse_pos(e);
       this.env.drag_target = target;
-      $(menu).css({top: (pos.y-10)+'px', left: (pos.x-10)+'px'}).show();
+      this.show_menu(this.gui_objects.dragmenu.id, true, e);
+      $(menu).css({top: (pos.y-10)+'px', left: (pos.x-10)+'px'});
       return true;
     }
 
@@ -1585,12 +1600,13 @@ function rcube_webmail()
     }
   };
 
+  // global mouse-click handler to cleanup some UI elements
   this.doc_mouse_up = function(e)
   {
-    var list, id;
+    var list, id, target = rcube_event.get_target(e);
 
     // ignore event if jquery UI dialog is open
-    if ($(rcube_event.get_target(e)).closest('.ui-dialog, .ui-widget-overlay').length)
+    if ($(target).closest('.ui-dialog, .ui-widget-overlay').length)
       return;
 
     list = this.message_list || this.contact_list;
@@ -1604,8 +1620,74 @@ function rcube_webmail()
           this.button_out(this.buttons_sel[id], id);
       this.buttons_sel = {};
     }
+
+    // reset popup menus; delayed to have updated menu_stack data
+    window.setTimeout(function(e){
+      var obj, skip, config, id, i;
+      for (i = ref.menu_stack.length - 1; i >= 0; i--) {
+        id = ref.menu_stack[i];
+        obj = $('#' + id);
+
+        if (obj.is(':visible')
+          && target != obj.data('opener')
+          && target != obj.get(0)  // check if scroll bar was clicked (#1489832)
+          && id != skip
+          && (obj.attr('data-editable') != 'true' || !$(target).parents('#' + id).length)
+          && (obj.attr('data-sticky') != 'true' || !rcube_mouse_is_over(e, obj.get(0)))
+        ) {
+          ref.hide_menu(id, e);
+        }
+        skip = obj.data('parent');
+      }
+    }, 10);
   };
 
+  // global keypress event handler
+  this.doc_keypress = function(e)
+  {
+    // Helper method to move focus to the next/prev active menu item
+    var focus_menu_item = function(dir) {
+      var obj, mod = dir < 0 ? 'prevAll' : 'nextAll', limit = dir < 0 ? 'last' : 'first';
+      if (ref.focused_menu && (obj = $('#'+ref.focused_menu))) {
+        return obj.find(':focus').closest('li')[mod](':has(:not([aria-disabled=true]))').find('a,input')[limit]().focus().length;
+      }
+
+      return 0;
+    };
+
+    var target = e.target || {},
+      keyCode = rcube_event.get_keycode(e);
+
+    if (e.keyCode != 27 && (!this.menu_keyboard_active || 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
+        focus_menu_item(mod = keyCode == 38 || keyCode == 63232 ? -1 : 1);
+        break;
+
+      case 9:   // tab
+        if (this.focused_menu) {
+          var mod = rcube_event.get_modifier(e);
+          if (!focus_menu_item(mod == SHIFT_KEY ? -1 : 1)) {
+            this.hide_menu(this.focused_menu, e);
+          }
+        }
+        return rcube_event.cancel(e);
+
+      case 27:  // esc
+        if (this.menu_stack.length)
+          this.hide_menu(this.menu_stack[this.menu_stack.length-1], e);
+        break;
+    }
+
+    return true;
+  }
+
   this.click_on_list = function(e)
   {
     if (this.gui_objects.qsearchbox)
@@ -2707,12 +2789,12 @@ function rcube_webmail()
   };
 
   // copy selected messages to the specified mailbox
-  this.copy_messages = function(mbox, obj)
+  this.copy_messages = function(mbox, event)
   {
     if (mbox && typeof mbox === 'object')
       mbox = mbox.id;
     else if (!mbox)
-      return this.folder_selector(obj, function(folder) { ref.command('copy', folder); });
+      return this.folder_selector(event, function(folder) { ref.command('copy', folder); });
 
     // exit if current or no mailbox specified
     if (!mbox || mbox == this.env.mailbox)
@@ -2729,12 +2811,12 @@ function rcube_webmail()
   };
 
   // move selected messages to the specified mailbox
-  this.move_messages = function(mbox, obj)
+  this.move_messages = function(mbox, event)
   {
     if (mbox && typeof mbox === 'object')
       mbox = mbox.id;
     else if (!mbox)
-      return this.folder_selector(obj, function(folder) { ref.command('move', folder); });
+      return this.folder_selector(event, function(folder) { ref.command('move', folder); });
 
     // exit if current or no mailbox specified
     if (!mbox || (mbox == this.env.mailbox && !this.is_multifolder_listing()))
@@ -3938,7 +4020,7 @@ function rcube_webmail()
 
       // cleanup
       rx = new RegExp(rx_delim + '\\s*' + rx_delim, 'g');
-      input_val = input_val.replace(rx, delim);
+      input_val = String(input_val).replace(rx, delim);
       rx = new RegExp('^[\\s' + rx_delim + ']+');
       input_val = input_val.replace(rx, '');
 
@@ -6736,17 +6818,15 @@ function rcube_webmail()
   };
 
   // create folder selector popup, position and display it
-  this.folder_selector = function(obj, callback)
+  this.folder_selector = function(event, callback)
   {
     var container = this.folder_selector_element;
 
     if (!container) {
       var rows = [],
         delim = this.env.delimiter,
-        ul = $('<ul class="toolbarmenu iconized">'),
-        li = document.createElement('li'),
-        link = document.createElement('a'),
-        span = document.createElement('span');
+        ul = $('<ul class="toolbarmenu">'),
+        link = document.createElement('a');
 
       container = $('<div id="folder-selector" class="popupmenu"></div>');
       link.href = '#';
@@ -6754,33 +6834,30 @@ function rcube_webmail()
 
       // loop over sorted folders list
       $.each(this.env.mailboxes_list, function() {
-        var tmp, n = 0, s = 0,
+        var n = 0, s = 0,
           folder = ref.env.mailboxes[this],
           id = folder.id,
-          a = link.cloneNode(false), row = li.cloneNode(false);
+          a = $(link.cloneNode(false)),
+          row = $('<li>');
 
         if (folder.virtual)
-          a.className += ' virtual';
-        else {
-          a.className += ' active';
-          a.onclick = function() { container.hide().data('callback')(folder.id); };
-        }
+          a.addClass('virtual').attr('aria-disabled', 'true').attr('tabindex', '-1');
+        else
+          a.addClass('active').data('id', folder.id);
 
         if (folder['class'])
-          a.className += ' ' + folder['class'];
+          a.addClass(folder['class']);
 
         // calculate/set indentation level
         while ((s = id.indexOf(delim, s)) >= 0) {
           n++; s++;
         }
-        a.style.paddingLeft =  n ? (n * 16) + 'px' : 0;
+        a.css('padding-left', n ? (n * 16) + 'px' : 0);
 
         // add folder name element
-        tmp = span.cloneNode(false);
-        $(tmp).text(folder.name);
-        a.appendChild(tmp);
+        a.append($('<span>').text(folder.name));
 
-        row.appendChild(a);
+        row.append(a);
         rows.push(row);
       });
 
@@ -6792,23 +6869,157 @@ function rcube_webmail()
 
       // set max-height if the list is long
       if (rows.length > 10)
-        container.css('max-height', $('li', container)[0].offsetHeight * 10 + 9)
+        container.css('max-height', $('li', container)[0].offsetHeight * 10 + 9);
 
+      // register delegate event handler for folder item clicks
+      container.on('click', 'a.active', function(e){
+        container.data('callback')($(this).data('id'));
+        return false;
+      });
+/*
       // hide selector on click out of selector element
       var fn = function(e) { if (e.target != container.get(0)) container.hide(); };
       $(document.body).on('mouseup', fn);
       $('iframe').contents().on('mouseup', fn)
         .load(function(e) { try { $(this).contents().on('mouseup', fn); } catch(e) {}; });
-
+*/
       this.folder_selector_element = container;
     }
 
+    container.data('callback', callback);
+
     // position menu on the screen
-    this.element_position(container, obj);
+    this.show_menu('folder-selector', true, event);
+  };
+
+
+  /***********************************************/
+  /*********    popup menu functions     *********/
+  /***********************************************/
+
+  // Show/hide a specific popup menu
+  this.show_menu = function(prop, show, event)
+  {
+    var name = typeof prop == 'object' ? prop.menu : prop,
+      obj = $('#'+name),
+      ref = event && event.target ? $(event.target) : $(obj.attr('rel') || '#'+name+'link'),
+      keyboard = rcube_event.is_keyboard(event),
+      align = obj.attr('data-align') || '',
+      stack = false;
+
+    if (typeof prop == 'string')
+      prop = { menu:name };
+
+    // let plugins or skins provide the menu element
+    if (!obj.length) {
+      obj = this.triggerEvent('menu-get', { name:name, props:prop, originalEvent:event });
+    }
+
+    if (!obj || !obj.length) {
+      // just delegate the action to subscribers
+      return this.triggerEvent(show === false ? 'menu-close' : 'menu-open', { name:name, props:prop, originalEvent:event });
+    }
+
+    // move element to top for proper absolute positioning
+    obj.appendTo(document.body);
 
-    container.show().data('callback', callback);
+    if (typeof show == 'undefined')
+      show = obj.is(':visible') ? false : true;
+
+    if (show && ref.length) {
+      var win = $(window),
+        pos = ref.offset(),
+        above = align.indexOf('bottom') >= 0;
+
+      stack = ref.attr('role') == 'menuitem' || ref.closest('[role=menuitem]').length > 0;
+
+      ref.offsetWidth = ref.outerWidth();
+      ref.offsetHeight = ref.outerHeight();
+      if (!above && pos.top + ref.offsetHeight + obj.height() > win.height()) {
+        above = true;
+      }
+      if (align.indexOf('right') >= 0) {
+        pos.left = pos.left + ref.outerWidth() - obj.width();
+      }
+      else if (stack) {
+        pos.left = pos.left + ref.offsetWidth - 5;
+        pos.top -= ref.offsetHeight;
+      }
+      if (pos.left + obj.width() > win.width()) {
+        pos.left = win.width() - obj.width() - 12;
+      }
+      pos.top = Math.max(0, pos.top + (above ? -obj.height() : ref.offsetHeight));
+      obj.css({ left:pos.left+'px', top:pos.top+'px' });
+    }
+
+    // add menu to stack
+    if (show) {
+      // truncate stack down to the one containing the ref link
+      for (var i = this.menu_stack.length - 1; stack && i >= 0; i--) {
+        if (!$(ref).parents('#'+this.menu_stack[i]).length)
+          this.hide_menu(this.menu_stack[i]);
+      }
+      if (stack && this.menu_stack.length) {
+        obj.data('parent', this.menu_stack.last());
+        obj.css('z-index', ($('#'+this.menu_stack.last()).css('z-index') || 0) + 1);
+      }
+      else if (!stack && this.menu_stack.length) {
+        this.hide_menu(this.menu_stack[0], event);
+      }
+
+      obj.show().attr('aria-hidden', 'false').data('opener', ref.get(0));
+      this.triggerEvent('menu-open', { name:name, obj:obj, props:prop, originalEvent:event });
+      this.menu_stack.push(name);
+
+      this.menu_keyboard_active = show && keyboard;
+      if (this.menu_keyboard_active) {
+        this.focused_menu = name;
+        obj.find('a,input:not(:disabled)').not('[aria-disabled=true]').first().focus();
+      }
+    }
+    else {  // close menu
+      this.hide_menu(name, event);
+    }
+
+    return show;
   };
 
+  // hide the given popup menu (and it's childs)
+  this.hide_menu = function(name, event)
+  {
+    if (!this.menu_stack.length) {
+      // delegate to subscribers
+      this.triggerEvent('menu-close', { name:name, props:{ menu:name }, originalEvent:event });
+      return;
+    }
+
+    var obj, keyboard = rcube_event.is_keyboard(event);
+    for (var j=this.menu_stack.length-1; j >= 0; j--) {
+      obj = $('#' + this.menu_stack[j]).hide().attr('aria-hidden', 'true').data('parent', false);
+      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();
+        }
+      }
+      this.menu_stack.pop();
+    }
+
+    // focus previous menu in stack
+    if (this.menu_stack.length && keyboard) {
+      this.menu_keyboard_active = true;
+      this.focused_menu = this.menu_stack.last();
+      if (!obj || !obj.data('opener'))
+        $('#'+this.focused_menu).find('a,input:not(:disabled)').not('[aria-disabled=true]').first().focus();
+    }
+    else {
+      this.focused_menu = null;
+      this.menu_keyboard_active = false;
+    }
+  }
+
+
   // position a menu element on the screen in relation to other object
   this.element_position = function(element, obj)
   {
diff --git a/program/js/common.js b/program/js/common.js
index e15c34a3b..b532c36c1 100644
--- a/program/js/common.js
+++ b/program/js/common.js
@@ -297,7 +297,6 @@ is_keyboard: function(e)
  */
 keyboard_only: function(e)
 {
-  console.log(e);
   return rcube_event.is_keyboard(e) ? true : rcube_event.cancel(e);
 },
 
@@ -607,6 +606,11 @@ if (!String.prototype.startsWith) {
   };
 }
 
+// array utility function
+Array.prototype.last = function() {
+  return this[this.length-1];
+}
+
 // jQuery plugin to emulate HTML5 placeholder attributes on input elements
 jQuery.fn.placeholder = function(text) {
   return this.each(function() {
diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html
index ac93d47cb..6af114ac2 100644
--- a/skins/larry/includes/mailtoolbar.html
+++ b/skins/larry/includes/mailtoolbar.html
@@ -20,7 +20,7 @@
 
 <div id="forwardmenu" class="popupmenu" aria-hidden="true">
 	<h3 id="aria-label-forwardmenu" class="voice">Forwarding options</h3>
-	<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-forwardmenu">
+	<ul id="forwardmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-forwardmenu">
 		<li role="menuitem"><roundcube:button command="forward-inline" label="forwardinline" prop="sub" classAct="forwardlink active" class="forwardlink" /></li>
 		<li role="menuitem"><roundcube:button command="forward-attachment" label="forwardattachment" prop="sub" classAct="forwardattachmentlink active" class="forwardattachmentlink" /></li>
 		<roundcube:container name="forwardmenu" id="forwardmenu" />
@@ -29,7 +29,7 @@
 
 <div id="replyallmenu" class="popupmenu" aria-hidden="true">
 	<h3 id="aria-label-replyallmenu" class="voice">Reply-all options</h3>
-	<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-replyallmenu">
+	<ul id="replyallmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-replyallmenu">
 		<li role="menuitem"><roundcube:button command="reply-all" label="replyall" prop="sub" class="replyalllink" classAct="replyalllink active" /></li>
 		<li role="menuitem"><roundcube:button command="reply-list" label="replylist" prop="sub" class="replylistlink" classAct="replylistlink active" /></li>
 		<roundcube:container name="replyallmenu" id="replyallmenu" />
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html
index 5eedca204..14f5a6d2d 100644
--- a/skins/larry/templates/compose.html
+++ b/skins/larry/templates/compose.html
@@ -27,7 +27,7 @@
 	<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"></a>
+		<a href="#languages" class="dropbuttontip" id="spellmenulink" onclick="UI.toggle_popup('spellmenu',event);return false" aria-haspopup="true" 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" />
@@ -77,7 +77,7 @@
 <div id="composeheaders" role="region" aria-labelledby="aria-label-composeheaders">
 <h2 id="aria-label-composeheaders" class="voice">Message headers</h2>
 
-<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='options' />"></span></a>
+<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle" title="<roundcube:label name='options' />"><span class="iconlink"></span></a>
 
 <table class="headers-table compose-headers">
 <tbody>
@@ -167,6 +167,7 @@
 <!-- message compose body -->
 <div id="composeview-bottom">
 	<div id="composebodycontainer">
+		<label for="composebody" class="voice">Message Body</label>
 		<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="1" />
 	</div>
 	<div id="compose-attachments" class="rightcol" role="region">
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index b41e4b9ae..1e360b422 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -39,10 +39,10 @@
 <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 name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.toggle_popup('searchmenu',event);return false" 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-owns="searchmenu-menu" />
 <roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content="Reset" />
 
-<div id="searchmenu" class="popupmenu">
+<div id="searchmenu" class="popupmenu" data-editable="true">
 	<h3 id="aria-label-searchmenu" class="voice"><roundcube:label name="searchmod" /></h3>
 	<ul class="toolbarmenu" id="searchmenu-menu" role="menu" aria-labelledby="aria-label-searchmenu">
 		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="subject" /></span></label></li>
@@ -237,7 +237,7 @@
 	<br style="clear:both" />
 	<div class="formbuttons">
 		<roundcube:button command="menu-save" id="listmenusave" type="input" class="button mainaction" label="save" />
-		<roundcube:button command="menu-close" id="listmenucancel" type="input" class="button" label="cancel" />
+		<roundcube:button command="menu-close" prop="messagelistmenu" id="listmenucancel" type="input" class="button" label="cancel" />
 	</div>
 </div>
 
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 1d38ceae1..5df2ea194 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -20,21 +20,16 @@ function rcube_mail_ui()
     searchmenu:         { editable:1, callback:searchmenu },
     attachmentmenu:     { },
     listoptions:        { editable:1 },
-    dragmenu:           { sticky:1 },
     groupmenu:          { above:1 },
     mailboxmenu:        { above:1 },
     spellmenu:          { callback: spellmenu },
-    // toggle: #1486823, #1486930
-    'attachment-form':  { editable:1, above:1, toggle:!bw.ie&&!bw.linux },
-    'upload-form':      { editable:1, toggle:!bw.ie&&!bw.linux }
+    'folder-selector':  { iconized:1 }
   };
 
   var me = this;
   var mailviewsplit;
   var compose_headers = {};
   var prefs;
-  var focused_popup;
-  var popup_keyboard_active = false;
 
   // export public methods
   this.set = setenv;
@@ -358,55 +353,11 @@ function rcube_mail_ui()
       screen.css('min-width', $('.toolbar').width() + $('#quicksearchbar').width() + $('#searchfilter').width() + 30);
     }
 
-    $(document.body)
-      .bind('mouseup', body_mouseup)
-      .bind('keydown', popup_keypress);
-
-    $('iframe').load(function(e){
-      // this = iframe
-      try {
-        var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null;
-        $(doc).mouseup(body_mouseup);
-      }
-      catch (e) {
-        // catch possible "Permission denied" error in IE
-      };
-    })
-    .contents().mouseup(body_mouseup);
-
     // don't use $(window).resize() due to some unwanted side-effects
     window.onresize = resize;
     resize();
   }
 
-  /**
-   * Handler for mouse-up events on the document body.
-   * This will close all open popup menus
-   */
-  function body_mouseup(e)
-  {
-    var config, obj, target = e.target;
-
-    if (target.className == 'inner')
-        target = e.target.parentNode;
-
-    for (var id in popups) {
-      obj = popups[id];
-      config = popupconfig[id];
-      if (obj.is(':visible')
-        && target.id != id+'link'
-        && target != obj.get(0)  // check if scroll bar was clicked (#1489832)
-        && !config.toggle
-        && (!config.editable || !target_overlaps(target, obj.get(0)))
-        && (!config.sticky || !rcube_mouse_is_over(e, obj.get(0)))
-        && !$(target).is('.folder-selector-link')
-      ) {
-        var myid = id+'';
-        window.setTimeout(function() { show_popupmenu(myid, false); }, 10);
-      }
-    }
-  }
-
   /**
    * Update UI on window resize
    */
@@ -599,146 +550,34 @@ function rcube_mail_ui()
    * Trigger for popup menus
    */
   function toggle_popup(popup, e, config)
-  {
-    show_popup(popup, undefined, config, rcube_event.is_keyboard(e));
-  }
-
-  /**
-   * (Deprecated) trigger for popup menus
-   */
-  function show_popup(popup, show, config, keyboard)
   {
     // auto-register menu object
     if (config || !popupconfig[popup])
       add_popup(popup, config);
 
-    var visible = show_popupmenu(popup, show, keyboard),
-      config = popupconfig[popup];
-    if (typeof config.callback == 'function')
-      config.callback(visible);
+    return rcmail.command('menu-open', popup, e.target, e);
   }
 
   /**
-   * Show/hide a specific popup menu
+   * (Deprecated) trigger for popup menus
    */
-  function show_popupmenu(popup, show, keyboard)
+  function show_popup(popup, show, config)
   {
-    var obj = popups[popup],
-      config = popupconfig[popup],
-      ref = $(config.link ? config.link : '#'+popup+'link'),
-      above = config.above;
-
-    if (!obj) {
-      obj = popups[popup] = $('#'+popup);
-      obj.appendTo(document.body);  // move them to top for proper absolute positioning
-    }
-
-    if (!obj || !obj.length)
-      return false;
-
-    if (typeof show == 'undefined')
-      show = obj.is(':visible') ? false : true;
-    else if (config.toggle && show && obj.is(':visible'))
-      show = false;
-
-    if (show && ref.length) {
-      var parent = ref.parent(),
-        win = $(window),
-        pos;
-
-      if (parent.hasClass('dropbutton'))
-        ref = parent;
+    // auto-register menu object
+    if (config || !popupconfig[popup])
+      add_popup(popup, config);
 
+    config = popupconfig[popup] || {};
+    var ref = $(config.link ? config.link : '#'+popup+'link'),
       pos = ref.offset();
-      ref.offsetHeight = ref.outerHeight();
-      if (!above && pos.top + ref.offsetHeight + obj.height() > win.height())
-        above = true;
-      if (pos.left + obj.width() > win.width())
-        pos.left = win.width() - obj.width() - 12;
-
-      obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.offsetHeight)) });
-    }
-    else if (!show && keyboard && ref.length) {
-      ref.focus();
-    }
-
-    obj[show?'show':'hide']().attr('aria-hidden', show?'false':'true');
-
-    popup_keyboard_active = show && keyboard;
-    if (popup_keyboard_active) {
-      focused_popup = popup;
-      obj.find('a,input:not(:disabled)').not('[aria-disabled=true]').first().focus();
-    }
-    else {
-      focused_popup = null;
-    }
-
-    return show;
-  }
-
-  /** 
-   * Handler for keyboard events on active popups
-   */
-  function popup_keypress(e)
-  {
-    var target = e.target || {},
-      keyCode = rcube_event.get_keycode(e);
-
-    if (e.keyCode != 27 && (!popup_keyboard_active || 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
-        popup_focus_item(mod = keyCode == 38 || keyCode == 63232 ? -1 : 1);
-        break;
-
-      case 9:   // tab
-        if (focused_popup) {
-          var mod = rcube_event.get_modifier(e);
-          if (!popup_focus_item(mod == SHIFT_KEY ? -1 : 1)) {
-            show_popup(focused_popup, false, undefined, true);
-          }
-        }
-        return rcube_event.cancel(e);
-
-      case 27:  // esc
-        for (var id in popups) {
-          if (popups[id].is(':visible'))
-            show_popup(id, false, undefined, true);
-        }
-        break;
-    }
-
-    return true;
-  }
-
-  /**
-   * Helper method to move focus to the next/prev popup menu item
-   */
-  function popup_focus_item(dir)
-  {
-    var obj, mod = dir < 0 ? 'prevAll' : 'nextAll', limit = dir < 0 ? 'last' : 'first';
-    if (focused_popup && (obj = popups[focused_popup])) {
-      return obj.find(':focus').closest('li')[mod](':has(:not([aria-disabled=true]))').find('a,input')[limit]().focus().length;
-    }
-
-    return 0;
-  }
-
-  /**
-   *
-   */
-  function target_overlaps(target, elem)
-  {
-    while (target.parentNode) {
-      if (target.parentNode == elem)
-        return true;
-      target = target.parentNode;
-    }
-    return false;
+    if (ref.has('.inner'))
+      ref = ref.children('.inner');
+
+    // fire command with simulated mouse click event
+    return rcmail.command('menu-open',
+      { menu:popup, show:show },
+      ref.get(0),
+      $.Event('click', { target:ref.get(0), pageX:pos.left, pageY:pos.top, clientX:pos.left, clientY:pos.top }));
   }
 
 
@@ -824,14 +663,51 @@ function rcube_mail_ui()
   }
 
 
-  /**** popup callbacks ****/
+  /**** popup menu callbacks ****/
 
+  /**
+   * Handler for menu-open and menu-close events
+   */
   function menu_toggle(p)
   {
-    if (p && p.props && p.props.menu == 'attachmentmenu')
-      show_popupmenu('attachmentmenu', undefined, rcube_event.is_keyboard(p.originalEvent));
-    else
+    if (p && p.name == 'messagelistmenu') {
       show_listoptions(p);
+    }
+    else if (p) {
+      // adjust menu position according to config
+      var config = popupconfig[p.name] || {},
+        ref = $(config.link || '#'+p.name+'link'),
+        visible = p.obj && p.obj.is(':visible'),
+        above = config.above;
+
+      // fix position according to config
+      if (p.obj && visible && ref.length) {
+        var parent = ref.parent(),
+          win = $(window), pos;
+
+        if (parent.hasClass('dropbutton'))
+          ref = parent;
+
+        if (config.above || ref.hasClass('dropbutton')) {
+          pos = ref.offset();
+          p.obj.css({ left:pos.left+'px', top:(pos.top + (config.above ? -p.obj.height() : ref.outerHeight()))+'px' });
+        }
+      }
+
+      // add the right classes
+      if (p.obj && config.iconized) {
+        p.obj.children('ul').addClass('iconized');
+      }
+
+      // apply some data-attributes from menu config
+      if (p.obj && config.editable)
+        p.obj.attr('data-editable', 'true');
+
+      // trigger callback function
+      if (typeof config.callback == 'function') {
+        config.callback(visible, p);
+      }
+    }
   }
 
   function searchmenu(show)
@@ -884,12 +760,11 @@ function rcube_mail_ui()
     rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}, elem, event);
   }
 
-  function spellmenu(show)
+  function spellmenu(show, p)
   {
     var k, link, li,
       lang = rcmail.spellcheck_lang(),
-      menu = popups.spellmenu,
-      ul = $('ul', menu);
+      ul = $('ul', p.obj);
 
     if (!ul.length) {
       ul = $('<ul class="toolbarmenu selectable" role="menu">');
@@ -901,7 +776,7 @@ function rcube_mail_ui()
           .bind('click keypress', function(e) {
               if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) {
                   rcmail.spellcheck_lang_set($(this).data('lang'));
-                  show_popupmenu('spellmenu', false, rcube_event.is_keyboard(e))
+                  rcmail.hide_menu('spellmenu', e);
                   return false;
               }
           });
@@ -910,7 +785,7 @@ function rcube_mail_ui()
         li.appendTo(ul);
       }
 
-      ul.appendTo(menu);
+      ul.appendTo(p.obj);
     }
 
     // select current language
-- 
cgit v1.2.3


From 93cd38af7dc7a361af488478c31e946a0c5ea10c Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Fri, 9 May 2014 13:35:15 +0200
Subject: Avoid scrolling when list gets back focus (on invisible focus
 element)

---
 program/js/list.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

(limited to 'program/js')

diff --git a/program/js/list.js b/program/js/list.js
index 6a0c5b3b6..fa37353e8 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -115,7 +115,7 @@ init: function()
       // this helps to maintain the natural tab order when moving focus with keyboard
       this.focus_elem = $('<a>')
         .attr('tabindex', '0')
-        .attr('style', 'display:block; width:1px; height:1px; line-height:1px; overflow:hidden; position:absolute; top:-1000px')
+        .attr('style', 'display:block; width:1px; height:1px; line-height:1px; overflow:hidden; position:fixed; top:-1000px')
         .html('Select List')
         .insertAfter(this.list)
         .on('focus', function(e){ me.focus(e); })
@@ -186,9 +186,9 @@ init_header: function()
 
     if (this.fixed_header) {  // copy (modified) fixed header back to the actual table
       $(this.list.tHead).replaceWith($(this.fixed_header).find('thead').clone());
-      $(this.list.tHead).find('tr td').attr('style', '').find('a.sortcol').attr('tabindex', '-1');  // remove fixed widths
+      $(this.list.tHead).find('tr td').attr('style', '').find('a').attr('tabindex', '-1');  // remove fixed widths
     }
-    else if (!bw.touch && this.list.className.indexOf('fixedheader') >= 0 && 0) {
+    else if (!bw.touch && this.list.className.indexOf('fixedheader') >= 0) {
       this.init_fixed_header();
     }
 
@@ -408,7 +408,7 @@ focus: function(e)
   // Un-focus already focused elements (#1487123, #1487316, #1488600, #1488620)
   if (this.focus_elem) {
     // We now fix this by explicitly assigning focus to a dedicated link element
-    this.focus_elem.focus();
+    this.focus_noscroll(this.focus_elem);
   }
   else {
     // It looks that window.focus() does the job for all browsers, but not Firefox (#1489058)
@@ -441,6 +441,16 @@ blur: function(e)
   $(this.list).removeClass('focus');
 },
 
+/**
+ * Focus the given element without scrolling the list container
+ */
+focus_noscroll: function(elem)
+{
+  var y = this.frame.scrollTop || this.frame.scrollY;
+  elem.focus();
+  this.frame.scrollTop = y;
+},
+
 
 /**
  * Set/unset the given column as hidden
-- 
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')

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')

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


From d4d62ac414a3ba706fb65c581581c419a90d5ac9 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Tue, 27 May 2014 16:59:28 +0200
Subject: Set aria-* attributes for autocompletion fields and widgets

---
 program/js/app.js  | 42 +++++++++++++++++++++++++++++-------------
 program/js/list.js |  1 +
 2 files changed, 30 insertions(+), 13 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index 06008b2da..4bd6442b3 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -3381,7 +3381,9 @@ function rcube_webmail()
     this.env.recipients_delimiter = this.env.recipients_separator + ' ';
 
     obj.keydown(function(e) { return ref.ksearch_keydown(e, this, props); })
-      .attr('autocomplete', 'off');
+      .attr('autocomplete', 'off')
+      .attr('aria-autocomplete', 'list')
+      .attr('aria-expanded', 'false');
   };
 
   this.submit_messageform = function(draft)
@@ -4471,7 +4473,7 @@ function rcube_webmail()
 
         var dir = key==38 ? 1 : 0;
 
-        highlight = document.getElementById('rcmksearchSelected');
+        highlight = document.getElementById('rcmkSearchItem' + this.ksearch_selected);
         if (!highlight)
           highlight = this.ksearch_pane.__ul.firstChild;
 
@@ -4519,14 +4521,14 @@ function rcube_webmail()
 
   this.ksearch_select = function(node)
   {
-    var current = $('#rcmksearchSelected');
-    if (current[0] && node) {
-      current.removeAttr('id').removeClass('selected');
+    if (this.ksearch_pane && node) {
+      this.ksearch_pane.find('li.selected').removeClass('selected');
     }
 
     if (node) {
-      $(node).attr('id', 'rcmksearchSelected').addClass('selected');
+      $(node).addClass('selected');
       this.ksearch_selected = node._rcm_id;
+      $(this.ksearch_input).attr('aria-activedecendant', 'rcmkSearchItem' + this.ksearch_selected);
     }
   };
 
@@ -4664,9 +4666,13 @@ function rcube_webmail()
     // create results pane if not present
     if (!this.ksearch_pane) {
       ul = $('<ul>');
-      this.ksearch_pane = $('<div>').attr('id', 'rcmKSearchpane')
+      this.ksearch_pane = $('<div>').attr('id', 'rcmKSearchpane').attr('role', 'listbox')
         .css({ position:'absolute', 'z-index':30000 }).append(ul).appendTo(document.body);
       this.ksearch_pane.__ul = ul[0];
+
+      // register (delegate) event handlers
+      ul.on('mouseover', 'li', function(e){ ref.ksearch_select(e.target); })
+        .on('onmouseup', 'li', function(e){ ref.ksearch_click(e.target); })
     }
 
     ul = this.ksearch_pane.__ul;
@@ -4692,10 +4698,9 @@ function rcube_webmail()
         text = typeof results[i] === 'object' ? results[i].name : results[i];
         type = typeof results[i] === 'object' ? results[i].type : '';
         li = document.createElement('LI');
-        li.innerHTML = text.replace(new RegExp('('+RegExp.escape(value)+')', 'ig'), '##$1%%').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/##([^%]+)%%/g, '<b>$1</b>');
-        li.onmouseover = function(){ ref.ksearch_select(this); };
-        li.onmouseup = function(){ ref.ksearch_click(this) };
-        li._rcm_id = this.env.contacts.length + i;
+        li._rcm_id = i + this.env.contacts.length;
+        li.id = 'rcmkSearchItem' + li._rcm_id;
+        li.innerHTML = this.quote_html(text.replace(new RegExp('('+RegExp.escape(value)+')', 'ig'), '##$1%%')).replace(/##([^%]+)%%/g, '<b>$1</b>');
         if (type) li.className = type;
         ul.appendChild(li);
         maxlen -= 1;
@@ -4706,9 +4711,14 @@ function rcube_webmail()
       this.ksearch_pane.show();
       // select the first
       if (!this.env.contacts.length) {
-        $('li:first', ul).attr('id', 'rcmksearchSelected').addClass('selected');
-        this.ksearch_selected = 0;
+        this.ksearch_select($('li:first', ul).get(0));
       }
+
+      // set the right aria-* attributes to the input field
+      $(this.ksearch_input)
+        .attr('aria-haspopup', 'true')
+        .attr('aria-expanded', 'true')
+        .attr('aria-owns', 'rcmKSearchpane')
     }
 
     if (len)
@@ -4744,6 +4754,12 @@ function rcube_webmail()
     if (this.ksearch_pane)
       this.ksearch_pane.hide();
 
+    $(this.ksearch_input)
+      .attr('aria-haspopup', 'false')
+      .attr('aria-expanded', 'false')
+      .removeAttr('aria-activedecendant')
+      .removeAttr('aria-owns');
+
     this.ksearch_destroy();
   };
 
diff --git a/program/js/list.js b/program/js/list.js
index f64d38bc3..59651b8a2 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -213,6 +213,7 @@ init_fixed_header: function()
   if (!this.fixed_header) {
     this.fixed_header = $('<table>')
       .attr('class', this.list.className + ' fixedcopy')
+      .attr('role', 'presentation')
       .css({ position:'fixed' })
       .append(clone)
       .append('<tbody></tbody>');
-- 
cgit v1.2.3


From f5de03208e80bec1a9be689b55c93d4faade2de0 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Tue, 27 May 2014 17:30:56 +0200
Subject: Replace Array.prototype.last() with jQuery.last to avoid side-effects
 in array iterations

---
 program/js/app.js    | 12 +++++-------
 program/js/common.js |  4 ++--
 2 files changed, 7 insertions(+), 9 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index 4bd6442b3..658f3c569 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -6597,10 +6597,8 @@ function rcube_webmail()
       this.treelist.select(name);
     }
     else if (this.gui_objects.folderlist) {
-      $('li.selected', this.gui_objects.folderlist)
-        .removeClass('selected').addClass('unfocused');
-      $(this.get_folder_li(name, prefix, encode))
-        .removeClass('unfocused').addClass('selected');
+      $('li.selected', this.gui_objects.folderlist).removeClass('selected');
+      $(this.get_folder_li(name, prefix, encode)).addClass('selected');
 
       // trigger event hook
       this.triggerEvent('selectfolder', { folder:name, prefix:prefix });
@@ -6976,8 +6974,8 @@ function rcube_webmail()
           this.hide_menu(this.menu_stack[i]);
       }
       if (stack && this.menu_stack.length) {
-        obj.data('parent', this.menu_stack.last());
-        obj.css('z-index', ($('#'+this.menu_stack.last()).css('z-index') || 0) + 1);
+        obj.data('parent', $.last(this.menu_stack));
+        obj.css('z-index', ($('#'+$.last(this.menu_stack)).css('z-index') || 0) + 1);
       }
       else if (!stack && this.menu_stack.length) {
         this.hide_menu(this.menu_stack[0], event);
@@ -7027,7 +7025,7 @@ function rcube_webmail()
     // focus previous menu in stack
     if (this.menu_stack.length && keyboard) {
       this.menu_keyboard_active = true;
-      this.focused_menu = this.menu_stack.last();
+      this.focused_menu = $.last(this.menu_stack);
       if (!obj || !obj.data('opener'))
         $('#'+this.focused_menu).find('a,input:not(:disabled)').not('[aria-disabled=true]').first().focus();
     }
diff --git a/program/js/common.js b/program/js/common.js
index b532c36c1..ee38c3528 100644
--- a/program/js/common.js
+++ b/program/js/common.js
@@ -607,8 +607,8 @@ if (!String.prototype.startsWith) {
 }
 
 // array utility function
-Array.prototype.last = function() {
-  return this[this.length-1];
+jQuery.last = function(arr) {
+  return arr && arr.length ? arr[arr.length-1] : undefined;
 }
 
 // jQuery plugin to emulate HTML5 placeholder attributes on input elements
-- 
cgit v1.2.3


From 1791a1e7a23c0aaf126ba099a73564e8c4e88cee Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Tue, 27 May 2014 17:39:26 +0200
Subject: Remove list row 'unfocused' state and keep 'selected' classes even
 when list loses focus. For visual distinguishing .focus tr.selected can be
 used

---
 program/js/list.js          | 22 +++-------------------
 skins/classic/mail.css      | 12 +++---------
 skins/larry/addressbook.css | 10 ++++------
 skins/larry/styles.css      | 15 ++++-----------
 4 files changed, 14 insertions(+), 45 deletions(-)

(limited to 'program/js')

diff --git a/program/js/list.js b/program/js/list.js
index 59651b8a2..62f1b1c9d 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -393,16 +393,8 @@ focus: function(e)
   if (this.focused)
     return;
 
-  var n, id;
   this.focused = true;
 
-  for (n in this.selection) {
-    id = this.selection[n];
-    if (this.rows[id] && this.rows[id].obj) {
-      $(this.rows[id].obj).addClass('selected').removeClass('unfocused');
-    }
-  }
-
   if (e)
     rcube_event.cancel(e);
 
@@ -430,15 +422,7 @@ focus: function(e)
  */
 blur: function(e)
 {
-  var n, id;
   this.focused = false;
-  for (n in this.selection) {
-    id = this.selection[n];
-    if (this.rows[id] && this.rows[id].obj) {
-      $(this.rows[id].obj).removeClass('selected focused').addClass('unfocused');
-    }
-  }
-  
   $(this.list).removeClass('focus');
 },
 
@@ -1087,7 +1071,7 @@ select_all: function(filter)
       this.highlight_row(n, true, true);
     }
     else {
-      $(this.rows[n].obj).removeClass('selected').removeClass('unfocused').removeAttr('aria-selected');
+      $(this.rows[n].obj).removeClass('selected').removeAttr('aria-selected');
     }
   }
 
@@ -1144,7 +1128,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').removeAttr('aria-selected');
+        $(this.rows[this.selection[n]].obj).removeClass('selected').removeAttr('aria-selected');
       }
 
     this.selection = [];
@@ -1223,7 +1207,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').removeAttr('aria-selected');
+      $(this.rows[id].obj).removeClass('selected').removeAttr('aria-selected');
       if (!norecur && !this.rows[id].expanded)
         this.highlight_children(id, false);
     }
diff --git a/skins/classic/mail.css b/skins/classic/mail.css
index 43a658b7c..0a4653a3a 100644
--- a/skins/classic/mail.css
+++ b/skins/classic/mail.css
@@ -1058,23 +1058,17 @@ table.messagelist.fixedcopy
 }
 
 .messagelist tr.selected td
-{
-  color: #FFFFFF;
-  background-color: #CC3333;
-}
-
-.messagelist tr.unfocused td
 {
   color: #FFFFFF;
   background-color: #929292;
 }
 
-.messagelist tr.selected td a
+.messagelist.focus tr.selected td
 {
-  color: #FFFFFF;
+  background-color: #CC3333;
 }
 
-.messagelist tr.unfocused td a
+.messagelist tr.selected td a
 {
   color: #FFFFFF;
 }
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css
index 75dc0d8c3..8350d0a59 100644
--- a/skins/larry/addressbook.css
+++ b/skins/larry/addressbook.css
@@ -146,13 +146,12 @@
 	background-position: 4px -1603px;
 }
 
-#contacts-table .contact.selected td.name,
-#contacts-table .contact.unfocused td.name {
+#contacts-table .contact.selected td.name {
 	background-position: 6px -1627px;
 	font-weight: bold;
 }
 
-#contacts-table .contact.selected.focused td.name {
+#contacts-table.focus .contact.selected.focused td.name {
 	background-position: 4px -1627px;
 }
 
@@ -164,13 +163,12 @@
 	background-position: 4px -1555px;
 }
 
-#contacts-table .group.selected td.name,
-#contacts-table .group.unfocused td.name {
+#contacts-table .group.selected td.name {
 	background-position: 6px -1579px;
 	font-weight: bold;
 }
 
-#contacts-table .group.selected.focused td.name {
+#contacts-table.focus .group.selected.focused td.name {
 	background-position: 4px -1579px;
 }
 
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index e1dbeeaa9..a84202800 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -1224,7 +1224,6 @@ a.iconlink.upload {
 .listbox .tablink.selected,
 .listbox .listitem.selected > a,
 .listbox .tablink.selected > a,
-.listing tbody tr.unfocused td,
 .listing tbody tr.selected td,
 .listing li.selected,
 .listing li.selected > a {
@@ -1577,6 +1576,10 @@ table.records-table {
 
 .records-table tr.selected td {
 	color: #fff !important;
+	background-color: #4db0d2 !important;
+}
+
+.records-table.focus tr.selected td {
 	background: #019bc6;
 	background: -moz-linear-gradient(top, #019bc6 0%, #017cb4 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019bc6), color-stop(100%,#017cb4));
@@ -1590,16 +1593,6 @@ table.records-table {
 	color: #fff !important;
 }
 
-.records-table tr.unfocused td {
-	color: #fff !important;
-	background-color: #4db0d2 !important;
-}
-
-.records-table tr.unfocused td a,
-.records-table tr.unfocused td span {
-	color: #fff !important;
-}
-
 .records-table tr.deleted td,
 .records-table tr.deleted td a {
 	color: #ccc !important;
-- 
cgit v1.2.3


From d0d7f43ef53d71322a8793ec10f7179f30615127 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Tue, 27 May 2014 19:22:11 +0200
Subject: More aria-* improvements to toggle buttons and autocompletion lists

---
 program/js/app.js                         | 19 ++++++++++---------
 program/localization/en_US/labels.inc     |  1 +
 skins/larry/templates/compose.html        |  8 ++++----
 skins/larry/templates/messagepreview.html | 10 +++++-----
 skins/larry/ui.js                         | 14 +++++++-------
 5 files changed, 27 insertions(+), 25 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index 658f3c569..41f9a3859 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -4522,11 +4522,11 @@ function rcube_webmail()
   this.ksearch_select = function(node)
   {
     if (this.ksearch_pane && node) {
-      this.ksearch_pane.find('li.selected').removeClass('selected');
+      this.ksearch_pane.find('li.selected').removeClass('selected').removeAttr('aria-selected');
     }
 
     if (node) {
-      $(node).addClass('selected');
+      $(node).addClass('selected').removeAttr('aria-selected', 'true');
       this.ksearch_selected = node._rcm_id;
       $(this.ksearch_input).attr('aria-activedecendant', 'rcmkSearchItem' + this.ksearch_selected);
     }
@@ -4659,7 +4659,7 @@ function rcube_webmail()
       return;
 
     // display search results
-    var i, len, ul, li, text, type, init,
+    var i, id, len, ul, text, type, init,
       value = this.ksearch_value,
       maxlen = this.env.autocomplete_max ? this.env.autocomplete_max : 15;
 
@@ -4697,12 +4697,13 @@ function rcube_webmail()
       for (i=0; i < len && maxlen > 0; i++) {
         text = typeof results[i] === 'object' ? results[i].name : results[i];
         type = typeof results[i] === 'object' ? results[i].type : '';
-        li = document.createElement('LI');
-        li._rcm_id = i + this.env.contacts.length;
-        li.id = 'rcmkSearchItem' + li._rcm_id;
-        li.innerHTML = this.quote_html(text.replace(new RegExp('('+RegExp.escape(value)+')', 'ig'), '##$1%%')).replace(/##([^%]+)%%/g, '<b>$1</b>');
-        if (type) li.className = type;
-        ul.appendChild(li);
+        id = i + this.env.contacts.length;
+        $('<li>').attr('id', 'rcmkSearchItem' + id)
+          .attr('role', 'option')
+          .html(this.quote_html(text.replace(new RegExp('('+RegExp.escape(value)+')', 'ig'), '##$1%%')).replace(/##([^%]+)%%/g, '<b>$1</b>'))
+          .addClass(type || '')
+          .appendTo(ul)
+          .get(0)._rcm_id = id;
         maxlen -= 1;
       }
     }
diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc
index 3ac7f03aa..23f22a969 100644
--- a/program/localization/en_US/labels.inc
+++ b/program/localization/en_US/labels.inc
@@ -259,6 +259,7 @@ $labels['upload'] = 'Upload';
 $labels['uploadprogress'] = '$percent ($current from $total)';
 $labels['close']  = 'Close';
 $labels['messageoptions']  = 'Message options...';
+$labels['togglecomposeoptions'] = 'Toggle composition options';
 
 $labels['low']     = 'Low';
 $labels['lowest']  = 'Lowest';
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html
index d51a30f34..87993ed70 100644
--- a/skins/larry/templates/compose.html
+++ b/skins/larry/templates/compose.html
@@ -77,7 +77,7 @@
 <div id="composeheaders" role="region" aria-labelledby="aria-label-composeheaders">
 <h2 id="aria-label-composeheaders" class="voice"><roundcube:label name="arialabelmessageheaders" /></h2>
 
-<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle" title="<roundcube:label name='options' />"><span class="iconlink"></span></a>
+<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle" title="<roundcube:label name='togglecomposeoptions' />" aria-exapnded="false"><span class="iconlink"></span></a>
 
 <table class="headers-table compose-headers">
 <tbody>
@@ -130,7 +130,7 @@
 </table>
 
 <div id="composebuttons" class="formbuttons">
-	<roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" condition="!env:extwin" />
+	<roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" label="openinextwin" condition="!env:extwin" />
 </div>
 
 <!-- (collapsable) message options -->
@@ -170,8 +170,8 @@
 		<label for="composebody" class="voice"><roundcube:label name="arialabelmessagebody" /></label>
 		<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="1" />
 	</div>
-	<div id="compose-attachments" class="rightcol" role="region">
-		<h2 id="aria-label-composeoptions" class="voice"><roundcube:label name="attachments" /></h2>
+	<div id="compose-attachments" class="rightcol" role="region" aria-labelledby="aria-label-composeattachments">
+		<h2 id="aria-label-composeattachments" class="voice"><roundcube:label name="attachments" /></h2>
 		<div style="text-align:center; margin-bottom:20px">
 			<roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform(event);return false" tabindex="1" />
 		</div>
diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html
index 0acc0d0ad..97efdf3e7 100644
--- a/skins/larry/templates/messagepreview.html
+++ b/skins/larry/templates/messagepreview.html
@@ -23,17 +23,17 @@
 	&nbsp;
 <roundcube:endif />
 <roundcube:if condition="env:mailbox != config:drafts_mbox">
-	<roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="icon" title="replytomessage" content="&lt;-" />
-	<roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="icon" title="replytoallmessage" content="&lt;&lt;-" />
-	<roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="icon" title="forwardmessage" content="-&gt;" />
+	<roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="icon" title="replytomessage" label="replytomessage" />
+	<roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="icon" title="replytoallmessage" label="replytoallmessage" />
+	<roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="icon" title="forwardmessage" label="forwardmessage" />
 	&nbsp;
 <roundcube:endif />
-	<roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" />
+	<roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" label="openinextwin" />
 </div>
 
 <h3 class="subject"><span class="voice"><roundcube:label name="subject" />: </span><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
 
-<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
+<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle" aria-expanded="false"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
 <div id="contactphoto"><roundcube:object name="contactphoto" /></div>
 
 <table class="headers-table" id="preview-shortheaders"><tbody><tr>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 5df2ea194..af801088d 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -191,10 +191,10 @@ function rcube_mail_ui()
         }
 
         $('#composeoptionstoggle').click(function(e){
-          $('#composeoptionstoggle').toggleClass('remove');
-          $('#composeoptions').toggle();
+          var expanded = $('#composeoptions').toggle().is(':visible');
+          $('#composeoptionstoggle').toggleClass('remove').attr('aria-expanded', expanded ? 'true' : 'false');
           layout_composeview();
-          save_pref('composeoptions', $('#composeoptions').is(':visible') ? '1' : '0');
+          save_pref('composeoptions', expanded ? '1' : '0');
           if (!rcube_event.is_keyboard(e))
             this.blur();
           return false;
@@ -218,7 +218,7 @@ function rcube_mail_ui()
       }
       else if (rcmail.env.action == 'list' || !rcmail.env.action) {
         var previewframe = $('#mailpreviewframe').is(':visible');
-        $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').click(function(e){ toggle_preview_pane(e); return false });
+        $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').attr('aria-expanded', previewframe ? 'true' : 'false').click(function(e){ toggle_preview_pane(e); return false });
         $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false });
         $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false });
 
@@ -593,7 +593,7 @@ function rcube_mail_ui()
       topstyles, bottomstyles, uid;
 
     frame.toggle();
-    button.removeClass().addClass(visible ? 'enabled' : 'closed');
+    button.removeClass().toggleClass('enabled closed').attr('aria-expanded', visible ? 'true' : 'false');
 
     if (visible) {
       $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' });
@@ -643,9 +643,9 @@ function rcube_mail_ui()
 
     // add toggle button to full headers table
     if (full.is(':visible'))
-      button.attr('href', '#hide').removeClass('add').addClass('remove')
+      button.attr('href', '#hide').removeClass('add').addClass('remove').attr('aria-expanded', 'true');
     else
-      button.attr('href', '#details').removeClass('remove').addClass('add')
+      button.attr('href', '#details').removeClass('remove').addClass('add').attr('aria-expanded', 'false');
 
     save_pref('previewheaders', full.is(':visible') ? '1' : '0');
   }
-- 
cgit v1.2.3


From 8fd955eb1eb7b6e3a1e0275bf8481c287dd6afc0 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 28 May 2014 17:34:38 +0200
Subject: Improve (message) list widget display and keyboard navigation to show
 sane behavior with screen readers

---
 program/js/app.js        | 104 +++++++++++++++++++++++++++++++----------------
 program/js/list.js       |  58 ++++++++++++++++++--------
 skins/classic/common.css |   3 +-
 skins/larry/styles.css   |   2 +
 4 files changed, 115 insertions(+), 52 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index 41f9a3859..bf163c614 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -1974,7 +1974,7 @@ function rcube_webmail()
       flags: flags.extra_flags
     });
 
-    var c, n, col, html, css_class,
+    var c, n, col, html, css_class, label, status_class = '', status_label = '',
       tree = '', expando = '',
       list = this.message_list,
       rows = list.rows,
@@ -1990,17 +1990,26 @@ function rcube_webmail()
     css_class = 'msgicon';
     if (this.env.status_col === null) {
       css_class += ' status';
-      if (flags.deleted)
-        css_class += ' deleted';
-      else if (!flags.seen)
-        css_class += ' unread';
-      else if (flags.unread_children > 0)
-        css_class += ' unreadchildren';
+      if (flags.deleted) {
+        status_class += ' deleted';
+        status_label += this.get_label('deleted') + ' ';
+      }
+      else if (!flags.seen) {
+        status_class += ' unread';
+        status_label += this.get_label('unread') + ' ';
+      }
+      else if (flags.unread_children > 0) {
+        status_class += ' unreadchildren';
+      }
+    }
+    if (flags.answered) {
+      status_class += ' replied';
+      status_label += this.get_label('replied') + ' ';
+    }
+    if (flags.forwarded) {
+      status_class += ' forwarded';
+      status_label += this.get_label('replied') + ' ';
     }
-    if (flags.answered)
-      css_class += ' replied';
-    if (flags.forwarded)
-      css_class += ' forwarded';
 
     // update selection
     if (message.selected && !list.in_selection(uid))
@@ -2037,7 +2046,7 @@ function rcube_webmail()
         row_class += ' unroot';
     }
 
-    tree += '<span id="msgicn'+row.id+'" class="'+css_class+'">&nbsp;</span>';
+    tree += '<span id="msgicn'+row.id+'" class="'+css_class+status_class+'" title="'+status_label+'"></span>';
     row.className = row_class;
 
     // build subject link
@@ -2061,28 +2070,36 @@ function rcube_webmail()
 
       if (c == 'flag') {
         css_class = (flags.flagged ? 'flagged' : 'unflagged');
-        html = '<span id="flagicn'+row.id+'" class="'+css_class+'">&nbsp;</span>';
+        label = this.get_label(css_class);
+        html = '<span id="flagicn'+row.id+'" class="'+css_class+'" title="'+label+'"></span>';
       }
       else if (c == 'attachment') {
+        label = this.get_label('withattachment');
         if (flags.attachmentClass)
-          html = '<span class="'+flags.attachmentClass+'">&nbsp;</span>';
+          html = '<span class="'+flags.attachmentClass+'" title="'+label+'"></span>';
         else if (/application\/|multipart\/(m|signed)/.test(flags.ctype))
-          html = '<span class="attachment">&nbsp;</span>';
+          html = '<span class="attachment" title="'+label+'"></span>';
         else if (/multipart\/report/.test(flags.ctype))
-          html = '<span class="report">&nbsp;</span>';
-        else
+          html = '<span class="report"></span>';
+          else
           html = '&nbsp;';
       }
       else if (c == 'status') {
-        if (flags.deleted)
+        label = '';
+        if (flags.deleted) {
           css_class = 'deleted';
-        else if (!flags.seen)
+          label = this.get_label('deleted');
+        }
+        else if (!flags.seen) {
           css_class = 'unread';
-        else if (flags.unread_children > 0)
+          label = this.get_label('unread');
+        }
+        else if (flags.unread_children > 0) {
           css_class = 'unreadchildren';
+        }
         else
           css_class = 'msgicon';
-        html = '<span id="statusicn'+row.id+'" class="'+css_class+'">&nbsp;</span>';
+        html = '<span id="statusicn'+row.id+'" class="'+css_class+status_class+'" title="'+label+'"></span>';
       }
       else if (c == 'threads')
         html = expando;
@@ -2092,8 +2109,10 @@ function rcube_webmail()
         html = tree + cols[c];
       }
       else if (c == 'priority') {
-        if (flags.prio > 0 && flags.prio < 6)
-          html = '<span class="prio'+flags.prio+'">&nbsp;</span>';
+        if (flags.prio > 0 && flags.prio < 6) {
+          label = this.get_label('priority') + ' ' + flags.prio;
+          html = '<span class="prio'+flags.prio+'" title="'+label+'"></span>';
+        }
         else
           html = '&nbsp;';
       }
@@ -2676,7 +2695,7 @@ function rcube_webmail()
   // set message icon
   this.set_message_icon = function(uid)
   {
-    var css_class,
+    var css_class, label = '',
       row = this.message_list.rows[uid];
 
     if (!row)
@@ -2684,38 +2703,55 @@ function rcube_webmail()
 
     if (row.icon) {
       css_class = 'msgicon';
-      if (row.deleted)
+      if (row.deleted) {
         css_class += ' deleted';
-      else if (row.unread)
+        label += this.get_label('deleted') + ' ';
+      }
+      else if (row.unread) {
         css_class += ' unread';
+        label += this.get_label('unread') + ' ';
+      }
       else if (row.unread_children)
         css_class += ' unreadchildren';
       if (row.msgicon == row.icon) {
-        if (row.replied)
+        if (row.replied) {
           css_class += ' replied';
-        if (row.forwarded)
+          label += this.get_label('replied') + ' ';
+        }
+        if (row.forwarded) {
           css_class += ' forwarded';
+          label += this.get_label('forwarded') + ' ';
+        }
         css_class += ' status';
       }
 
-      row.icon.className = css_class;
+      $(row.icon).attr('class', css_class).attr('title', label);
     }
 
     if (row.msgicon && row.msgicon != row.icon) {
+      label = '';
       css_class = 'msgicon';
-      if (!row.unread && row.unread_children)
+      if (!row.unread && row.unread_children) {
         css_class += ' unreadchildren';
-      if (row.replied)
+      }
+      if (row.replied) {
         css_class += ' replied';
-      if (row.forwarded)
+        label += this.get_label('replied') + ' ';
+      }
+      if (row.forwarded) {
         css_class += ' forwarded';
+        label += this.get_label('forwarded') + ' ';
+      }
 
-      row.msgicon.className = css_class;
+      $(row.msgicon).attr('class', css_class).attr('title', label);
     }
 
     if (row.flagicon) {
       css_class = (row.flagged ? 'flagged' : 'unflagged');
-      row.flagicon.className = css_class;
+      label = this.get_label(css_class);
+      $(row.flagicon).attr('class', css_class)
+        .attr('aria-label', label)
+        .attr('title', label);
     }
   };
 
diff --git a/program/js/list.js b/program/js/list.js
index 62f1b1c9d..0bf5d568b 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -51,7 +51,7 @@ function rcube_list_widget(list, p)
   this.rowcount = 0;
   this.colcount = 0;
 
-  this.subject_col = -1;
+  this.subject_col = 0;
   this.modkey = 0;
   this.multiselect = false;
   this.multiexpand = false;
@@ -111,15 +111,9 @@ init: function()
     if (this.keyboard) {
       rcube_event.add_listener({event:'keydown', object:this, method:'key_press'});
 
-      // install a link element to receive focus.
-      // this helps to maintain the natural tab order when moving focus with keyboard
-      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($(this.list).attr('summary') || 'Select List')
-        .insertAfter(this.list)
-        .on('focus', function(e){ me.focus(e); })
-        .on('blur', function(e){ me.blur(e); });
+      // allow the table element to receive focus.
+      $(this.list).attr('tabindex', '0')
+        .on('focus', function(e){ me.focus(e); });
     }
   }
 
@@ -398,10 +392,16 @@ focus: function(e)
   if (e)
     rcube_event.cancel(e);
 
+  var focus_elem = null;
+
+  if (this.last_selected && this.rows[this.last_selected]) {
+    focus_elem = $(this.rows[this.last_selected].obj).find(this.col_tagname()).eq(this.subject_col).attr('tabindex', '0');
+  }
+
   // Un-focus already focused elements (#1487123, #1487316, #1488600, #1488620)
-  if (this.focus_elem) {
+  if (focus_elem && focus_elem.length) {
     // We now fix this by explicitly assigning focus to a dedicated link element
-    this.focus_noscroll(this.focus_elem);
+    this.focus_noscroll(focus_elem);
   }
   else {
     // It looks that window.focus() does the job for all browsers, but not Firefox (#1489058)
@@ -409,7 +409,7 @@ focus: function(e)
     window.focus();
   }
 
-  $(this.list).addClass('focus');
+  $(this.list).addClass('focus').removeAttr('tabindex');
 
   // set internal focus pointer to first row
   if (!this.last_selected)
@@ -423,7 +423,17 @@ focus: function(e)
 blur: function(e)
 {
   this.focused = false;
-  $(this.list).removeClass('focus');
+
+  // avoid the table getting focus right again
+  var me = this;
+  setTimeout(function(){
+    $(me.list).removeClass('focus').attr('tabindex', '0');
+  }, 20);
+
+  if (this.last_selected && this.rows[this.last_selected]) {
+    $(this.rows[this.last_selected].obj)
+      .find(this.col_tagname()).eq(this.subject_col).removeAttr('tabindex');
+  }
 },
 
 /**
@@ -914,16 +924,22 @@ select_row: function(id, mod_key, with_mouse)
   if (this.selection.join(',') != select_before)
     this.triggerEvent('select');
 
-  if (this.last_selected != 0 && this.rows[this.last_selected])
-    $(this.rows[this.last_selected].obj).removeClass('focused');
+  if (this.last_selected != 0 && this.rows[this.last_selected]) {
+    $(this.rows[this.last_selected].obj).removeClass('focused')
+      .find(this.col_tagname()).eq(this.subject_col).removeAttr('tabindex');
+  }
 
   // unselect if toggleselect is active and the same row was clicked again
   if (this.toggleselect && this.last_selected == id) {
     this.clear_selection();
     id = null;
   }
-  else
+  else {
     $(this.rows[id].obj).addClass('focused');
+    // set cursor focus to link inside selected row
+    if (this.focused)
+      this.focus_noscroll($(this.rows[id].obj).find(this.col_tagname()).eq(this.subject_col).attr('tabindex', '0'));
+  }
 
   if (!this.selection.length)
     this.shift_start = null;
@@ -1287,6 +1303,14 @@ key_press: function(e)
 
       return rcube_event.cancel(e);
 
+    case 9: // Tab
+      this.blur();
+      break;
+
+    case 13: // Enter
+      if (!this.selection.length)
+        this.select_row(this.last_selected, mod_key, false);
+
     default:
       this.key_pressed = keyCode;
       this.modkey = mod_key;
diff --git a/skins/classic/common.css b/skins/classic/common.css
index 4367d26cb..126408444 100644
--- a/skins/classic/common.css
+++ b/skins/classic/common.css
@@ -627,7 +627,8 @@ table.records-table tbody tr td
   white-space: nowrap;
   border-bottom: 1px solid #EBEBEB;
   overflow: hidden;
-  text-align: left;  
+  text-align: left;
+	outline: none;
 }
 
 table.records-table tr
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index a84202800..d7ad74c01 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -1184,6 +1184,7 @@ a.iconlink.upload {
 	padding-bottom: 5px;
 	height: auto;
 	min-height: 14px;
+	outline: none;
 }
 
 .webkit .listing tbody td {
@@ -1555,6 +1556,7 @@ table.records-table {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	background-color: #fff;
+	outline: none;
 }
 
 /* This padding-left minus the focused padding left should be half of the focused border-left */
-- 
cgit v1.2.3


From d58c39126f6e1754e29b6f3bbc01f0f6a3ea2581 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Mon, 2 Jun 2014 16:35:12 +0200
Subject: Some more improvemements on content structure, text representation
 and keyboard navigation within the mail view

---
 program/include/rcmail.php                |  2 +-
 program/include/rcmail_output_html.php    |  4 ++--
 program/js/app.js                         | 35 ++++++++++++++++++++++++-------
 program/js/list.js                        |  3 +--
 program/localization/en_US/labels.inc     |  3 +++
 program/steps/mail/list_contacts.inc      |  2 +-
 program/steps/mail/search_contacts.inc    |  2 +-
 skins/classic/mail.css                    |  1 +
 skins/larry/styles.css                    |  6 ++++++
 skins/larry/templates/compose.html        | 10 ++++-----
 skins/larry/templates/mail.html           |  1 +
 skins/larry/templates/messagepart.html    |  4 ++--
 skins/larry/templates/messagepreview.html |  4 ++--
 13 files changed, 54 insertions(+), 23 deletions(-)

(limited to 'program/js')

diff --git a/program/include/rcmail.php b/program/include/rcmail.php
index cc70739cf..8e66e85e7 100644
--- a/program/include/rcmail.php
+++ b/program/include/rcmail.php
@@ -1501,7 +1501,7 @@ class rcmail extends rcube
             $html_name = $this->Q($foldername) . ($unread ? html::span('unreadcount', sprintf($attrib['unreadwrap'], $unread)) : '');
             $link_attrib = $folder['virtual'] ? array() : array(
                 'href' => $this->url(array('_mbox' => $folder['id'])),
-                'onclick' => sprintf("return %s.command('list','%s',this)", rcmail_output::JS_OBJECT_NAME, $js_name),
+                'onclick' => sprintf("return %s.command('list','%s',this,event)", rcmail_output::JS_OBJECT_NAME, $js_name),
                 'rel' => $folder['id'],
                 'title' => $title,
             );
diff --git a/program/include/rcmail_output_html.php b/program/include/rcmail_output_html.php
index 1fa0376fb..e8b5c9828 100644
--- a/program/include/rcmail_output_html.php
+++ b/program/include/rcmail_output_html.php
@@ -859,10 +859,10 @@ EOF;
         }
 
         // localize title and summary attributes
-        if (!empty($attrib['title']) && $this->app->text_exists($attrib['title'])) {
+        if ($command != 'button' && !empty($attrib['title']) && $this->app->text_exists($attrib['title'])) {
             $attrib['title'] = $this->app->gettext($attrib['title']);
         }
-        if (!empty($attrib['summary']) && $this->app->text_exists($attrib['summary'])) {
+        if ($command != 'button' && !empty($attrib['summary']) && $this->app->text_exists($attrib['summary'])) {
             $attrib['summary'] = $this->app->gettext($attrib['summary']);
         }
 
diff --git a/program/js/app.js b/program/js/app.js
index bf163c614..e7f9d02b6 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -342,7 +342,16 @@ function rcube_webmail()
             .addEventListener('initrow', function(o) { ref.triggerEvent('insertrow', { cid:o.uid, row:o }); })
             .addEventListener('select', function(o) { ref.compose_recipient_select(o); })
             .addEventListener('dblclick', function(o) { ref.compose_add_recipient('to'); })
-            .addEventListener('keypress', function(o) { if (o.key_pressed == o.ENTER_KEY) ref.compose_add_recipient('to'); })
+            .addEventListener('keypress', function(o) {
+              if (o.key_pressed == o.ENTER_KEY) {
+                if (!ref.compose_add_recipient('to')) {
+                  // execute link action on <enter> if not a recipient entry
+                  if (o.last_selected && String(o.last_selected).charAt(0) == 'G') {
+                    $(o.rows[o.last_selected].obj).find('a').first().click();
+                  }
+                }
+              }
+            })
             .init();
         }
 
@@ -602,7 +611,7 @@ function rcube_webmail()
   {
     var ret, uid, cid, url, flag, aborted = false;
 
-    if (obj && obj.blur)
+    if (obj && obj.blur && !(event || rcube_event.is_keyboard(event)))
       obj.blur();
 
     // do nothing if interface is locked by other command (with exception for searching reset)
@@ -1647,9 +1656,12 @@ function rcube_webmail()
   {
     // Helper method to move focus to the next/prev active menu item
     var focus_menu_item = function(dir) {
-      var obj, mod = dir < 0 ? 'prevAll' : 'nextAll', limit = dir < 0 ? 'last' : 'first';
+      var obj, item, mod = dir < 0 ? 'prevAll' : 'nextAll', limit = dir < 0 ? 'last' : 'first';
       if (ref.focused_menu && (obj = $('#'+ref.focused_menu))) {
-        return obj.find(':focus').closest('li')[mod](':has(:not([aria-disabled=true]))').find('a,input')[limit]().focus().length;
+        item = obj.find(':focus').closest('li')[mod](':has(:not([aria-disabled=true]))').find('a,input')[limit]();
+        if (!item.length)
+          item = obj.find(':focus').closest('ul')[mod](':has(:not([aria-disabled=true]))').find('a,input')[limit]();
+        return item.focus().length;
       }
 
       return 0;
@@ -2402,7 +2414,6 @@ function rcube_webmail()
   this.clear_message_list = function()
   {
     this.env.messages = {};
-    this.last_selected = 0;
 
     this.show_contentframe(false);
     if (this.message_list)
@@ -3490,6 +3501,8 @@ function rcube_webmail()
       input.val(oldval + recipients.join(delim + ' ') + delim + ' ');
       this.triggerEvent('add-recipient', { field:field, recipients:recipients });
     }
+
+    return recipients.length;
   };
 
   // checks the input fields before sending a message
@@ -7405,7 +7418,8 @@ function rcube_webmail()
           this.enable_command('set-listmode', this.env.threads && !is_multifolder);
 
           if ((response.action == 'list' || response.action == 'search') && this.message_list) {
-            this.message_list.focus();
+            if (this.message_list.rowcount > 0)
+              this.message_list.focus();
             this.msglist_select(this.message_list);
             this.triggerEvent('listupdate', { folder:this.env.mailbox, rowcount:this.message_list.rowcount });
           }
@@ -7417,11 +7431,18 @@ function rcube_webmail()
             this.enable_command('search-create', this.env.source == '');
             this.enable_command('search-delete', this.env.search_id);
             this.update_group_commands();
-            this.contact_list.focus();
+            if (this.contact_list.rowcount > 0)
+              this.contact_list.focus();
             this.triggerEvent('listupdate', { folder:this.env.source, rowcount:this.contact_list.rowcount });
           }
         }
         break;
+
+      case 'list-contacts':
+      case 'search-contacts':
+        if (this.contact_list && this.contact_list.rowcount > 0)
+          this.contact_list.focus();
+        break;
     }
 
     if (response.unlock)
diff --git a/program/js/list.js b/program/js/list.js
index 0bf5d568b..65d4a9260 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -274,11 +274,10 @@ clear: function(sel)
 
   this.rows = {};
   this.rowcount = 0;
+  this.last_selected = 0;
 
   if (sel)
     this.clear_selection();
-  else
-    this.last_selected = 0;
 
   // reset scroll position (in Opera)
   if (this.frame)
diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc
index 0b5ff8c5a..874f19be2 100644
--- a/program/localization/en_US/labels.inc
+++ b/program/localization/en_US/labels.inc
@@ -591,11 +591,14 @@ $labels['arialabelmessagelistoptions'] = 'Message list display and sorting optio
 $labels['arialabelmailimportdialog'] = 'Message import dialog';
 $labels['arialabelmessagenav'] = 'Message navigation';
 $labels['arialabelmessagebody'] = 'Message Body';
+$labels['arialabelmessageactions'] = 'Message actions';
 $labels['arialabelcontactquicksearch'] = 'Contacts search form';
 $labels['arialabelcontactsearchbox'] = 'Contact search input';
 $labels['arialabelmessageheaders'] = 'Message headers';
 $labels['arialabelcomposeoptions'] = 'Composition options';
 $labels['arialabelresponsesmenu'] = 'Canned responses menu';
 $labels['arialabelattachmentuploadform'] = 'Attachment upload form';
+$labels['arialabelattachmentpreview'] = 'Attachment preview';
+$labels['ariasummarycomposecontacts'] = 'List of contacts and groups to select as recipients';
 
 ?>
diff --git a/program/steps/mail/list_contacts.inc b/program/steps/mail/list_contacts.inc
index 0ee81135b..4f17beffd 100644
--- a/program/steps/mail/list_contacts.inc
+++ b/program/steps/mail/list_contacts.inc
@@ -110,7 +110,7 @@ else if (!empty($result) && $result->count > 0) {
             $keyname = $row['_type'] == 'group' ? 'contactgroup' : 'contact';
 
             $OUTPUT->command('add_contact_row', $row_id, array(
-                $keyname => html::span(array('title' => $email), rcube::Q($name ? $name : $email) .
+                $keyname => html::a(array('title' => $email), rcube::Q($name ? $name : $email) .
                     ($name && count($emails) > 1 ? '&nbsp;' . html::span('email', rcube::Q($email)) : '')
                 )), $classname);
         }
diff --git a/program/steps/mail/search_contacts.inc b/program/steps/mail/search_contacts.inc
index d56581695..ccef32dd2 100644
--- a/program/steps/mail/search_contacts.inc
+++ b/program/steps/mail/search_contacts.inc
@@ -87,7 +87,7 @@ if (!empty($result) && $result->count > 0) {
             $row_id = $row['ID'].'-'.$i;
             $jsresult[$row_id] = format_email_recipient($email, $name);
             $OUTPUT->command('add_contact_row', $row_id, array(
-                'contact' => html::span(array('title' => $email), rcube::Q($name ? $name : $email) .
+                'contact' => html::a(array('title' => $email), rcube::Q($name ? $name : $email) .
                     ($name && count($emails) > 1 ? '&nbsp;' . html::span('email', rcube::Q($email)) : '')
                 )), 'person');
         }
diff --git a/skins/classic/mail.css b/skins/classic/mail.css
index 0a4653a3a..3310ac54f 100644
--- a/skins/classic/mail.css
+++ b/skins/classic/mail.css
@@ -780,6 +780,7 @@ table.messagelist.fixedcopy
   -o-text-overflow: ellipsis;
   border-bottom: 1px solid #EBEBEB;
   cursor: default;
+  outline: none;
 }
 
 .messagelist tbody tr td a
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index d7ad74c01..add47324d 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -1187,6 +1187,12 @@ a.iconlink.upload {
 	outline: none;
 }
 
+.listing tbody td a {
+	color: #376572;
+	text-shadow: 0px 1px 1px #fff;
+	text-decoration: none;
+}
+
 .webkit .listing tbody td {
 	height: 14px;
 }
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html
index 87993ed70..c643b36f5 100644
--- a/skins/larry/templates/compose.html
+++ b/skins/larry/templates/compose.html
@@ -52,7 +52,7 @@
 			<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
 		</div>
 	</div>
-	<roundcube:object name="addressbooks" id="directorylist" class="treelist listing" />
+	<roundcube:object name="addressbooks" id="directorylist" class="treelist listing" summary="ariasummarycomposecontacts" />
 	<div class="scroller withfooter" tabindex="-1">
 		<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" />
 	</div>
@@ -93,25 +93,25 @@
 	</tr><tr id="compose-cc">
 		<td class="title top">
 			<label for="_cc"><roundcube:label name="cc" /></label>
-			<a href="#cc" onclick="return UI.hide_header_row('cc');" class="iconbutton cancel" title="<roundcube:label name='delete' /> <roundcube:label name='cc' />" tabindex="3">x</a>
+			<a href="#cc" onclick="return UI.hide_header_row('cc');" class="iconbutton cancel" title="<roundcube:label name='delete' />" tabindex="3"><roundcube:label name="delete" /> <roundcube:label name="cc" /></a>
 		</td>
 		<td class="editfield"><roundcube:object name="composeHeaders" part="cc" form="form" id="_cc" cols="70" rows="1" tabindex="1" /></td>
 	</tr><tr id="compose-bcc">
 		<td class="title top">
 			<label for="_bcc"><roundcube:label name="bcc" /></label>
-			<a href="#bcc" onclick="return UI.hide_header_row('bcc');" class="iconbutton cancel" title="<roundcube:label name='delete' /> <roundcube:label name='bcc' />" tabindex="3">x</a>
+			<a href="#bcc" onclick="return UI.hide_header_row('bcc');" class="iconbutton cancel" title="<roundcube:label name='delete' />" tabindex="3"><roundcube:label name="delete" /> <roundcube:label name="bcc" /></a>
 		</td>
 		<td class="editfield"><roundcube:object name="composeHeaders" part="bcc" form="form" id="_bcc" cols="70" rows="1" tabindex="1" /></td>
 	</tr><tr id="compose-replyto">
 		<td class="title top">
 			<label for="_replyto"><roundcube:label name="replyto" /></label>
-			<a href="#replyto" onclick="return UI.hide_header_row('replyto');" class="iconbutton cancel" title="<roundcube:label name='delete' /> <roundcube:label name='replyto' />" tabindex="3">x</a>
+			<a href="#replyto" onclick="return UI.hide_header_row('replyto');" class="iconbutton cancel" title="<roundcube:label name='delete' />" tabindex="3"><roundcube:label name="delete" /> <roundcube:label name="replyto" /></a>
 		</td>
 		<td class="editfield"><roundcube:object name="composeHeaders" part="replyto" form="form" id="_replyto" size="70" tabindex="1" /></td>
 	</tr><tr id="compose-followupto">
 		<td class="title top">
 			<label for="_followupto"><roundcube:label name="followupto" /></label>
-			<a href="#followupto" onclick="return UI.hide_header_row('followupto');" class="iconbutton cancel" title="<roundcube:label name='delete' /> <roundcube:label name='followupto' />" tabindex="3">x</a>
+			<a href="#followupto" onclick="return UI.hide_header_row('followupto');" class="iconbutton cancel" title="<roundcube:label name='delete' />" tabindex="3"><roundcube:label name="delete" /> <roundcube:label name="followupto" /></a>
 		</td>
 		<td class="editfield"><roundcube:object name="composeHeaders" part="followupto" form="form" id="_followupto" size="70" tabindex="1" /></td>
 	</tr><tr>
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index 92b01e019..cf8ff2f7d 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -75,6 +75,7 @@
 <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-expanded="false"aria-owns="mailboxmenu-menu" />
 	<roundcube:if condition="env:quota" />
+		<span class="voice"><roundcube:label name="quota"></span>
 		<roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" />
 	<roundcube:endif />
 </div>
diff --git a/skins/larry/templates/messagepart.html b/skins/larry/templates/messagepart.html
index 2df9c7b77..edf275f6e 100644
--- a/skins/larry/templates/messagepart.html
+++ b/skins/larry/templates/messagepart.html
@@ -29,9 +29,9 @@
 </div>
 
 <div id="messagepartcontainer" class="uibox" role="main" aria-labelledby="aria-label-messagepart">
-	<h2 id="aria-label-messagepart" class="voice">Attachment preview</h2>
+	<h2 id="aria-label-messagepart" class="voice"><roundcube:label name="arialabelattachmentpreview" /></h2>
 	<div class="iframebox">
-	<roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" title="Attachment preview" />
+	<roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" title="arialabelattachmentpreview" />
 	</div>
 </div>
 
diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html
index 97efdf3e7..82ecd7a43 100644
--- a/skins/larry/templates/messagepreview.html
+++ b/skins/larry/templates/messagepreview.html
@@ -10,7 +10,7 @@
 
 <!-- record navigation -->
 <div id="countcontrols" role="toolbar" aria-labelledby="aria-label-messagetoolbar">
-<h2 id="aria-label-messagetoolbar" class="voice">Message actions</h2>
+<h2 id="aria-label-messagetoolbar" class="voice"><roundcube:label name="arialabelmessageactions" /></h2>
 <roundcube:if condition="env:optional_format=='text'" />
 	<span class="buttongroup">
 		<roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="icon" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button changeformat text pressed" innerClass="icon" title="changeformattext" content="Text" />
@@ -60,7 +60,7 @@
 <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
 </div>
 <div class="leftcol" role="region" aria-labelledby="aria-label-messagebody">
-<h2 id="aria-label-messagebody" class="voice">Message Body</h2>
+<h2 id="aria-label-messagebody" class="voice"><roundcube:label name="arialabelmessagebody" /></h2>
 <roundcube:object name="messageObjects" id="message-objects" />
 <roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" />
 </div>
-- 
cgit v1.2.3


From 4582bff0635495740022543320fc7c77b0362fc4 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Mon, 2 Jun 2014 18:43:21 +0200
Subject: Add aria-* controls to turn tables into a listbox widget

---
 program/js/list.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

(limited to 'program/js')

diff --git a/program/js/list.js b/program/js/list.js
index 65d4a9260..b9a437c26 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -60,6 +60,7 @@ function rcube_list_widget(list, p)
   this.column_movable = false;
   this.keyboard = false;
   this.toggleselect = false;
+  this.aria_listbox = false;
 
   this.drag_active = false;
   this.col_drag_active = false;
@@ -117,6 +118,12 @@ init: function()
     }
   }
 
+  if ($(this.list).attr('role') == 'listbox') {
+    this.aria_listbox = true;
+    if (this.multiselect)
+      $(this.list).attr('aria-multiselectable', 'true');
+  }
+
   return this;
 },
 
@@ -159,6 +166,15 @@ init_row: function(row)
       }, false);
     }
 
+    // label the list row with the subject col as descriptive label
+    if (this.aria_listbox) {
+      var lbl_id = 'l:' + row.id;
+      $(row)
+        .attr('role', 'option')
+        .attr('aria-labelledby', lbl_id)
+        .find(this.col_tagname()).eq(this.subject_col).attr('id', lbl_id);
+    }
+
     if (document.all)
       row.onselectstart = function() { return false; };
 
-- 
cgit v1.2.3


From 458af8d30a1bca153f770358b8f914554b0da6c3 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Tue, 3 Jun 2014 14:11:13 +0200
Subject: Apply accessibility improvements to the address book task

---
 program/js/app.js                      |   1 +
 program/localization/en_US/labels.inc  |  19 +++++-
 program/steps/addressbook/func.inc     |   8 +--
 skins/larry/addressbook.css            |   4 +-
 skins/larry/includes/mailtoolbar.html  |   8 +--
 skins/larry/templates/addressbook.html | 120 +++++++++++++++++++--------------
 skins/larry/templates/compose.html     |   4 +-
 skins/larry/templates/mail.html        |  24 ++++---
 8 files changed, 116 insertions(+), 72 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index e7f9d02b6..9398c6a21 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -5014,6 +5014,7 @@ function rcube_webmail()
       // add link to pop back to parent group
       if (this.env.address_group_stack.length > 1) {
         $('<a href="#list">...</a>')
+          .attr('title', this.gettext('uponelevel'))
           .addClass('poplink')
           .appendTo(boxtitle)
           .click(function(e){ return ref.command('popgroup','',this); });
diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc
index 874f19be2..2b44ac188 100644
--- a/program/localization/en_US/labels.inc
+++ b/program/localization/en_US/labels.inc
@@ -377,6 +377,7 @@ $labels['newcontactgroup'] = 'Create new contact group';
 $labels['grouprename']    = 'Rename group';
 $labels['groupdelete']    = 'Delete group';
 $labels['groupremoveselected'] = 'Remove selected contacts from group';
+$labels['uponelevel']     = 'Up one level';
 
 $labels['previouspage']   = 'Show previous page';
 $labels['firstpage']      = 'Show first page';
@@ -579,8 +580,10 @@ $labels['arialabeltopnav'] = 'Window control';
 $labels['arialabeltasknav'] = 'Application tasks';
 $labels['arialabeltoolbar'] = 'Application toolbar';
 $labels['arialabelmessagessearchfilter'] = 'Email listing filter';
-$labels['arialabelsearchform'] = 'Email message search form';
-$labels['arialabelquicksearchbox'] = 'Email search input';
+$labels['arialabelmailsearchform'] = 'Email message search form';
+$labels['arialabelcontactsearchform'] = 'Contacts search form';
+$labels['arialabelmailquicksearchbox'] = 'Email search input';
+$labels['arialabelquicksearchbox'] = 'Search input';
 $labels['arialabelfolderlist'] = 'Email folder selection';
 $labels['arialabelmessagelist'] = 'Email Messages Listing';
 $labels['arialabelmailpreviewframe'] = 'Message preview';
@@ -600,5 +603,17 @@ $labels['arialabelresponsesmenu'] = 'Canned responses menu';
 $labels['arialabelattachmentuploadform'] = 'Attachment upload form';
 $labels['arialabelattachmentpreview'] = 'Attachment preview';
 $labels['ariasummarycomposecontacts'] = 'List of contacts and groups to select as recipients';
+$labels['arialabelcontactexportoptions'] = 'Contact export options';
+$labels['arialabelabookgroupoptions'] = 'Addressbook/group options';
+
+$labels['helplistnavigation'] = 'List keyboard navigation';
+$labels['helplistkeyboardnavigation'] = "Arrows up/down: Move row focus/selection.
+Space: Select focused row.
+Shift + up/down: Select additional row above/below.
+Ctrl + Space: Add focused row to selection/remove from selection.";
+$labels['helplistkeyboardnavmessages'] = "Arrows right/left: expand/collapse message thread (in threads mode only).
+Enter: Open the selected/focused message.
+Delete: Move selected messages to Trash.";
+$labels['helplistkeyboardnavcontacts'] = "Enter: Open the selected/focused contact.";
 
 ?>
diff --git a/program/steps/addressbook/func.inc b/program/steps/addressbook/func.inc
index be0dd2a33..e68a694ef 100644
--- a/program/steps/addressbook/func.inc
+++ b/program/steps/addressbook/func.inc
@@ -395,7 +395,7 @@ function rcmail_js_contacts_list($result, $prefix='')
                         ), '&raquo;');
                     }
                     else
-                        $val = '&nbsp;';
+                        $val = '';
                     break;
 
                 default:
@@ -422,7 +422,7 @@ function rcmail_contacts_list_title($attrib)
     unset($attrib['name']);
 
     $OUTPUT->add_gui_object('addresslist_title', $attrib['id']);
-    $OUTPUT->add_label('contacts');
+    $OUTPUT->add_label('contacts','uponelevel');
 
     return html::tag($attrib['tag'], $attrib, $RCMAIL->gettext($attrib['label']), html::$common_attrib);
 }
@@ -518,7 +518,7 @@ function rcmail_contact_form($form, $record, $attrib = null)
     foreach ($coltypes as $col => $prop) {
         if ($prop['subtypes']) {
             $subtype_names = array_map('rcmail_get_type_label', $prop['subtypes']);
-            $select_subtype = new html_select(array('name' => '_subtype_'.$col.'[]', 'class' => 'contactselectsubtype'));
+            $select_subtype = new html_select(array('name' => '_subtype_'.$col.'[]', 'class' => 'contactselectsubtype', 'title' => $prop['label'] . ' ' . $RCMAIL->gettext('type')));
             $select_subtype->add($subtype_names, $prop['subtypes']);
             $coltypes[$col]['subtypes_select'] = $select_subtype->show();
         }
@@ -607,7 +607,7 @@ function rcmail_contact_form($form, $record, $attrib = null)
                 // prepare subtype selector in edit mode
                 if ($edit_mode && is_array($colprop['subtypes'])) {
                     $subtype_names = array_map('rcmail_get_type_label', $colprop['subtypes']);
-                    $select_subtype = new html_select(array('name' => '_subtype_'.$col.'[]', 'class' => 'contactselectsubtype'));
+                    $select_subtype = new html_select(array('name' => '_subtype_'.$col.'[]', 'class' => 'contactselectsubtype', 'title' => $colprop['label'] . ' ' . $RCMAIL->gettext('type')));
                     $select_subtype->add($subtype_names, $colprop['subtypes']);
                 }
                 else
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css
index 8350d0a59..e590831a1 100644
--- a/skins/larry/addressbook.css
+++ b/skins/larry/addressbook.css
@@ -142,7 +142,7 @@
 	background-position: 6px -1603px;
 }
 
-#contacts-table .contact.focused td.name {
+#contacts-table.focus .contact.focused td.name {
 	background-position: 4px -1603px;
 }
 
@@ -159,7 +159,7 @@
 	background-position: 6px -1555px;
 }
 
-#contacts-table .group.focused td.name {
+#contacts-table.focus .group.focused td.name {
 	background-position: 4px -1555px;
 }
 
diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html
index a70cc023a..691345bb4 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-expanded="false"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-expanded="false"aria-owns="forwardmenu-menu" tabindex="0">Forwarding options</a>
+	<a href="#forward" 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-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" />
+<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/addressbook.html b/skins/larry/templates/addressbook.html
index 0b1009f7e..c9aa5acad 100644
--- a/skins/larry/templates/addressbook.html
+++ b/skins/larry/templates/addressbook.html
@@ -10,25 +10,50 @@
 
 <div id="mainscreen">
 
+<h1 class="voice"><roundcube:label name="addressbook" /></h1>
+
 <!-- toolbar -->
-<div id="addressbooktoolbar" class="toolbar">
+<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
+<div id="addressbooktoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar">
 	<roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="import" title="importcontacts" />
 	<span class="dropbutton">
 		<roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="export" title="exportvcards" />
-		<span class="dropbuttontip" id="exportmenulink" onclick="UI.show_popup('exportmenu');return false"></span>
+		<a href="#export" class="dropbuttontip" id="exportmenulink" onclick="return UI.toggle_popup('exportmenu',event)" aria-haspopup="true" aria-expanded="false" aria-owns="exportmenu-menu" tabindex="0"><roundcube:label name="arialabelcontactexportoptions" /></a>
 	</span>
 
 	<span class="spacer"></span>
 	<roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="compose" title="writenewmessage" />
 	<roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advanced" title="advsearch" />
 	<roundcube:container name="toolbar" id="addressbooktoolbar" />
+
+	<div id="exportmenu" class="popupmenu" aria-hidden="true">
+		<h3 id="aria-label-exportmenu" class="voice"><roundcube:label name="arialabelcontactexportoptions" /></h3>
+		<ul id="exportmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-exportmenu">
+			<li role="menuitem"><roundcube:button command="export" label="exportall" prop="sub" class="exportalllink" classAct="exportalllink active" /></li>
+			<li role="menuitem"><roundcube:button command="export-selected" label="exportsel" prop="sub" class="exportsellink" classAct="exportsellink active" /></li>
+		</ul>
+	</div>
+
 </div>
 
 <!-- search box -->
-<div id="quicksearchbar" class="searchbox">
+<div id="quicksearchbar" class="searchbox" role="search" aria-labelledby="aria-label-searchform">
+<h2 id="aria-label-searchform" class="voice"><roundcube:label name="arialabelcontactsearchform" /></h2>
+<label for="quicksearchbox" class="voice"><roundcube:label name="arialabelquicksearchbox" /></label>
 <roundcube:object name="searchform" id="quicksearchbox" />
-<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
-<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
+<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" label="resetsearch" />
+
+<div id="searchmenu" class="popupmenu" data-editable="true">
+	<h3 id="aria-label-searchmenu" class="voice"><roundcube:label name="searchmod" /></h3>
+	<ul class="toolbarmenu" id="searchmenu-menu" role="menu" aria-labelledby="aria-label-searchmenu">
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="name" id="s_mod_name" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="name" /></span></label></li>
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="firstname" id="s_mod_firstname" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="firstname" /></span></label></li>
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="surname" id="s_mod_surname" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="surname" /></span></label></li>
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="email" id="s_mod_email" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="email" /></span></label></li>
+		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="*" id="s_mod_all" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="allfields" /></span></label></li>
+	</ul>
+</div>
 </div>
 
 <div id="mainscreencontent">
@@ -36,42 +61,64 @@
 <div id="addressview-left">
 
 <!-- sources/groups list -->
-<div id="directorylistbox" class="uibox listbox">
+<div id="directorylistbox" class="uibox listbox" role="navigation" aria-labelledby="directorylist-header">
 <h2 id="directorylist-header" class="boxtitle"><roundcube:label name="groups" /></h2>
 <div id="directorylist-content" class="scroller withfooter">
 	<roundcube:object name="directorylist" id="directorylist" class="treelist listing iconized" />
 </div>
 <div id="directorylist-footer" class="boxfooter">
-	<roundcube:button command="group-create" type="link" title="newcontactgroup" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="groupoptions" id="groupoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="UI.show_popup('groupoptions');return false" innerClass="inner" content="&#9881;" />
+	<roundcube:button command="group-create" type="link" title="newcontactgroup" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="newcontactgroup" /><roundcube:button name="groupoptions" id="groupoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="return UI.toggle_popup('groupoptions',event)" innerClass="inner" label="arialabelabookgroupoptions" aria-haspopup="true" aria-expanded="false" aria-owns="groupoptionsmenu" />
 </div>
 </div>
 
+<div id="groupoptions" class="popupmenu" aria-hidden="true">
+	<h3 id="aria-label-groupoptions" class="voice"><roundcube:label name="arialabelabookgroupoptions" /></h3>
+	<ul id="groupoptionsmenu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-groupoptions">
+		<li role="menuitem"><roundcube:button command="group-rename" label="grouprename" classAct="active" /></li>
+		<li role="menuitem"><roundcube:button command="group-delete" label="groupdelete" classAct="active" /></li>
+		<li role="menuitem"><roundcube:button command="search-create" label="searchsave" classAct="active" /></li>
+		<li role="menuitem"><roundcube:button command="search-delete" label="searchdelete" classAct="active" /></li>
+		<roundcube:container name="groupoptions" id="groupoptionsmenu" />
+	</ul>
+</div>
+
 </div><!-- end addressview-left -->
 
-<div id="addressview-right">
+<div id="addressview-right" role="main">
 
 <!-- contacts list -->
-<div id="addresslist" class="uibox listbox">
-<roundcube:object name="addresslisttitle" label="contacts" tag="h2" class="boxtitle" />
+<div id="addresslist" class="uibox listbox" aria-labelledby="aria-label-contactslist">
+<roundcube:object name="addresslisttitle" label="contacts" tag="h2" class="boxtitle" id="aria-label-contactslist" />
 <div class="scroller withfooter">
-<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" />
+<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" role="listbox" />
+</div>
+<div class="boxpagenav">
+	<roundcube:button command="firstpage" type="link" class="icon firstpage disabled" classAct="icon firstpage" title="firstpage" label="first" />
+	<roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" label="previous" />
+	<roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" label="next" />
+	<roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" label="last" />
 </div>
 <div class="boxfooter">
-	<roundcube:button command="add" type="link" title="newcontact" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button command="delete" type="link" title="deletecontact" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="x" /><roundcube:button command="group-remove-selected" type="link" title="groupremoveselected" class="listbutton removegroup disabled" classAct="listbutton removegroup" innerClass="inner" content="-" />
-	<roundcube:object name="recordsCountDisplay" class="countdisplay" label="fromtoshort" />
+	<roundcube:button command="add" type="link" title="newcontact" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="newcontact" /><roundcube:button command="delete" type="link" title="deletecontact" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" label="deletecontact" /><roundcube:button command="group-remove-selected" type="link" title="groupremoveselected" class="listbutton removegroup disabled" classAct="listbutton removegroup" innerClass="inner" label="groupremoveselected" />
+	<span class="countdisplay" aria-live="polite" aria-relevant="text">
+		<span class="voice"><roundcube:label name="contacts" /></span>
+		<roundcube:object name="recordsCountDisplay" label="fromtoshort" />
+	</span>
 </div>
-<div class="boxpagenav">
-	<roundcube:button command="firstpage" type="link" class="icon firstpage disabled" classAct="icon firstpage" title="firstpage" content="|&amp;lt;" />
-	<roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" content="&amp;lt;" />
-	<roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" content="&amp;gt;" />
-	<roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" content="&amp;gt;|" />
 </div>
+
+<div class="voice" role="note">
+<h3><roundcube:label name="helplistnavigation" /></h3>
+<pre>
+<roundcube:label name="helplistkeyboardnavigation" />
+<roundcube:label name="helplistkeyboardnavcontacts" />
+</pre>
 </div>
 
 
 <div id="contacts-box" class="uibox">
 	<div class="iframebox">
-		<roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+		<roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="contactproperties" />
 	</div>
 </div>
 
@@ -81,37 +128,10 @@
 
 </div><!-- end mainscreen -->
 
-<div id="exportmenu" class="popupmenu">
-	<ul class="toolbarmenu">
-		<li><roundcube:button command="export" label="exportall" prop="sub" class="exportalllink" classAct="exportalllink active" /></li>
-		<li><roundcube:button command="export-selected" label="exportsel" prop="sub" class="exportsellink" classAct="exportsellink active" /></li>
-	</ul>
-</div>
-
-<div id="searchmenu" class="popupmenu">
-	<ul class="toolbarmenu">
-		<li><label><input type="checkbox" name="s_mods[]" value="name" id="s_mod_name" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="name" /></span></label></li>
-		<li><label><input type="checkbox" name="s_mods[]" value="firstname" id="s_mod_firstname" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="firstname" /></span></label></li>
-		<li><label><input type="checkbox" name="s_mods[]" value="surname" id="s_mod_surname" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="surname" /></span></label></li>
-		<li><label><input type="checkbox" name="s_mods[]" value="email" id="s_mod_email" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="email" /></span></label></li>
-		<li><label><input type="checkbox" name="s_mods[]" value="*" id="s_mod_all" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="allfields" /></span></label></li>
-	</ul>
-</div>
-
-<div id="groupoptions" class="popupmenu">
-	<ul id="groupoptionsmenu" class="toolbarmenu">
-		<li><roundcube:button command="group-rename" label="grouprename" classAct="active" /></li>
-		<li><roundcube:button command="group-delete" label="groupdelete" classAct="active" /></li>
-		<li><roundcube:button command="search-create" label="searchsave" classAct="active" /></li>
-		<li><roundcube:button command="search-delete" label="searchdelete" classAct="active" /></li>
-		<roundcube:container name="groupoptions" id="groupoptionsmenu" />
-	</ul>
-</div>
-
-<div id="dragcontactmenu" class="popupmenu">
-	<ul class="toolbarmenu">
-		<li><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li>
-		<li><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
+<div id="dragcontactmenu" class="popupmenu" aria-hidden="true">
+	<ul class="toolbarmenu" role="menu">
+		<li role="menuitem"><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li>
+		<li role="menuitem"><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
 	</ul>
 </div>
 
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html
index c643b36f5..bfa6e6d14 100644
--- a/skins/larry/templates/compose.html
+++ b/skins/larry/templates/compose.html
@@ -32,7 +32,7 @@
 	<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" 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-expanded="false"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>
 
@@ -54,7 +54,7 @@
 	</div>
 	<roundcube:object name="addressbooks" id="directorylist" class="treelist listing" summary="ariasummarycomposecontacts" />
 	<div class="scroller withfooter" tabindex="-1">
-		<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" />
+		<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" role="listbox" />
 	</div>
 <div class="boxfooter">
 	<roundcube:button command="add-recipient" prop="to" type="link" title="to" class="listbutton addto disabled" classAct="listbutton addto" innerClass="inner" content="To+" /><roundcube:button command="add-recipient" prop="cc" type="link" title="cc" class="listbutton addcc disabled" classAct="listbutton addcc" innerClass="inner" content="Cc+" /><roundcube:button command="add-recipient" prop="bcc" type="link" title="bcc" class="listbutton addbcc disabled" classAct="listbutton addbcc" innerClass="inner" content="Bcc+" />
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index cf8ff2f7d..1ca5fbba0 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -36,11 +36,11 @@
 
 <!-- search box -->
 <div id="quicksearchbar" class="searchbox" role="search" aria-labelledby="aria-label-searchform">
-<h2 id="aria-label-searchform" class="voice"><roundcube:label name="arialabelsearchform" /></h2>
-<label for="quicksearchbox" class="voice"><roundcube:label name="arialabelquicksearchbox" /></label>
+<h2 id="aria-label-searchform" class="voice"><roundcube:label name="arialabelmailsearchform" /></h2>
+<label for="quicksearchbox" class="voice"><roundcube:label name="arialabelmailquicksearchbox" /></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-expanded="false"aria-owns="searchmenu-menu" />
-<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content="Reset" />
+<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" label="resetsearch" />
 
 <div id="searchmenu" class="popupmenu" data-editable="true">
 	<h3 id="aria-label-searchmenu" class="voice"><roundcube:label name="searchmod" /></h3>
@@ -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-expanded="false"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="mailboxoptionsmenu" />
 	<roundcube:if condition="env:quota" />
 		<span class="voice"><roundcube:label name="quota"></span>
 		<roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" />
@@ -101,6 +101,14 @@
 	aria-labelledby="aria-label-messagelist" />
 </div>
 
+<div class="voice" role="note">
+<h3><roundcube:label name="helplistnavigation" /></h3>
+<pre>
+<roundcube:label name="helplistkeyboardnavigation" />
+<roundcube:label name="helplistkeyboardnavmessages" />
+</pre>
+</div>
+
 <!-- list footer -->
 <div id="messagelistfooter">
 	<div id="listcontrols">
@@ -109,9 +117,9 @@
 	</div>
 	
 	<div id="listselectors">
-	<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>
+	<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-expanded="false"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>
 
@@ -156,7 +164,7 @@
 
 <div id="mailboxmenu" class="popupmenu" aria-hidden="true">
 	<h3 id="aria-label-mailboxmenu" class="voice"><roundcube:label name="arialabelmailboxmenu" /></h3>
-	<ul id="mailboxmenu-menu" class="toolbarmenu" id="mailboxoptionsmenu" role="menu" aria-labelledby="aria-label-mailboxmenu">
+	<ul class="toolbarmenu" id="mailboxoptionsmenu" role="menu" aria-labelledby="aria-label-mailboxmenu">
 		<li role="menuitem"><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li>
 		<li role="menuitem"><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li>
 		<li role="menuitem"><roundcube:button command="import-messages" name="messageimport" type="link" classAct="active" label="importmessages" onclick="if(rcmail.command_enabled('import-messages'))UI.show_uploadform();return false" /></li>
-- 
cgit v1.2.3


From 4984078a56771a4f1be9af69eaedf8faefc2019b Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Tue, 3 Jun 2014 17:51:33 +0200
Subject: Fix list keyboard navigation with toggleselect on

---
 program/js/list.js | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

(limited to 'program/js')

diff --git a/program/js/list.js b/program/js/list.js
index b9a437c26..33693abd8 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -95,6 +95,12 @@ init: function()
     this.tbody = this.list;
   }
 
+  if ($(this.list).attr('role') == 'listbox') {
+    this.aria_listbox = true;
+    if (this.multiselect)
+      $(this.list).attr('aria-multiselectable', 'true');
+  }
+
   if (this.tbody) {
     this.rows = {};
     this.rowcount = 0;
@@ -118,12 +124,6 @@ init: function()
     }
   }
 
-  if ($(this.list).attr('role') == 'listbox') {
-    this.aria_listbox = true;
-    if (this.multiselect)
-      $(this.list).attr('aria-multiselectable', 'true');
-  }
-
   return this;
 },
 
@@ -897,9 +897,10 @@ get_cell: function(row, index)
  */
 select_row: function(id, mod_key, with_mouse)
 {
-  var select_before = this.selection.join(',');
+  var select_before = this.selection.join(','),
+    in_selection_before = this.in_selection(id);
 
-  if (!this.multiselect)
+  if (!this.multiselect && with_mouse)
     mod_key = 0;
 
   if (!this.shift_start)
@@ -935,21 +936,21 @@ select_row: function(id, mod_key, with_mouse)
     this.multi_selecting = true;
   }
 
-  // trigger event if selection changed
-  if (this.selection.join(',') != select_before)
-    this.triggerEvent('select');
-
   if (this.last_selected != 0 && this.rows[this.last_selected]) {
     $(this.rows[this.last_selected].obj).removeClass('focused')
       .find(this.col_tagname()).eq(this.subject_col).removeAttr('tabindex');
   }
 
   // unselect if toggleselect is active and the same row was clicked again
-  if (this.toggleselect && this.last_selected == id) {
+  if (this.toggleselect && in_selection_before) {
     this.clear_selection();
-    id = null;
   }
-  else {
+  // trigger event if selection changed
+  else if (this.selection.join(',') != select_before) {
+    this.triggerEvent('select');
+  }
+
+  if (this.rows[id]) {
     $(this.rows[id].obj).addClass('focused');
     // set cursor focus to link inside selected row
     if (this.focused)
-- 
cgit v1.2.3


From f0928eac13b9161e251a779f229e37ec526fd590 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Tue, 3 Jun 2014 19:13:05 +0200
Subject: Fix keyboard navigation and focus/blur behavior in list widgets;
 register real link element as menu opener

---
 program/js/app.js  | 34 +++++++++++++++++++++++++---------
 program/js/list.js |  6 ++++++
 2 files changed, 31 insertions(+), 9 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index 9398c6a21..ea7265d59 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -453,9 +453,14 @@ function rcube_webmail()
 
         if (this.gui_objects.identitieslist) {
           this.identity_list = new rcube_list_widget(this.gui_objects.identitieslist,
-            {multiselect:false, draggable:false, keyboard:false});
+            {multiselect:false, draggable:false, keyboard:true});
           this.identity_list
             .addEventListener('select', function(o) { ref.identity_select(o); })
+            .addEventListener('keypress', function(o) {
+              if (o.key_pressed == o.ENTER_KEY) {
+                ref.identity_select(o);
+              }
+            })
             .init()
             .focus();
 
@@ -463,9 +468,10 @@ function rcube_webmail()
             this.identity_list.highlight_row(this.env.iid);
         }
         else if (this.gui_objects.sectionslist) {
-          this.sections_list = new rcube_list_widget(this.gui_objects.sectionslist, {multiselect:false, draggable:false, keyboard:false});
+          this.sections_list = new rcube_list_widget(this.gui_objects.sectionslist, {multiselect:false, draggable:false, keyboard:true});
           this.sections_list
             .addEventListener('select', function(o) { ref.section_select(o); })
+            .addEventListener('keypress', function(o) { if (o.key_pressed == o.ENTER_KEY) ref.section_select(o); })
             .init()
             .focus();
         }
@@ -473,7 +479,7 @@ function rcube_webmail()
           this.init_subscription_list();
         }
         else if (this.gui_objects.responseslist) {
-          this.responses_list = new rcube_list_widget(this.gui_objects.responseslist, {multiselect:false, draggable:false, keyboard:false});
+          this.responses_list = new rcube_list_widget(this.gui_objects.responseslist, {multiselect:false, draggable:false, keyboard:true});
           this.responses_list
             .addEventListener('select', function(list) {
               var win, id = list.get_single_selection();
@@ -1618,9 +1624,13 @@ function rcube_webmail()
     if ($(target).closest('.ui-dialog, .ui-widget-overlay').length)
       return;
 
-    list = this.message_list || this.contact_list;
-    if (list && !rcube_mouse_is_over(e, list.list.parentNode))
-      list.blur();
+    // remove focus from list widgets
+    if (window.rcube_list_widget && rcube_list_widget._instances.length) {
+      $.each(rcube_list_widget._instances, function(i,list){
+        if (list && !rcube_mouse_is_over(e, list.list.parentNode))
+          list.blur();
+      });
+    }
 
     // reset 'pressed' buttons
     if (this.buttons_sel) {
@@ -1632,7 +1642,7 @@ function rcube_webmail()
 
     // reset popup menus; delayed to have updated menu_stack data
     window.setTimeout(function(e){
-      var obj, skip, config, id, i;
+      var obj, skip, config, id, i, parents = $(target).parents();
       for (i = ref.menu_stack.length - 1; i >= 0; i--) {
         id = ref.menu_stack[i];
         obj = $('#' + id);
@@ -1640,6 +1650,7 @@ function rcube_webmail()
         if (obj.is(':visible')
           && target != obj.data('opener')
           && target != obj.get(0)  // check if scroll bar was clicked (#1489832)
+          && !parents.is(obj.data('opener'))
           && id != skip
           && (obj.attr('data-editable') != 'true' || !$(target).parents('#' + id).length)
           && (obj.attr('data-sticky') != 'true' || !rcube_mouse_is_over(e, obj.get(0)))
@@ -5917,7 +5928,7 @@ function rcube_webmail()
     this.last_sub_rx = RegExp('['+delim+']?[^'+delim+']+$');
 
     this.subscription_list = new rcube_list_widget(this.gui_objects.subscriptionlist,
-      {multiselect:false, draggable:true, keyboard:false, toggleselect:true});
+      {multiselect:false, draggable:true, keyboard:true, toggleselect:true});
     this.subscription_list
       .addEventListener('select', function(o){ ref.subscription_select(o); })
       .addEventListener('dragstart', function(o){ ref.drag_active = true; })
@@ -5926,7 +5937,8 @@ function rcube_webmail()
         row.obj.onmouseover = function() { ref.focus_subscription(row.id); };
         row.obj.onmouseout = function() { ref.unfocus_subscription(row.id); };
       })
-      .init();
+      .init()
+      .focus();
 
     $('#mailboxroot')
       .mouseover(function(){ ref.focus_subscription(this.id); })
@@ -6972,6 +6984,10 @@ function rcube_webmail()
       align = obj.attr('data-align') || '',
       stack = false;
 
+    // find "real" button element
+    if (ref.get(0).tagName != 'A' && ref.closest('a').length)
+      ref = ref.closest('a');
+
     if (typeof prop == 'string')
       prop = { menu:name };
 
diff --git a/program/js/list.js b/program/js/list.js
index 33693abd8..837a8459d 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -76,6 +76,9 @@ function rcube_list_widget(list, p)
   if (p && typeof p === 'object')
     for (var n in p)
       this[n] = p[n];
+
+  // register this instance
+  rcube_list_widget._instances.push(this);
 };
 
 
@@ -1791,3 +1794,6 @@ column_replace: function(from, to)
 rcube_list_widget.prototype.addEventListener = rcube_event_engine.prototype.addEventListener;
 rcube_list_widget.prototype.removeEventListener = rcube_event_engine.prototype.removeEventListener;
 rcube_list_widget.prototype.triggerEvent = rcube_event_engine.prototype.triggerEvent;
+
+// static
+rcube_list_widget._instances = [];
-- 
cgit v1.2.3


From 24e89eceed9694882ff943c4106519fab449705f Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 4 Jun 2014 12:10:49 +0200
Subject: Add fieldset legends and input element labels to contact edit form

---
 program/js/app.js                      | 17 ++++++-----------
 program/localization/en_US/labels.inc  |  2 ++
 program/steps/addressbook/edit.inc     |  3 +++
 program/steps/addressbook/func.inc     |  6 ++++--
 program/steps/addressbook/show.inc     |  1 +
 skins/classic/addressbook.css          |  5 +++++
 skins/larry/addressbook.css            | 10 ++++++++++
 skins/larry/settings.css               |  2 +-
 skins/larry/templates/contactedit.html |  5 +++--
 9 files changed, 35 insertions(+), 16 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index ea7265d59..1f6582bf6 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -5562,6 +5562,7 @@ function rcube_webmail()
 
       if (appendcontainer.length && appendcontainer.get(0).nodeName == 'FIELDSET') {
         var input, colprop = this.env.coltypes[col],
+          input_id = 'ff_' + col + (colprop.count || 0),
           row = $('<div>').addClass('row'),
           cell = $('<div>').addClass('contactfieldcontent data'),
           label = $('<div>').addClass('contactfieldlabel label');
@@ -5569,13 +5570,13 @@ function rcube_webmail()
         if (colprop.subtypes_select)
           label.html(colprop.subtypes_select);
         else
-          label.html(colprop.label);
+          label.html('<label for="' + input_id + '">' + colprop.label + '</label>');
 
         var name_suffix = colprop.limit != 1 ? '[]' : '';
         if (colprop.type == 'text' || colprop.type == 'date') {
           input = $('<input>')
             .addClass('ff_'+col)
-            .attr({type: 'text', name: '_'+col+name_suffix, size: colprop.size})
+            .attr({type: 'text', name: '_'+col+name_suffix, size: colprop.size, id: input_id})
             .appendTo(cell);
 
           this.init_edit_field(col, input);
@@ -5586,7 +5587,7 @@ function rcube_webmail()
         else if (colprop.type == 'textarea') {
           input = $('<textarea>')
             .addClass('ff_'+col)
-            .attr({ name: '_'+col+name_suffix, cols:colprop.size, rows:colprop.rows })
+            .attr({ name: '_'+col+name_suffix, cols:colprop.size, rows:colprop.rows, id: input_id })
             .appendTo(cell);
 
           this.init_edit_field(col, input);
@@ -5621,7 +5622,7 @@ function rcube_webmail()
         else if (colprop.type == 'select') {
           input = $('<select>')
             .addClass('ff_'+col)
-            .attr('name', '_'+col+name_suffix)
+            .attr({ 'name': '_'+col+name_suffix, id: input_id })
             .appendTo(cell);
 
           var options = input.attr('options');
@@ -6953,13 +6954,7 @@ function rcube_webmail()
         container.data('callback')($(this).data('id'));
         return false;
       });
-/*
-      // hide selector on click out of selector element
-      var fn = function(e) { if (e.target != container.get(0)) container.hide(); };
-      $(document.body).on('mouseup', fn);
-      $('iframe').contents().on('mouseup', fn)
-        .load(function(e) { try { $(this).contents().on('mouseup', fn); } catch(e) {}; });
-*/
+
       this.folder_selector_element = container;
     }
 
diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc
index 9d3863497..d1c642bd2 100644
--- a/program/localization/en_US/labels.inc
+++ b/program/localization/en_US/labels.inc
@@ -353,7 +353,9 @@ $labels['addcontact'] = 'Add new contact';
 $labels['editcontact'] = 'Edit contact';
 $labels['contacts'] = 'Contacts';
 $labels['contactproperties'] = 'Contact properties';
+$labels['contactnameandorg'] = 'Name and Organization';
 $labels['personalinfo'] = 'Personal information';
+$labels['contactphoto'] = 'Contact photo';
 
 $labels['edit']   = 'Edit';
 $labels['cancel'] = 'Cancel';
diff --git a/program/steps/addressbook/edit.inc b/program/steps/addressbook/edit.inc
index 3bbbfccdf..0fc753056 100644
--- a/program/steps/addressbook/edit.inc
+++ b/program/steps/addressbook/edit.inc
@@ -98,12 +98,15 @@ function rcmail_get_edit_record()
 
 function rcmail_contact_edithead($attrib)
 {
+    global $RCMAIL;
+
     // check if we have a valid result
     $record = rcmail_get_edit_record();
     $i_size = !empty($attrib['size']) ? $attrib['size'] : 20;
 
     $form = array(
         'head' => array(
+            'name' => $RCMAIL->gettext('contactnameandorg'),
             'content' => array(
                 'prefix' => array('size' => $i_size),
                 'firstname' => array('size' => $i_size, 'visible' => true),
diff --git a/program/steps/addressbook/func.inc b/program/steps/addressbook/func.inc
index e68a694ef..8955488bd 100644
--- a/program/steps/addressbook/func.inc
+++ b/program/steps/addressbook/func.inc
@@ -649,6 +649,8 @@ function rcmail_contact_form($form, $record, $attrib = null)
                     if ($subtypes[$i])
                         $subtype = $subtypes[$i];
 
+                    $colprop['id'] = 'ff_' . $col . intval($coltypes[$field]['count']);
+
                     // render composite field
                     if ($colprop['type'] == 'composite') {
                         $composite = array(); $j = 0;
@@ -714,7 +716,7 @@ function rcmail_contact_form($form, $record, $attrib = null)
                     // display row with label
                     if ($label) {
                         $rows .= html::div('row',
-                            html::div('contactfieldlabel label', $select_subtype ? $select_subtype->show($subtype) : rcube::Q($label)) .
+                            html::div('contactfieldlabel label', $select_subtype ? $select_subtype->show($subtype) : html::label($colprop['id'], rcube::Q($label))) .
                             html::div('contactfieldcontent '.$colprop['type'], $val));
                     }
                     else   // row without label
@@ -803,7 +805,7 @@ function rcmail_contact_photo($attrib)
     else
         $ff_value = '-del-'; // will disable delete-photo action
 
-    $img = html::img(array('src' => $photo_img, 'border' => 1, 'alt' => ''));
+    $img = html::img(array('src' => $photo_img, 'border' => 1, 'alt' => $RCMAIL->gettext('contactphoto')));
     $content = html::div($attrib, $img);
 
     if ($CONTACT_COLTYPES['photo'] && ($RCMAIL->action == 'edit' || $RCMAIL->action == 'add')) {
diff --git a/program/steps/addressbook/show.inc b/program/steps/addressbook/show.inc
index f4224a3e2..4471ea658 100644
--- a/program/steps/addressbook/show.inc
+++ b/program/steps/addressbook/show.inc
@@ -60,6 +60,7 @@ function rcmail_contact_head($attrib)
 
     $form = array(
         'head' => array(  // section 'head' is magic!
+            'name' => $RCMAIL->gettext('contactnameandorg'),
             'content' => array(
                 'prefix' => array('type' => 'text'),
                 'firstname' => array('type' => 'text'),
diff --git a/skins/classic/addressbook.css b/skins/classic/addressbook.css
index ebf9ab9d9..30052585a 100644
--- a/skins/classic/addressbook.css
+++ b/skins/classic/addressbook.css
@@ -279,6 +279,11 @@ body.iframe,
 	padding: 0;
 }
 
+#contacthead > legend
+{
+	display: none;
+}
+
 #contacthead .names span.namefield,
 #contacthead .names input
 {
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css
index c44a26c92..0583ce06e 100644
--- a/skins/larry/addressbook.css
+++ b/skins/larry/addressbook.css
@@ -201,6 +201,8 @@
 	float: left;
 	margin: 0 18px 20px 0;
 	width: 112px;
+	border: 0;
+	padding: 0;
 }
 
 #contactpic {
@@ -236,6 +238,10 @@
 	opacity: 0.05;
 }
 
+#contactphoto .formlinks a[aria-disabled='true'] {
+	visibility: hidden;
+}
+
 #contacthead {
 	border: 0;
 	margin: 0 16em 1em 0;
@@ -244,6 +250,10 @@
 	font-size: 12px;
 }
 
+#contacthead > legend {
+	display: none;
+}
+
 form #contacthead {
 	margin-right: 0;
 }
diff --git a/skins/larry/settings.css b/skins/larry/settings.css
index 0517f3c3a..4cbb1550f 100644
--- a/skins/larry/settings.css
+++ b/skins/larry/settings.css
@@ -78,7 +78,7 @@
 	background-position: -24px -1137px;
 }
 
-#sections-table td.section,
+#sections-table tbody td,
 #sections-table .listitem span,
 #settings-sections .listitem a,
 #settings-sections .tablink a {
diff --git a/skins/larry/templates/contactedit.html b/skins/larry/templates/contactedit.html
index 3467ebe8e..b7aafed31 100644
--- a/skins/larry/templates/contactedit.html
+++ b/skins/larry/templates/contactedit.html
@@ -16,7 +16,8 @@
 		<div id="sourcename"><roundcube:label name="addressbook" />: <roundcube:var name="env:sourcename" condition="env:action!='add'" /><roundcube:object name="sourceselector" id="sourceselect" condition="env:action=='add'" /></div>
 	<roundcube:endif />
 
-	<div id="contactphoto">
+	<fieldset id="contactphoto">
+		<legend class="voice"><roundcube:label name="contactphoto" /></legend>
 		<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" />
 		<roundcube:if condition="env:photocol" />
 		<roundcube:object name="fileDropArea" id="contactpic" />
@@ -25,7 +26,7 @@
 			<roundcube:button command="delete-photo" type="link" label="delete" class="iconlink delete disabled" classAct="iconlink delete active" condition="env:photocol" />
 		</div>
 		<roundcube:endif />
-	</div>
+	</fieldset>
 
 	<roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
 	<br style="clear:both" />
-- 
cgit v1.2.3


From 72afe3153cfaf0f8aaa0a4db115fea62959ff6d1 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 4 Jun 2014 15:29:37 +0200
Subject: Use <th> tags for table headers as suggested by the WCAG 2.0
 Guidelines

---
 program/js/app.js              |   2 +-
 program/js/list.js             |   6 +-
 program/lib/Roundcube/html.php |  15 +++-
 program/steps/mail/func.inc    |   4 +-
 skins/classic/common.css       |   2 +
 skins/classic/mail.css         | 152 +++++++++++++++++++++--------------------
 skins/larry/mail.css           | 137 +++++++++++++++++++------------------
 skins/larry/styles.css         |  22 +++---
 8 files changed, 179 insertions(+), 161 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index 1f6582bf6..9d08a3f75 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -6712,7 +6712,7 @@ function rcube_webmail()
         tr = document.createElement('tr');
 
         for (c=0, len=repl.length; c < len; c++) {
-          cell = document.createElement('td');
+          cell = document.createElement('th');
           cell.innerHTML = repl[c].html || '';
           if (repl[c].id) cell.id = repl[c].id;
           if (repl[c].className) cell.className = repl[c].className;
diff --git a/program/js/list.js b/program/js/list.js
index 837a8459d..cf6c3f011 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -199,7 +199,7 @@ init_header: function()
 
     if (this.fixed_header) {  // copy (modified) fixed header back to the actual table
       $(this.list.tHead).replaceWith($(this.fixed_header).find('thead').clone());
-      $(this.list.tHead).find('tr td').attr('style', '').find('a').attr('tabindex', '-1');  // remove fixed widths
+      $(this.list.tHead).find('th,td').attr('style', '').find('a').attr('tabindex', '-1');  // remove fixed widths
     }
     else if (!bw.touch && this.list.className.indexOf('fixedheader') >= 0) {
       this.init_fixed_header();
@@ -855,9 +855,9 @@ get_prev_row: function()
 get_first_row: function()
 {
   if (this.rowcount) {
-    var i, len, uid, rows = this.tbody.childNodes;
+    var i, uid, rows = this.tbody.childNodes;
 
-    for (i=0, len=rows.length-1; i<len; i++)
+    for (i=0; i<rows.length; i++)
       if (rows[i].id && (uid = this.get_row_uid(rows[i])))
         return uid;
   }
diff --git a/program/lib/Roundcube/html.php b/program/lib/Roundcube/html.php
index 5e07a7806..de03265c1 100644
--- a/program/lib/Roundcube/html.php
+++ b/program/lib/Roundcube/html.php
@@ -837,7 +837,7 @@ class html_table extends html
         if (!empty($this->header)) {
             $rowcontent = '';
             foreach ($this->header as $c => $col) {
-                $rowcontent .= self::tag($this->_col_tagname(), $col->attrib, $col->content);
+                $rowcontent .= self::tag($this->_head_tagname(), $col->attrib, $col->content);
             }
             $thead = $this->tagname == 'table' ? self::tag('thead', null, self::tag('tr', null, $rowcontent, parent::$common_attrib)) :
                 self::tag($this->_row_tagname(), array('class' => 'thead'), $rowcontent, parent::$common_attrib);
@@ -890,7 +890,16 @@ class html_table extends html
     private function _row_tagname()
     {
         static $row_tagnames = array('table' => 'tr', 'ul' => 'li', '*' => 'div');
-        return $row_tagnames[$this->tagname] ? $row_tagnames[$this->tagname] : $row_tagnames['*'];
+        return $row_tagnames[$this->tagname] ?: $row_tagnames['*'];
+    }
+
+    /**
+     * Getter for the corresponding tag name for table row elements
+     */
+    private function _head_tagname()
+    {
+        static $head_tagnames = array('table' => 'th', '*' => 'span');
+        return $head_tagnames[$this->tagname] ?: $head_tagnames['*'];
     }
 
     /**
@@ -899,7 +908,7 @@ class html_table extends html
     private function _col_tagname()
     {
         static $col_tagnames = array('table' => 'td', '*' => 'span');
-        return $col_tagnames[$this->tagname] ? $col_tagnames[$this->tagname] : $col_tagnames['*'];
+        return $col_tagnames[$this->tagname] ?: $col_tagnames['*'];
     }
 
 }
diff --git a/program/steps/mail/func.inc b/program/steps/mail/func.inc
index cbfb1200b..436475f64 100644
--- a/program/steps/mail/func.inc
+++ b/program/steps/mail/func.inc
@@ -509,8 +509,8 @@ function rcmail_message_list_head($attrib, $a_show_cols)
         $a_sort_cols = array('subject', 'date', 'from', 'to', 'fromto', 'size', 'cc');
 
     if (!empty($attrib['optionsmenuicon'])) {
-        $onclick = 'return ' . rcmail_output::JS_OBJECT_NAME . ".command('menu-open', 'messagelistmenu', null, event)";
-        $inner   = 'v';
+        $onclick = 'return ' . rcmail_output::JS_OBJECT_NAME . ".command('menu-open', 'messagelistmenu', this, event)";
+        $inner   = $RCMAIL->gettext('listoptions');
         if (is_string($attrib['optionsmenuicon']) && $attrib['optionsmenuicon'] != 'true') {
             $inner = html::img(array('src' => $skin_path . $attrib['optionsmenuicon'], 'alt' => $RCMAIL->gettext('listoptions')));
         }
diff --git a/skins/classic/common.css b/skins/classic/common.css
index 126408444..c0d0a2610 100644
--- a/skins/classic/common.css
+++ b/skins/classic/common.css
@@ -607,6 +607,7 @@ img.uploading
 
 /***** common table settings ******/
 
+table.records-table thead tr th,
 table.records-table thead tr td
 {
   height: 20px;
@@ -617,6 +618,7 @@ table.records-table thead tr td
   background: url(images/listheader.gif) top left repeat-x #CCC;
   font-size: 11px;
   font-weight: bold;
+  text-align: left;
 }
 
 table.records-table tbody tr td
diff --git a/skins/classic/mail.css b/skins/classic/mail.css
index 3310ac54f..45661f7f8 100644
--- a/skins/classic/mail.css
+++ b/skins/classic/mail.css
@@ -719,6 +719,7 @@ table.messagelist.fixedcopy
   z-index: 2;
 }
 
+.messagelist thead tr th,
 .messagelist thead tr td
 {
   height: 20px;
@@ -729,25 +730,26 @@ table.messagelist.fixedcopy
   background: url(images/listheader.gif) top left repeat-x #CCC;
   font-size: 11px;
   font-weight: bold;
+  text-align: left;
 }
 
-.messagelist thead tr td.sortedASC,
-.messagelist thead tr td.sortedDESC
+.messagelist thead tr > .sortedASC,
+.messagelist thead tr > .sortedDESC
 {
   background-position: 0 -26px;
 }
 
-.messagelist thead tr td.sortedASC a
+.messagelist thead tr > .sortedASC a
 {
   background: url(images/icons/sort.gif) right 0 no-repeat;
 }
 
-.messagelist thead tr td.sortedDESC a
+.messagelist thead tr > .sortedDESC a
 {
   background: url(images/icons/sort.gif) right -14px no-repeat;
 }
 
-.messagelist thead tr td a
+.messagelist thead tr a
 {
   display: block;
   width: auto !important;
@@ -756,18 +758,19 @@ table.messagelist.fixedcopy
   text-decoration: none;
 }
 
-.messagelist thead tr td.size.sortedASC a,
-.messagelist thead tr td.size.sortedDESC a
+.messagelist thead tr > .size.sortedASC a,
+.messagelist thead tr > .size.sortedDESC a
 {
   padding-right: 18px;
 }
 
-.messagelist thead tr td.subject
+.messagelist thead tr > .subject
 {
   padding-left: 18px;
   width: 99%;
 }
 
+.messagelist tbody tr th,
 .messagelist tbody tr td
 {
   height: 20px;
@@ -804,10 +807,10 @@ table.messagelist.fixedcopy
   cursor: pointer;
 }
 
-.messagelist tr td.flag span,
-.messagelist tr td.status span,
-.messagelist tr td.attachment span,
-.messagelist tr td.priority span
+.messagelist tr > .flag span,
+.messagelist tr > .status span,
+.messagelist tr > .attachment span,
+.messagelist tr > .priority span
 {
   display: block;
   width: 15px;
@@ -815,29 +818,29 @@ table.messagelist.fixedcopy
 
 .messagelist tr td div.collapsed,
 .messagelist tr td div.expanded,
-.messagelist tr td.threads .listmenu,
-.messagelist tr td.attachment span.attachment,
-.messagelist tr td.attachment span.report,
-.messagelist tr td.priority span.priority,
-.messagelist tr td.priority span.prio1,
-.messagelist tr td.priority span.prio2,
-.messagelist tr td.priority span.prio3,
-.messagelist tr td.priority span.prio4,
-.messagelist tr td.priority span.prio5,
-.messagelist tr td.flag span.flagged,
-.messagelist tr td.flag span.unflagged,
-.messagelist tr td.flag span.unflagged:hover,
-.messagelist tr td.status span.status,
-.messagelist tr td.status span.msgicon,
-.messagelist tr td.status span.deleted,
-.messagelist tr td.status span.unread,
-.messagelist tr td.status span.unreadchildren,
-.messagelist tr td.subject span.msgicon,
-.messagelist tr td.subject span.deleted,
-.messagelist tr td.subject span.unread,
-.messagelist tr td.subject span.replied,
-.messagelist tr td.subject span.forwarded,
-.messagelist tr td.subject span.unreadchildren
+.messagelist tr > .threads .listmenu,
+.messagelist tr > .attachment span.attachment,
+.messagelist tr > .attachment span.report,
+.messagelist tr > .priority span.priority,
+.messagelist tr > .priority span.prio1,
+.messagelist tr > .priority span.prio2,
+.messagelist tr > .priority span.prio3,
+.messagelist tr > .priority span.prio4,
+.messagelist tr > .priority span.prio5,
+.messagelist tr > .flag span.flagged,
+.messagelist tr > .flag span.unflagged,
+.messagelist tr > .flag span.unflagged:hover,
+.messagelist tr > .status span.status,
+.messagelist tr > .status span.msgicon,
+.messagelist tr > .status span.deleted,
+.messagelist tr > .status span.unread,
+.messagelist tr > .status span.unreadchildren,
+.messagelist tr > .subject span.msgicon,
+.messagelist tr > .subject span.deleted,
+.messagelist tr > .subject span.unread,
+.messagelist tr > .subject span.replied,
+.messagelist tr > .subject span.forwarded,
+.messagelist tr > .subject span.unreadchildren
 {
   display: inline-block;
   vertical-align: middle;
@@ -846,99 +849,99 @@ table.messagelist.fixedcopy
   background: url(images/messageicons.png) center no-repeat;
 }
 
-.messagelist tr td.attachment span.attachment
+.messagelist tr > .attachment span.attachment
 {
   background-position: 0 -170px;
 }
 
-.messagelist tr td.attachment span.report
+.messagelist tr > .attachment span.report
 {
   background-position: 0 -255px;
 }
 
-.messagelist tr td.priority span.priority
+.messagelist tr > .priority span.priority
 {
   background-position: 0 -309px;
 }
 
-.messagelist tr td.priority span.prio5
+.messagelist tr > .priority span.prio5
 {
   background-position: 0 -358px;
 }
 
-.messagelist tr td.priority span.prio4
+.messagelist tr > .priority span.prio4
 {
   background-position: 0 -340px;
 }
 
-.messagelist tr td.priority span.prio3
+.messagelist tr > .priority span.prio3
 {
   background-position: 0 -324px;
 }
 
-.messagelist tr td.priority span.prio2
+.messagelist tr > .priority span.prio2
 {
   background-position: 0 -309px;
 }
 
-.messagelist tr td.priority span.prio1
+.messagelist tr > .priority span.prio1
 {
   background-position: 0 -290px;
 }
 
-.messagelist tr td.flag span.flagged
+.messagelist tr > .flag span.flagged
 {
   background-position: 0 -153px;
 }
 
-.messagelist tr td.flag span.unflagged:hover
+.messagelist tr > .flag span.unflagged:hover
 {
   background-position: 0 -136px;
 }
 
-.messagelist tr td.subject span.msgicon,
-.messagelist tr td.subject span.unreadchildren
+.messagelist tr > .subject span.msgicon,
+.messagelist tr > .subject span.unreadchildren
 {
   background-position: 0 -51px;
   margin: 0 2px;
 }
 
-.messagelist tr td.subject span.replied
+.messagelist tr > .subject span.replied
 {
   background-position: 0 -85px;
 }
 
-.messagelist tr td.subject span.forwarded
+.messagelist tr > .subject span.forwarded
 {
   background-position: 0 -68px;
 }
 
-.messagelist tr td.subject span.replied.forwarded
+.messagelist tr > .subject span.replied.forwarded
 {
   background-position: 0 -102px;
 }
 
-.messagelist tr td.status span.msgicon,
-.messagelist tr td.flag span.unflagged,
-.messagelist tr td.status span.unreadchildren
+.messagelist tr > .status span.msgicon,
+.messagelist tr > .flag span.unflagged,
+.messagelist tr > .status span.unreadchildren
 {
   background-position: 0 17px; /* no icon */
 }
 
-.messagelist tr td.status span.msgicon:hover
+.messagelist tr > .status span.msgicon:hover
 {
   background-position: 0 -272px;
 }
 
-.messagelist tr td.status span.deleted,
-.messagelist tr td.subject span.deleted
+.messagelist tr > .status span.deleted,
+.messagelist tr > .subject span.deleted
 {
   background-position: 0 -187px;
 }
 
-.messagelist tr td.status span.status,
-.messagelist tr td.status span.unread,
-.messagelist tr td.subject span.unread
+.messagelist tr > .status span.status,
+.messagelist tr > .status span.unread,
+.messagelist tr > .subject span.unread
 {
   background-position: 0 -119px;
 }
@@ -955,7 +958,7 @@ table.messagelist.fixedcopy
   cursor: pointer;
 }
 
-.messagelist tr td.threads .listmenu
+.messagelist tr > .threads .listmenu
 {
   background-position: 0 -238px;
   cursor: pointer;
@@ -980,45 +983,45 @@ table.messagelist.fixedcopy
   text-decoration: underline;
 }
 
-.messagelist tr td.attachment,
-.messagelist tr td.threads,
-.messagelist tr td.status,
-.messagelist tr td.flag,
-.messagelist tr td.priority
+.messagelist tr > .attachment,
+.messagelist tr > .threads,
+.messagelist tr > .status,
+.messagelist tr > .flag,
+.messagelist tr > .priority
 {
   width: 17px;
   padding: 0 0 0 2px;
 }
 
-.messagelist tr td.size
+.messagelist tr > .size
 {
   width: 60px;
   text-align: right;
   padding: 0 2px;
 }
 
-.messagelist tr td.fromto,
-.messagelist tr td.from,
-.messagelist tr td.to,
-.messagelist tr td.cc,
-.messagelist tr td.replyto
+.messagelist tr > .fromto,
+.messagelist tr > .from,
+.messagelist tr > .to,
+.messagelist tr > .cc,
+.messagelist tr > .replyto
 {
   width: 180px;
   padding: 0 2px;
 }
 
-.messagelist tr td.date
+.messagelist tr > .date
 {
   width: 135px;
   padding: 0 2px;
 }
 
-.messagelist tr td.folder
+.messagelist tr > .folder
 {
   width: 135px;
 }
 
-.messagelist tr td.hidden
+.messagelist tr > .hidden
 {
   display: none;
 }
@@ -1041,6 +1044,7 @@ table.messagelist.fixedcopy
 }
 
 /* This padding-left minus the focused padding left should be half of the focused border-left */
+.messagelist thead tr th:first-child,
 .messagelist thead tr td:first-child,
 .messagelist tbody tr td:first-child {
 	border-left: 0;
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index c5919ffe3..a0b66d9be 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -477,66 +477,66 @@ table.messagelist.fixedcopy {
 	z-index: 2;
 }
 
-.messagelist thead td:first-child {
+.messagelist thead th:first-child {
 	border-radius: 4px 0 0 0; /* for Chrome */
 }
 
-.messagelist tr td.attachment,
-.messagelist tr td.threads,
-.messagelist tr td.status,
-.messagelist tr td.flag,
-.messagelist tr td.priority {
+.messagelist tr > .attachment,
+.messagelist tr > .threads,
+.messagelist tr > .status,
+.messagelist tr > .flag,
+.messagelist tr > .priority {
 	width: 20px;
 	padding: 2px 3px;
 }
 
-.webkit .messagelist tr td.attachment,
-.webkit .messagelist tr td.threads,
-.webkit .messagelist tr td.status,
-.webkit .messagelist tr td.flag,
-.webkit .messagelist tr td.priority {
+.webkit .messagelist tr > .attachment,
+.webkit .messagelist tr > .threads,
+.webkit .messagelist tr > .status,
+.webkit .messagelist tr > .flag,
+.webkit .messagelist tr > .priority {
 	width: 26px;
 }
 
-.messagelist tr td.threads {
+.messagelist tr > .threads {
 	width: 26px;
 }
 
-.webkit .messagelist tr td.threads {
+.webkit .messagelist tr > .threads {
 	width: 30px;
 }
 
-.messagelist tr td.threads,
-.messagelist tr td.threads + td {
+.messagelist tr > .threads,
+.messagelist tr > .threads + td {
 	border-left: 0;
 }
 
-.messagelist tr td.size {
+.messagelist tr > .size {
 	width: 60px;
 	text-align: right;
 }
 
-.messagelist thead tr td.size {
+.messagelist thead tr th.size {
 	text-align: left;
 }
 
-.messagelist tr td.fromto,
-.messagelist tr td.from,
-.messagelist tr td.to,
-.messagelist tr td.cc,
-.messagelist tr td.replyto {
+.messagelist tr > .fromto,
+.messagelist tr > .from,
+.messagelist tr > .to,
+.messagelist tr > .cc,
+.messagelist tr > .replyto {
 	width: 200px;
 }
 
-.messagelist tr td.date {
+.messagelist tr > .date {
 	width: 155px;
 }
 
-.messagelist tr td.folder {
+.messagelist tr > .folder {
 	width: 135px;
 }
 
-.messagelist tr td.hidden {
+.messagelist tr > .hidden {
 	display: none;
 }
 
@@ -553,13 +553,14 @@ table.messagelist.fixedcopy {
 /*	background-color: #fff; */
 }
 
+.messagelist tr.flagged th,
 .messagelist tr.flagged td,
 .messagelist tr.flagged td a {
 	color: #f30;
 }
 
-.messagelist thead tr td.sortedASC a,
-.messagelist thead tr td.sortedDESC a {
+.messagelist thead tr th.sortedASC a,
+.messagelist thead tr th.sortedDESC a {
 	color: #004458;
 	text-decoration: underline;
 	background-image: url(images/listicons.png);
@@ -567,7 +568,7 @@ table.messagelist.fixedcopy {
 	background-position: right -912px;
 }
 
-.messagelist thead tr td.sortedASC a {
+.messagelist thead tr th.sortedASC a {
 	background-position: right -944px;
 }
 
@@ -589,39 +590,39 @@ table.messagelist.fixedcopy {
 	cursor: pointer;
 }
 
-.messagelist tr td.flag span,
-.messagelist tr td.status span,
-.messagelist tr td.attachment span,
-.messagelist tr td.priority span {
+.messagelist tr > .flag span,
+.messagelist tr > .status span,
+.messagelist tr > .attachment span,
+.messagelist tr > .priority span {
 	display: block;
 	width: 20px;
 }
 
 .messagelist tr td div.collapsed,
 .messagelist tr td div.expanded,
-.messagelist tr td.threads .listmenu,
-.messagelist tr td.attachment span.attachment,
-.messagelist tr td.attachment span.report,
-.messagelist tr td.priority span.priority,
-.messagelist tr td.priority span.prio1,
-.messagelist tr td.priority span.prio2,
-.messagelist tr td.priority span.prio3,
-.messagelist tr td.priority span.prio4,
-.messagelist tr td.priority span.prio5,
-.messagelist tr td.flag span.flagged,
-.messagelist tr td.flag span.unflagged,
-.messagelist tr td.flag span.unflagged:hover,
-.messagelist tr td.status span.status,
-.messagelist tr td.status span.msgicon,
-.messagelist tr td.status span.deleted,
-.messagelist tr td.status span.unread,
-.messagelist tr td.status span.unreadchildren,
-.messagelist tr td.subject span.msgicon,
-.messagelist tr td.subject span.deleted,
-.messagelist tr td.subject span.unread,
-.messagelist tr td.subject span.replied,
-.messagelist tr td.subject span.forwarded,
-.messagelist tr td.subject span.unreadchildren {
+.messagelist tr > .threads .listmenu,
+.messagelist tr > .attachment span.attachment,
+.messagelist tr > .attachment span.report,
+.messagelist tr > .priority span.priority,
+.messagelist tr > .priority span.prio1,
+.messagelist tr > .priority span.prio2,
+.messagelist tr > .priority span.prio3,
+.messagelist tr > .priority span.prio4,
+.messagelist tr > .priority span.prio5,
+.messagelist tr > .flag span.flagged,
+.messagelist tr > .flag span.unflagged,
+.messagelist tr > .flag span.unflagged:hover,
+.messagelist tr > .status span.status,
+.messagelist tr > .status span.msgicon,
+.messagelist tr > .status span.deleted,
+.messagelist tr > .status span.unread,
+.messagelist tr > .status span.unreadchildren,
+.messagelist tr > .subject span.msgicon,
+.messagelist tr > .subject span.deleted,
+.messagelist tr > .subject span.unread,
+.messagelist tr > .subject span.replied,
+.messagelist tr > .subject span.forwarded,
+.messagelist tr > .subject span.unreadchildren {
 	display: inline-block;
 	vertical-align: middle;
 	height: 18px;
@@ -634,7 +635,7 @@ table.messagelist.fixedcopy {
 	background-position: 0 -996px;
 }
 
-.messagelist thead tr td.attachment span.attachment {
+.messagelist thead tr th.attachment span.attachment {
 	background-position: -24px -997px;
 }
 
@@ -642,7 +643,7 @@ table.messagelist.fixedcopy {
 	background-position: -24px -1116px;
 }
 
-.messagelist thead tr td.priority span.priority {
+.messagelist thead tr th.priority span.priority {
 	background-position: -24px -1845px;
 }
 
@@ -666,15 +667,15 @@ table.messagelist.fixedcopy {
 	background-position: 0 -1036px;
 }
 
-.messagelist thead tr td.flag span.flagged {
+.messagelist thead tr th.flag span.flagged {
 	background-position: -22px -1036px;
 }
 
-.messagelist tr td.status span.msgicon:hover {
-	background-position: -23px -1056px;
+.messagelist tr:hover td.status span.msgicon {
+	background-position: -23px -1057px;
 }
 
-.messagelist tr td.flag span.unflagged:hover {
+.messagelist tr:hover td.flag span.unflagged {
 	background-position: -23px -1076px;
 }
 
@@ -717,10 +718,10 @@ table.messagelist.fixedcopy {
 .messagelist tr td.status span.unread,
 .messagelist tr td.subject span.unread,
 .messagelist tr td.status span.unread:hover {
-	background-position: 0 -1016px;
+	background-position: 0 -1017px;
 }
 
-.messagelist thead tr td.status span.status {
+.messagelist thead tr th.status span.status {
 	background-position: -23px -1017px;
 }
 
@@ -734,10 +735,10 @@ table.messagelist.fixedcopy {
 	cursor: pointer;
 }
 
-.messagelist tr td.threads .listmenu {
-	background-position: 6px -972px;
+.messagelist tr th.threads .listmenu {
+	background-position: 4px -972px;
 	cursor: pointer;
-	width: 26px;
+	width: 24px;
 	height: 21px;
 	overflow: hidden;
 	text-indent: -5000px;
@@ -745,12 +746,12 @@ table.messagelist.fixedcopy {
 	padding: 3px  5px  2px  6px;
 }
 
-.messagelist tr td.threads .listmenu:focus {
+.messagelist tr th.threads .listmenu:focus {
 	background-color: rgba(73,180,210,0.7);
 	outline: none;
 }
 
-.messagelist thead tr td.subject,
+.messagelist thead tr th.subject,
 .messagelist tbody tr td.subject {
 	width: 99%;
 	white-space: nowrap;
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 27a0cb99c..a2cad34f1 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -1131,6 +1131,7 @@ a.iconlink.upload {
 }
 
 .boxtitle,
+.uibox .listing thead th,
 .uibox .listing thead td {
 	font-size: 12px;
 	font-weight: bold;
@@ -1142,12 +1143,14 @@ a.iconlink.upload {
 	white-space: nowrap;
 }
 
+.uibox .listing thead th,
 .uibox .listing thead td {
 	padding-bottom: 8px;
 	height: auto;
 }
 
 .uibox .boxtitle,
+.uibox .listing thead th,
 .uibox .listing thead td {
 	background: #b0ccd7;
 	color: #004458;
@@ -1212,11 +1215,7 @@ a.iconlink.upload {
 
 /* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
 .listing.focus tbody tr.focused > td:first-child {
-	border-left: 2px solid #b0ccd7;
-}
-
-.listing.focus tbody tr.selected.focused > td:first-child {
-	border-left-color: #9ec2d0;
+	border-left: 2px solid #739da8;
 }
 
 .listbox .listitem.selected,
@@ -1511,6 +1510,7 @@ table.records-table {
 	border: 0;
 }
 
+.records-table thead th,
 .records-table thead td {
 	color: #69939e;
 	font-size: 11px;
@@ -1525,13 +1525,17 @@ table.records-table {
 	padding: 8px 7px;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	text-align: left;
 }
 
+.records-table.sortheader thead th,
 .records-table.sortheader thead td {
 	padding: 0;
 }
 
+.records-table thead th a,
 .records-table thead td a,
+.records-table thead th span,
 .records-table thead td span {
 	display: block;
 	padding: 7px 7px;
@@ -1541,6 +1545,7 @@ table.records-table {
 	text-overflow: ellipsis;
 }
 
+.records-table thead th a:focus,
 .records-table thead td a:focus {
 	color: #fff;
 	background-color: rgba(73,180,210,0.7);
@@ -1561,6 +1566,7 @@ table.records-table {
 }
 
 /* This padding-left minus the focused padding left should be half of the focused border-left */
+.records-table thead tr th:first-child,
 .records-table thead tr td:first-child,
 .records-table tbody tr td:first-child {
 	border-left: 2px solid transparent;
@@ -1569,11 +1575,7 @@ table.records-table {
 
 /* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
 .records-table.focus tbody tr.focused > td:first-child {
-	border-left: 2px solid #b0ccd7;
-}
-
-.records-table.focus tbody tr.selected.focused > td:first-child {
-	border-left-color: #49b3d2;
+	border-left: 2px solid #49b3d2;
 }
 
 .records-table tr.selected td {
-- 
cgit v1.2.3


From 6d3ab605b17223f79d94a3bf82d8e4f16101cb1c Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 4 Jun 2014 16:23:43 +0200
Subject: Make autocomplete widget actually work with screen readers

---
 program/js/app.js | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index 9d08a3f75..dd7b51f04 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -3439,9 +3439,7 @@ function rcube_webmail()
     this.env.recipients_delimiter = this.env.recipients_separator + ' ';
 
     obj.keydown(function(e) { return ref.ksearch_keydown(e, this, props); })
-      .attr('autocomplete', 'off')
-      .attr('aria-autocomplete', 'list')
-      .attr('aria-expanded', 'false');
+      .attr({ 'autocomplete': 'off', 'aria-autocomplete': 'list', 'aria-expanded': 'false', 'role': 'combobox' });
   };
 
   this.submit_messageform = function(draft)
@@ -4586,9 +4584,9 @@ function rcube_webmail()
     }
 
     if (node) {
-      $(node).addClass('selected').removeAttr('aria-selected', 'true');
+      $(node).addClass('selected').attr('aria-selected', 'true');
       this.ksearch_selected = node._rcm_id;
-      $(this.ksearch_input).attr('aria-activedecendant', 'rcmkSearchItem' + this.ksearch_selected);
+      $(this.ksearch_input).attr('aria-activedescendant', 'rcmkSearchItem' + this.ksearch_selected);
     }
   };
 
@@ -4769,17 +4767,18 @@ function rcube_webmail()
     }
 
     if (ul.childNodes.length) {
+      // set the right aria-* attributes to the input field
+      $(this.ksearch_input)
+        .attr('aria-haspopup', 'true')
+        .attr('aria-expanded', 'true')
+        .attr('aria-owns', 'rcmKSearchpane');
+
       this.ksearch_pane.show();
+
       // select the first
       if (!this.env.contacts.length) {
         this.ksearch_select($('li:first', ul).get(0));
       }
-
-      // set the right aria-* attributes to the input field
-      $(this.ksearch_input)
-        .attr('aria-haspopup', 'true')
-        .attr('aria-expanded', 'true')
-        .attr('aria-owns', 'rcmKSearchpane')
     }
 
     if (len)
-- 
cgit v1.2.3


From 761ee4c575d8f1a537c78680ebff6862c0f189fd Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 4 Jun 2014 16:34:30 +0200
Subject: Fix typo in aria-attribute

---
 program/js/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'program/js')

diff --git a/program/js/app.js b/program/js/app.js
index dd7b51f04..b1feeb456 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -4817,7 +4817,7 @@ function rcube_webmail()
     $(this.ksearch_input)
       .attr('aria-haspopup', 'false')
       .attr('aria-expanded', 'false')
-      .removeAttr('aria-activedecendant')
+      .removeAttr('aria-activedescendant')
       .removeAttr('aria-owns');
 
     this.ksearch_destroy();
-- 
cgit v1.2.3