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

Thomas Bruederli

2014-05-07 ea0866a1adc9239b8b115ab2490e1dd88f3c64ec

 skins/larry/styles.css

@@ -35,6 +35,10 @@
  border: 0;
}

.voice {
   display: none;
}

input[type="text"],
input[type="password"],
textarea {
@@ -310,6 +314,16 @@
   box-shadow: inset 0 1px 2px 0 #555;
   border-right-color: #555;
   border-left-color: #555;
}

.buttongroup a.button:focus,
.buttongroup a.button.selected:focus {
   background: #f2f2f2;
   background: -moz-linear-gradient(top, #49b3d2 0, #66bcd9 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#49b3d2), color-stop(100%,#66bcd9));
   background: -o-linear-gradient(top, #49b3d2 0, #66bcd9 100%);
   background: -ms-linear-gradient(top, #49b3d2 0, #66bcd9 100%);
   background: linear-gradient(top, #49b3d2 0, #66bcd9 100%);
}

.pagenav a.button {
@@ -945,6 +959,13 @@
   background: url(images/buttons.png) -1000px 0 no-repeat;
}

#taskbar a:focus {
   color: #fff;
   text-shadow: 0px 1px 1px #666;
   background-color: rgba(73,180,210,0.7);
   outline: none;
}

#taskbar a.button-selected {
   color: #3cf;
   background-color: #2c2c2c;
@@ -1169,6 +1190,36 @@
   height: 14px;
}

/* This padding-left minus the focused padding left should be half of the focused border-left */
.listing thead tr td:first-child,
.listing tbody tr td:first-child {
   border-left: 0;
   padding-left: 6px;
}

.listing.iconized thead tr td:first-child,
.listing.iconized tbody tr td:first-child {
   padding-left: 36px;
}

/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
.listing.focus tbody tr.focused > td:first-child {
   border-left: 2px solid #b0ccd7;
   padding-left: 4px;
}

.listing.iconized.focus tbody tr.focused > td:first-child {
   padding-left: 34px;
}

.listing.focus tbody tr.selected.focused > td:first-child {
   border-left-color: #9ec2d0;
}

.listing.inconized.focus tr.focused td:first-child {
   padding-left: 34px;
}

.listbox .listitem.selected,
.listbox .tablink.selected,
.listbox .listitem.selected > a,
@@ -1238,6 +1289,13 @@
   padding-left: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
}

ul.treelist li a:focus {
   color: #fff !important;
   background-color: rgba(73,180,210,0.6);
   text-shadow: 0px 1px 1px #666;
   outline: none;
}

ul.treelist ul li a {
@@ -1320,6 +1378,13 @@
   margin-top: 1px;
}

.boxfooter a.listbutton:focus {
   color: #fff;
   background-color: rgba(73,180,210,0.6);
   text-shadow: 0px 1px 1px #666;
   outline: none;
}

.uibox .boxfooter .listbutton:first-child {
   border-radius: 0 0 0 4px;
}
@@ -1329,7 +1394,9 @@
   width: 48px;
   height: 35px;
   text-indent: -5000px;
   background: url(images/buttons.png) -1000px 0 no-repeat;
   background-image: url(images/buttons.png);
   background-position: -1000px 0;
   background-repeat: no-repeat;
}

.boxfooter .listbutton.add .inner {
@@ -1473,6 +1540,13 @@
   text-overflow: ellipsis;
}

.records-table thead td a:focus {
   color: #fff;
   background-color: rgba(73,180,210,0.7);
   text-shadow: 0px 1px 1px #666;
   outline: none;
}

.records-table tbody td {
   padding: 2px 7px;
   border-bottom: 1px solid #ddd;
@@ -1492,12 +1566,12 @@
}

/* 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 tbody tr.focused > td:first-child {
.records-table.focus tbody tr.focused > td:first-child {
   border-left: 2px solid #b0ccd7;
   padding-left: 4px;
}

.records-table tbody tr.selected.focused > td:first-child {
.records-table.focus tbody tr.selected.focused > td:first-child {
   border-left-color: #49b3d2;
}

@@ -1908,6 +1982,14 @@
   border-radius: 0;
}

.dropbutton .dropbuttontip:focus,
.toolbar a.button:focus {
   color: #fff;
   text-shadow: 0px 1px 1px #666;
   background-color: rgba(30,150,192, 0.5);
   border-radius: 3px;
}

.toolbar a.button.disabled {
   opacity: 0.4;
   filter: alpha(opacity=40);
@@ -1923,12 +2005,16 @@
   position: absolute;
   right: 0;
   top: 0;
   height: 42px;
   height: 41px;
   width: 18px;
   overflow: hidden;
   text-indent: -5000px;
   background: url(images/buttons.png) 0 -1255px no-repeat;
   cursor: pointer;
   outline: none;
}

.dropbutton .dropbuttontip:focus,
.dropbutton .dropbuttontip:hover {
   background-position: -26px -1255px;
}
@@ -2119,6 +2205,19 @@
}


a.menuselector:focus,
a.menuselector.focus,
a.iconbutton:focus,
.pagenav a.button:focus {
   border-color: #4fadd5;
   -webkit-box-shadow: 0 0 4px 2px rgba(71,135,177, 0.8);
      -moz-box-shadow: 0 0 4px 2px rgba(71,135,177, 0.8);
        -o-box-shadow: 0 0 4px 2px rgba(71,135,177, 0.8);
           box-shadow: 0 0 4px 2px rgba(71,135,177, 0.8);
   outline: none;
}


/*** quota indicator ***/

#quotadisplay {
@@ -2211,6 +2310,7 @@

.googie_list td.googie_list_onhover,
ul.toolbarmenu li a.active:hover,
ul.toolbarmenu li a.active:focus,
#rcmKSearchpane ul li.selected,
select.decorated option:hover,
select.decorated option[selected='selected'] {
@@ -2220,6 +2320,7 @@
   background: -o-linear-gradient(top, #00aad6 0%, #008fc9 100%);
   background: -ms-linear-gradient(top, #00aad6 0%, #008fc9 100%);
   background: linear-gradient(top, #00aad6 0%, #008fc9 100%);
   outline: none;
}

ul.toolbarmenu.iconized li a,
@@ -2607,6 +2708,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 20px;
   outline: none;
}

.attachmentslist li a.drop {
@@ -2618,6 +2720,15 @@
   right: 0;
   top: 0;
   padding: 0;
   overflow: hidden;
   text-indent: -5000px;
   outline: none;
}

.attachmentslist li a:focus,
.attachmentslist li a.drop:focus {
   background-color: rgba(30,150,192, 0.5);
   border-radius: 2px;
}

#compose-attachments ul li {