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

---
 skins/classic/mail.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'skins/classic')

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
-- 
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 'skins/classic')

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 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 'skins/classic')

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 'skins/classic')

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 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 'skins/classic')

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 'skins/classic')

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 f25be2b863ec997dbe49d655db3a5a80a1f17bb7 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 4 Jun 2014 15:45:17 +0200
Subject: Render localized texts for icon-style messagelist headers

---
 program/steps/mail/func.inc | 6 ++++--
 skins/classic/mail.css      | 2 ++
 skins/larry/mail.css        | 2 ++
 3 files changed, 8 insertions(+), 2 deletions(-)

(limited to 'skins/classic')

diff --git a/program/steps/mail/func.inc b/program/steps/mail/func.inc
index 436475f64..d8211f532 100644
--- a/program/steps/mail/func.inc
+++ b/program/steps/mail/func.inc
@@ -541,12 +541,14 @@ function rcmail_message_list_head($attrib, $a_show_cols)
         // get column name
         switch ($col) {
         case 'flag':
-            $col_name = html::span('flagged', '&nbsp;');
+            $col_name = html::span('flagged', $RCMAIL->gettext('flagged'));
             break;
         case 'attachment':
         case 'priority':
+            $col_name = html::span($col, $RCMAIL->gettext($col));
+            break;
         case 'status':
-            $col_name = html::span($col, '&nbsp;');
+            $col_name = html::span($col, $RCMAIL->gettext('readstatus'));
             break;
         case 'threads':
             $col_name = $list_menu;
diff --git a/skins/classic/mail.css b/skins/classic/mail.css
index 45661f7f8..2521fed14 100644
--- a/skins/classic/mail.css
+++ b/skins/classic/mail.css
@@ -814,6 +814,8 @@ table.messagelist.fixedcopy
 {
   display: block;
   width: 15px;
+  text-indent: -5000px;
+  overflow: hidden;
 }
 
 .messagelist tr td div.collapsed,
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index a0b66d9be..98836bba2 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -596,6 +596,8 @@ table.messagelist.fixedcopy {
 .messagelist tr > .priority span {
 	display: block;
 	width: 20px;
+	text-indent: -5000px;
+	overflow: hidden;
 }
 
 .messagelist tr td div.collapsed,
-- 
cgit v1.2.3