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

Thomas Bruederli

2014-05-07 ea0866a1adc9239b8b115ab2490e1dd88f3c64ec

 skins/larry/styles.css

@@ -1190,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,
@@ -2678,6 +2708,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 20px;
   outline: none;
}

.attachmentslist li a.drop {
@@ -2689,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 {