From e8bcf08c72a18b3bf396e6448d6658227ecb46f2 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Wed, 30 Apr 2014 16:21:29 +0200 Subject: 1. Prepare core and Larry skin for improved accessibility 2. Implement full keyboard navigation in main mail view --- skins/larry/styles.css | 58 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 55 insertions(+), 3 deletions(-) (limited to 'skins/larry/styles.css') diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 660daa943..4ef57e722 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -945,6 +945,13 @@ a.iconlink.upload { background: url(images/buttons.png) -1000px 0 no-repeat; } +#taskbar a:focus { + color: #fff; + text-shadow: 0px 1px 1px #666; + background-color: #3da0c2; + outline: none; +} + #taskbar a.button-selected { color: #3cf; background-color: #2c2c2c; @@ -1240,6 +1247,13 @@ ul.treelist li a { text-overflow: ellipsis; } +ul.treelist li a:focus { + color: #fff; + background: #4db0d2; + text-shadow: 0px 1px 1px #666; + outline: none; +} + ul.treelist ul li a { padding-left: 38px; } @@ -1320,6 +1334,13 @@ ul.treelist li.selected > div.expanded { margin-top: 1px; } +.boxfooter a.listbutton:focus { + color: #fff; + background: #4db0d2; + text-shadow: 0px 1px 1px #666; + outline: none; +} + .uibox .boxfooter .listbutton:first-child { border-radius: 0 0 0 4px; } @@ -1329,7 +1350,9 @@ ul.treelist li.selected > div.expanded { 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 +1496,13 @@ table.records-table { text-overflow: ellipsis; } +.records-table thead td a:focus { + color: #fff; + background: #4db0d2; + text-shadow: 0px 1px 1px #666; + outline: none; +} + .records-table tbody td { padding: 2px 7px; border-bottom: 1px solid #ddd; @@ -1492,12 +1522,12 @@ 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 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 +1938,13 @@ ul.proplist li { border-radius: 0; } +.toolbar a.button:focus { + color: #fff; + text-shadow: 0px 1px 1px #666; + background-color: #4db0d2; + border-radius: 4px; +} + .toolbar a.button.disabled { opacity: 0.4; filter: alpha(opacity=40); @@ -2119,6 +2156,19 @@ select.decorated option { } +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 +2261,7 @@ ul.toolbarmenu li a.active { .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 +2271,7 @@ select.decorated option[selected='selected'] { 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, -- cgit v1.2.3 From a539cebdaac8141189f51cb9de87525bb2c8571a Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Thu, 1 May 2014 16:13:58 +0200 Subject: Improve mail view document structure with headings, roles, labels and aria-attributes --- program/js/app.js | 3 +- skins/larry/includes/header.html | 20 +++--- skins/larry/includes/mailtoolbar.html | 20 +++--- skins/larry/mail.css | 10 +++ skins/larry/styles.css | 35 +++++++--- skins/larry/templates/mail.html | 111 +++++++++++++++++------------- skins/larry/templates/message.html | 13 ++-- skins/larry/templates/messagepreview.html | 43 ++++++------ skins/larry/ui.js | 2 + 9 files changed, 156 insertions(+), 101 deletions(-) (limited to 'skins/larry/styles.css') diff --git a/program/js/app.js b/program/js/app.js index b2c9209a7..f0aadd970 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -6359,7 +6359,8 @@ function rcube_webmail() this.messages[key].labels = [{'id': id, 'msg': msg}]; } else { - obj.click(function() { return ref.hide_message(obj); }); + obj.click(function() { return ref.hide_message(obj); }) + .attr('role', 'alert'); } this.triggerEvent('message', { message:msg, type:type, timeout:timeout, object:obj }); diff --git a/skins/larry/includes/header.html b/skins/larry/includes/header.html index 8ce784b02..4692913fa 100644 --- a/skins/larry/includes/header.html +++ b/skins/larry/includes/header.html @@ -1,5 +1,6 @@ -