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

---
 skins/classic/common.css |   2 +
 skins/classic/mail.css   | 152 ++++++++++++++++++++++++-----------------------
 skins/larry/mail.css     | 137 +++++++++++++++++++++---------------------
 skins/larry/styles.css   |  22 +++----
 4 files changed, 161 insertions(+), 152 deletions(-)

(limited to 'skins')

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