Improve keyboard navigation on compose screen: define tabindex groups + ena...

Thomas Bruederli

2014-05-07 ea0866a1adc9239b8b115ab2490e1dd88f3c64ec

 skins/larry/mail.css

@@ -34,10 +34,11 @@

#mailview-top {
   position: absolute;
   top: 42px;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0px;
   overflow: visible; /* fixes display issues of fixed list header in IE */
}

#mailview-bottom {
@@ -58,7 +59,7 @@
#mailboxcontainer,
#messagelistcontainer {
   position: absolute;
   top: 42px;
   top: 0;
   left: 0;
   width: 100%;
   bottom: 0;
@@ -157,6 +158,7 @@
   padding-right: 36px;
}

#mailboxlist li.mailbox > a:focus,
#mailboxlist li.mailbox.selected > a {
   background-position: 6px -21px;
}
@@ -165,6 +167,7 @@
   background-position: 6px -189px;
}

#mailboxlist li.mailbox.inbox > a:focus,
#mailboxlist li.mailbox.inbox.selected > a {
   background-position: 6px -213px;
}
@@ -173,6 +176,7 @@
   background-position: 6px -238px;
}

#mailboxlist li.mailbox.drafts > a:focus,
#mailboxlist li.mailbox.drafts.selected > a {
   background-position: 6px -262px;
}
@@ -181,6 +185,7 @@
   background-position: 6px -286px;
}

#mailboxlist li.mailbox.sent > a:focus,
#mailboxlist li.mailbox.sent.selected > a {
   background-position: 6px -310px;
}
@@ -189,6 +194,7 @@
   background-position: 6px -334px;
}

#mailboxlist li.mailbox.junk > a:focus,
#mailboxlist li.mailbox.junk.selected > a {
   background-position: 6px -358px;
}
@@ -197,6 +203,7 @@
   background-position: 6px -382px;
}

#mailboxlist li.mailbox.trash > a:focus,
#mailboxlist li.mailbox.trash.selected > a {
   background-position: 6px -406px;
}
@@ -205,6 +212,7 @@
   background-position: 6px -1924px;
}

#mailboxlist li.mailbox.trash.empty > a:focus,
#mailboxlist li.mailbox.trash.empty.selected > a {
   background-position: 6px -1948px;
}
@@ -213,6 +221,7 @@
   background-position: 6px -1699px;
}

#mailboxlist li.mailbox.archive > a:focus,
#mailboxlist li.mailbox.archive.selected > a {
   background-position: 6px -1723px;
}
@@ -221,6 +230,7 @@
   background-position: 23px -238px;
}

#mailboxlist li.mailbox ul li.drafts > a:focus,
#mailboxlist li.mailbox ul li.drafts.selected > a {
   background-position: 23px -262px;
}
@@ -229,6 +239,7 @@
   background-position: 23px -286px;
}

#mailboxlist li.mailbox ul li.sent > a:focus,
#mailboxlist li.mailbox ul li.sent.selected > a {
   background-position: 23px -310px;
}
@@ -237,6 +248,7 @@
   background-position: 23px -334px;
}

#mailboxlist li.mailbox ul li.junk > a:focus,
#mailboxlist li.mailbox ul li.junk.selected > a {
   background-position: 23px -358px;
}
@@ -245,6 +257,7 @@
   background-position: 23px -382px;
}

#mailboxlist li.mailbox ul li.trash > a:focus,
#mailboxlist li.mailbox ul li.trash.selected > a {
   background-position: 23px -406px;
}
@@ -253,6 +266,7 @@
   background-position: 23px -1924px;
}

#mailboxlist li.mailbox ul li.trash.empty > a:focus,
#mailboxlist li.mailbox ul li.trash.empty.selected > a {
   background-position: 23px -1948px;
}
@@ -261,6 +275,7 @@
   background-position: 23px -1699px;
}

#mailboxlist li.mailbox ul li.archive > a:focus,
#mailboxlist li.mailbox ul li.archive.selected > a {
   background-position: 23px -1723px;
}
@@ -299,6 +314,7 @@
   padding-left: 52px;  /* 36 + 1 x 16 */
   background-position: 22px -93px;  /* 6 + 1 x 16 */
}
#mailboxlist li.mailbox ul li > a:focus,
#mailboxlist li.mailbox ul li.selected > a {
   background-position: 22px -117px;
}
@@ -311,6 +327,7 @@
   padding-left: 68px;  /* 2x */
   background-position: 38px -93px;
}
#mailboxlist li.mailbox ul ul li > a:focus,
#mailboxlist li.mailbox ul ul li.selected > a {
   background-position: 38px -117px;
}
@@ -322,6 +339,7 @@
   padding-left: 84px;  /* 3x */
   background-position: 54px -93px;
}
#mailboxlist li.mailbox ul ul ul li > a:focus,
#mailboxlist li.mailbox ul ul ul li.selected > a {
   background-position: 54px -117px;
}
@@ -333,6 +351,7 @@
   padding-left: 100px;  /* 4x */
   background-position: 70px -93px;
}
#mailboxlist li.mailbox ul ul ul ul li > a:focus,
#mailboxlist li.mailbox ul ul ul ul li.selected > a {
   background-position: 70px -117px;
}
@@ -513,6 +532,14 @@
   width: 155px;
}

.messagelist tr td.folder {
   width: 135px;
}

.messagelist tr td.hidden {
   display: none;
}

.messagelist tr.message {
/*   background-color: #fff; */
}
@@ -535,7 +562,9 @@
.messagelist thead tr td.sortedDESC a {
   color: #004458;
   text-decoration: underline;
   background: url(images/listicons.png) right -912px no-repeat;
   background-image: url(images/listicons.png);
   background-repeat: no-repeat;
   background-position: right -912px;
}

.messagelist thead tr td.sortedASC a {
@@ -570,7 +599,7 @@

.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,
@@ -705,10 +734,20 @@
   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,
@@ -895,6 +934,16 @@
   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;
@@ -1065,20 +1114,20 @@
   margin: 8px;
}

#message-objects div.notice,
#message-buttons div.notice {
#message-objects div.notice {
   display: block;
   color: #960;
   border: 1px solid #ffdf0e;
   background-color: #fef893;
   background-position: 5px -83px;
   padding: 6px 12px 4px 30px;
   padding: 6px 12px 6px 30px;
   white-space: normal;
}

#message-objects div a.button,
#messagebody span.part-notice a.button {
   margin-left: 10px;
   margin-top: -1px;
}

div.message-part,
@@ -1202,7 +1251,7 @@

#messagepartcontainer {
   position: absolute;
   top: 42px;
   top: 0;
   left: 232px;
   right: 0;
   bottom: 0;
@@ -1216,7 +1265,7 @@

#messagepartheader {
   position: absolute;
   top: 42px;
   top: 0;
   left: 0;
   width: 220px;
   bottom: 0;
@@ -1258,7 +1307,7 @@

#compose-contacts {
   position: absolute;
   top: 42px;
   top: 0;
   left: 0;
   width: 100%;
   bottom: 0;
@@ -1309,11 +1358,17 @@
   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 {
@@ -1337,6 +1392,7 @@
   background-position: 6px -766px;
}

#compose-contacts li.addressbook a:focus,
#compose-contacts li.addressbook.selected a {
   background-position: 6px -791px;
}
@@ -1345,13 +1401,25 @@
   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,
@@ -1359,9 +1427,13 @@
   background-position: 6px -1627px;
}

#contacts-table.focus tr.selected.focused td.contact {
   background-position: 4px -1627px;
}

#compose-content {
   position: absolute;
   top: 42px;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0px;
@@ -1451,7 +1523,6 @@
   -o-box-shadow: inset 0 1px 0 0 #fff;
   -webkit-box-shadow: inset 0 1px 0 0 #fff;
   -moz-box-shadow: inset 0 1px 0 0 #fff;

}

.composeoption {