summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorThomas Bruederli <thomas@roundcube.net>2014-05-01 16:13:58 +0200
committerThomas Bruederli <thomas@roundcube.net>2014-05-01 16:13:58 +0200
commita539cebdaac8141189f51cb9de87525bb2c8571a (patch)
tree7917b23a4eb2590e1759075545375b1f6f0e8b0c
parenteb95518ef9b1bf9160f0e95d45811a4ef8c0e1fb (diff)
Improve mail view document structure with headings, roles, labels and aria-attributes
-rw-r--r--program/js/app.js3
-rw-r--r--skins/larry/includes/header.html20
-rw-r--r--skins/larry/includes/mailtoolbar.html20
-rw-r--r--skins/larry/mail.css10
-rw-r--r--skins/larry/styles.css35
-rw-r--r--skins/larry/templates/mail.html111
-rw-r--r--skins/larry/templates/message.html13
-rw-r--r--skins/larry/templates/messagepreview.html43
-rw-r--r--skins/larry/ui.js2
9 files changed, 156 insertions, 101 deletions
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 @@
-<div id="header" role="banner">
-<div id="topline">
+<div id="header">
+<div id="topline" role="banner" aria-labelledby="aria-label-topnav">
+ <h2 id="aria-label-topnav" class="voice">Window Control</h2>
<div class="topleft">
<roundcube:container name="topline-left" id="topline-left" />
<roundcube:button name="about" type="link" label="about" class="about-link" onclick="UI.show_about(this);return false" condition="!env:extwin" />
@@ -21,13 +22,14 @@
<roundcube:if condition="!env:extwin &amp;&amp; !env:framed" />
<div id="topnav">
- <div id="taskbar" class="topright" role="navigation" aria-label="Application Tasks">
- <roundcube:button command="mail" label="mail" class="button-mail" classSel="button-mail button-selected" innerClass="button-inner" />
- <roundcube:button command="addressbook" label="addressbook" class="button-addressbook" classSel="button-addressbook button-selected" innerClass="button-inner" />
- <roundcube:container name="taskbar" id="taskbar" />
- <roundcube:button command="settings" label="settings" class="button-settings" classSel="button-settings button-selected" innerClass="button-inner" />
- <roundcube:button command="logout" label="logout" class="button-logout" classSel="button-logout" innerClass="button-inner" />
- <span class="minmodetoggle"></span>
+ <h2 id="aria-label-tasknav" class="voice">Application Tasks</h2>
+ <div id="taskbar" class="topright" role="navigation" aria-labelledby="aria-label-tasknav">
+ <roundcube:button command="mail" label="mail" class="button-mail" classSel="button-mail button-selected" innerClass="button-inner" />
+ <roundcube:button command="addressbook" label="addressbook" class="button-addressbook" classSel="button-addressbook button-selected" innerClass="button-inner" />
+ <roundcube:container name="taskbar" id="taskbar" />
+ <roundcube:button command="settings" label="settings" class="button-settings" classSel="button-settings button-selected" innerClass="button-inner" />
+ <roundcube:button command="logout" label="logout" class="button-logout" classSel="button-logout" innerClass="button-inner" />
+ <span class="minmodetoggle"></span>
</div>
<roundcube:object name="logo" src="/images/roundcube_logo.png" id="toplogo" alt="Logo" onclick="if(window.rcmail)rcmail.command('switch-task','mail')" />
</div>
diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html
index 5efea7cf7..d73fa7dba 100644
--- a/skins/larry/includes/mailtoolbar.html
+++ b/skins/larry/includes/mailtoolbar.html
@@ -3,11 +3,11 @@
<roundcube:button command="reply" type="link" class="button reply disabled" classAct="button reply" classSel="button reply pressed" label="reply" title="replytomessage" />
<span class="dropbutton">
<roundcube:button command="reply-all" type="link" class="button reply-all disabled" classAct="button reply-all" classSel="button reply-all pressed" label="replyall" title="replytoallmessage" />
- <span class="dropbuttontip" id="replyallmenulink" onclick="UI.toggle_popup('replyallmenu',event);return false"></span>
+ <a href="#reply-all" class="dropbuttontip" id="replyallmenulink" onclick="UI.toggle_popup('replyallmenu',event);return false" aria-haspopup="true" aria-owns="replyallmenu-menu" tabindex="0">Reply-all options</a>
</span>
<span class="dropbutton">
<roundcube:button command="forward" type="link" class="button forward disabled" classAct="button forward" classSel="button forward pressed" label="forward" title="forwardmessage" />
- <span class="dropbuttontip" id="forwardmenulink" onclick="UI.toggle_popup('forwardmenu',event);return false"></span>
+ <a href="#reply-all" class="dropbuttontip" id="forwardmenulink" onclick="UI.toggle_popup('forwardmenu',event);return false" aria-haspopup="true" aria-owns="forwardmenu-menu" tabindex="0">Forwarding options</a>
</span>
<roundcube:button command="delete" type="link" class="button delete disabled" classAct="button delete" classSel="button delete pressed" label="delete" title="deletemessage" />
<roundcube:if condition="template:name == 'message'" />
@@ -15,11 +15,12 @@
<roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" title="printmessage" />
<roundcube:endif />
<roundcube:container name="toolbar" id="mailtoolbar" />
-<roundcube:button name="markmenulink" id="markmessagemenulink" type="link" class="button markmessage" label="mark" title="markmessages" onclick="UI.toggle_popup('markmessagemenu',event);return false" aria-haspopup="true" aria-owns="markmessagemenu" />
-<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button more" label="more" title="moreactions" onclick="UI.toggle_popup('messagemenu',event);return false" aria-haspopup="true" aria-owns="messagemenu" />
+<roundcube:button name="markmenulink" id="markmessagemenulink" type="link" class="button markmessage" label="mark" title="markmessages" onclick="UI.toggle_popup('markmessagemenu',event);return false" aria-haspopup="true" aria-owns="markmessagemenu-menu" />
+<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button more" label="more" title="moreactions" onclick="UI.toggle_popup('messagemenu',event);return false" aria-haspopup="true" aria-owns="messagemenu-menu" />
<div id="forwardmenu" class="popupmenu">
- <ul class="toolbarmenu" role="menu">
+ <h3 id="aria-label-forwardmenu" class="voice">Forwarding options</h3>
+ <ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-forwardmenu">
<li role="menuitem"><roundcube:button command="forward-inline" label="forwardinline" prop="sub" classAct="forwardlink active" class="forwardlink" /></li>
<li role="menuitem"><roundcube:button command="forward-attachment" label="forwardattachment" prop="sub" classAct="forwardattachmentlink active" class="forwardattachmentlink" /></li>
<roundcube:container name="forwardmenu" id="forwardmenu" />
@@ -27,7 +28,8 @@
</div>
<div id="replyallmenu" class="popupmenu">
- <ul class="toolbarmenu" role="menu">
+ <h3 id="aria-label-replyallmenu" class="voice">Reply-all options</h3>
+ <ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-replyallmenu">
<li role="menuitem"><roundcube:button command="reply-all" label="replyall" prop="sub" class="replyalllink" classAct="replyalllink active" /></li>
<li role="menuitem"><roundcube:button command="reply-list" label="replylist" prop="sub" class="replylistlink" classAct="replylistlink active" /></li>
<roundcube:container name="replyallmenu" id="replyallmenu" />
@@ -35,7 +37,8 @@
</div>
<div id="messagemenu" class="popupmenu">
- <ul class="toolbarmenu iconized" role="menu">
+ <h3 id="aria-label-messagemenu" class="voice">More message toolbar actions</h3>
+ <ul id="messagemenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-messagemenu">
<li role="menuitem"><roundcube:button command="print" label="printmessage" class="icon" classAct="icon active" innerclass="icon print" /></li>
<li role="menuitem"><roundcube:button command="download" label="emlsave" class="icon" classAct="icon active" innerclass="icon download" /></li>
<li role="menuitem"><roundcube:button command="edit" prop="new" label="editasnew" class="icon" classAct="icon active" innerclass="icon edit" /></li>
@@ -48,7 +51,8 @@
</div>
<div id="markmessagemenu" class="popupmenu">
- <ul class="toolbarmenu iconized" role="menu">
+ <h3 id="aria-label-markmessagemenu" class="voice">Mark selected messages as...</h3>
+ <ul id="markmessagemenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-markmessagemenu">
<li role="menuitem"><roundcube:button command="mark" prop="read" label="markread" classAct="icon active" class="icon" innerclass="icon read" /></li>
<li role="menuitem"><roundcube:button command="mark" prop="unread" label="markunread" classAct="icon active" class="icon" innerclass="icon unread" /></li>
<li role="menuitem"><roundcube:button command="mark" prop="flagged" label="markflagged" classAct="icon active" class="icon" innerclass="icon flagged" /></li>
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index a3f7e7ba8..c0bd3db5b 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -924,6 +924,16 @@ h3.subject {
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;
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 4ef57e722..6c59b88d5 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -35,6 +35,10 @@ img {
border: 0;
}
+.voice {
+ display: none;
+}
+
input[type="text"],
input[type="password"],
textarea {
@@ -312,6 +316,16 @@ input.button:active {
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 {
padding: 1px 3px;
height: 16px;
@@ -948,7 +962,7 @@ a.iconlink.upload {
#taskbar a:focus {
color: #fff;
text-shadow: 0px 1px 1px #666;
- background-color: #3da0c2;
+ background-color: rgba(73,180,210,0.7);
outline: none;
}
@@ -1248,8 +1262,8 @@ ul.treelist li a {
}
ul.treelist li a:focus {
- color: #fff;
- background: #4db0d2;
+ color: #fff !important;
+ background-color: rgba(73,180,210,0.6);
text-shadow: 0px 1px 1px #666;
outline: none;
}
@@ -1336,7 +1350,7 @@ ul.treelist li.selected > div.expanded {
.boxfooter a.listbutton:focus {
color: #fff;
- background: #4db0d2;
+ background-color: rgba(73,180,210,0.6);
text-shadow: 0px 1px 1px #666;
outline: none;
}
@@ -1498,7 +1512,7 @@ table.records-table {
.records-table thead td a:focus {
color: #fff;
- background: #4db0d2;
+ background-color: rgba(73,180,210,0.7);
text-shadow: 0px 1px 1px #666;
outline: none;
}
@@ -1938,11 +1952,12 @@ ul.proplist li {
border-radius: 0;
}
+.dropbutton .dropbuttontip:focus,
.toolbar a.button:focus {
color: #fff;
text-shadow: 0px 1px 1px #666;
- background-color: #4db0d2;
- border-radius: 4px;
+ background-color: rgba(30,150,192, 0.5);
+ border-radius: 3px;
}
.toolbar a.button.disabled {
@@ -1960,12 +1975,16 @@ ul.proplist li {
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;
}
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index d92324fe8..07020f62b 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -17,8 +17,11 @@
<div id="mainscreen">
+<h1 class="voice"><roundcube:label name="mail" /></h1>
+
<!-- toolbar -->
-<div id="messagetoolbar" class="toolbar" role="toolbar">
+<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
+<div id="messagetoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar">
<roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="refresh" title="checkmail" />
<roundcube:include file="/includes/mailtoolbar.html" />
</div>
@@ -27,14 +30,35 @@
<!-- search filter -->
<div id="searchfilter">
- <roundcube:object name="searchfilter" class="searchfilter decorated" aria-controls="messagelist" />
+ <label for="messagessearchfilter" class="voice">Email listing filter</label>
+ <roundcube:object name="searchfilter" class="searchfilter decorated" id="messagessearchfilter" aria-controls="messagelist" />
</div>
<!-- search box -->
-<div id="quicksearchbar" class="searchbox" role="search" aria-label="Email message search form">
+<div id="quicksearchbar" class="searchbox" role="search" aria-labelledby="aria-label-searchform">
+<h2 id="aria-label-searchform" class="voice">Email message search form</h2>
+<label for="quicksearchbox" class="voice">Email search input</label>
<roundcube:object name="searchform" id="quicksearchbox" />
-<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.toggle_popup('searchmenu',event);return false" title="searchmod" content=" " />
-<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
+<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.toggle_popup('searchmenu',event);return false" title="searchmod" label="options" aria-haspopup="true" aria-owns="searchmenu-menu" />
+<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content="Reset" />
+
+<div id="searchmenu" class="popupmenu">
+ <h3 id="aria-label-searchmenu" class="voice"><roundcube:label name="searchmod" /></h3>
+ <ul class="toolbarmenu" id="searchmenu-menu" role="menu" aria-labelledby="aria-label-searchmenu">
+ <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="subject" /></span></label></li>
+ <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="from" /></span></label></li>
+ <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="to" /></span></label></li>
+ <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="cc" /></span></label></li>
+ <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="bcc" /></span></label></li>
+ <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="body" id="s_mod_body" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="body" /></span></label></li>
+ <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="msgtext" /></span></label></li>
+ <li role="separator" class="separator"><label><roundcube:label name="searchscope" /></label></li>
+ <li role="menuitem"><label><input type="radio" name="s_scope" value="base" id="s_scope_base" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="currentfolder" /></span></label></li>
+ <li role="menuitem"><label><input type="radio" name="s_scope" value="sub" id="s_scope_sub" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="subfolders" /></span></label></li>
+ <li role="menuitem"><label><input type="radio" name="s_scope" value="all" id="s_scope_all" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="allfolders" /></span></label></li>
+ </ul>
+</div>
+
</div>
</div>
@@ -43,12 +67,13 @@
<div id="mailview-left">
<!-- folders list -->
-<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-label="Email folder selection">
+<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
+<h2 id="aria-label-folderlist" class="voice">Email folder selection</h2>
<div id="folderlist-content" class="scroller withfooter">
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
</div>
<div id="folderlist-footer" class="boxfooter">
- <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.toggle_popup('mailboxmenu',event);return false" innerClass="inner" content="&#9881;" />
+ <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.toggle_popup('mailboxmenu',event);return false" innerClass="inner" content="&#9881;" aria-haspopup="true" aria-owns="mailboxmenu-menu" />
<roundcube:if condition="env:quota" />
<roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" />
<roundcube:endif />
@@ -67,10 +92,13 @@
<!-- messagelist -->
<div id="messagelistcontainer" class="boxlistcontent">
+<h2 id="aria-label-messagelist" class="voice">Messages list</h2>
<roundcube:object name="messages"
id="messagelist"
class="records-table messagelist sortheader fixedheader"
- optionsmenuIcon="true" />
+ optionsmenuIcon="true"
+ role="grid"
+ aria-labelledby="aria-label-messagelist" />
</div>
<!-- list footer -->
@@ -81,9 +109,9 @@
</div>
<div id="listselectors">
- <a href="#select" id="listselectmenulink" class="menuselector" onclick="UI.toggle_popup('listselectmenu', event);return false" aria-haspopup="true" aria-owns="listselectmenu"><span class="handle"><roundcube:label name="select" /></span></a>
+ <a href="#select" id="listselectmenulink" class="menuselector" onclick="UI.toggle_popup('listselectmenu', event);return false" aria-haspopup="true" aria-owns="listselectmenu-menu"><span class="handle"><roundcube:label name="select" /></span></a>
<roundcube:if condition="env:threads" />
- &nbsp; <a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.toggle_popup('threadselectmenu', event);return false" aria-haspopup="true" aria-owns="threadselectmenu"><span class="handle"><roundcube:label name="threads" /></span></a>
+ &nbsp; <a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.toggle_popup('threadselectmenu', event);return false" aria-haspopup="true" aria-owns="threadselectmenu-menu"><span class="handle"><roundcube:label name="threads" /></span></a>
<roundcube:endif />
</div>
@@ -106,7 +134,8 @@
<div id="mailview-bottom" class="uibox">
-<div id="mailpreviewframe" class="iframebox">
+<div id="mailpreviewframe" class="iframebox" role="complementary" aria-labelledby="aria-label-mailpreviewframe">
+<h2 id="aria-label-mailpreviewframe" class="voice">Message preview</h2>
<roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
</div>
@@ -118,59 +147,47 @@
</div><!-- end mainscreen -->
-<div id="searchmenu" class="popupmenu">
- <ul class="toolbarmenu">
- <li><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="subject" /></span></label></li>
- <li><label><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="from" /></span></label></li>
- <li><label><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="to" /></span></label></li>
- <li><label><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="cc" /></span></label></li>
- <li><label><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="bcc" /></span></label></li>
- <li><label><input type="checkbox" name="s_mods[]" value="body" id="s_mod_body" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="body" /></span></label></li>
- <li><label><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="msgtext" /></span></label></li>
- <li class="separator"><label><roundcube:label name="searchscope" /></label></li>
- <li><label><input type="radio" name="s_scope" value="base" id="s_scope_base" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="currentfolder" /></span></label></li>
- <li><label><input type="radio" name="s_scope" value="sub" id="s_scope_sub" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="subfolders" /></span></label></li>
- <li><label><input type="radio" name="s_scope" value="all" id="s_scope_all" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="allfolders" /></span></label></li>
- </ul>
-</div>
-
<div id="dragmessagemenu" class="popupmenu">
- <ul class="toolbarmenu">
- <li><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li>
- <li><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
+ <ul class="toolbarmenu" role="menu">
+ <li role="menuitem"><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li>
+ <li role="menuitem"><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
</ul>
</div>
<div id="mailboxmenu" class="popupmenu">
- <ul class="toolbarmenu" id="mailboxoptionsmenu">
- <li><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li>
- <li><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li>
- <li><roundcube:button command="import-messages" name="messageimport" type="link" classAct="active" label="importmessages" onclick="if(rcmail.command_enabled('import-messages'))UI.show_uploadform();return false" /></li>
- <li><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
+ <h3 id="aria-label-mailboxmenu" class="voice">Folder actions menu</h3>
+ <ul id="mailboxmenu-menu" class="toolbarmenu" id="mailboxoptionsmenu" role="menu" aria-labelledby="aria-label-mailboxmenu">
+ <li role="menuitem"><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li>
+ <li role="menuitem"><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li>
+ <li role="menuitem"><roundcube:button command="import-messages" name="messageimport" type="link" classAct="active" label="importmessages" onclick="if(rcmail.command_enabled('import-messages'))UI.show_uploadform();return false" /></li>
+ <li role="menuitem"><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
<roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" />
</ul>
</div>
<div id="listselectmenu" class="popupmenu dropdown">
- <ul class="toolbarmenu iconized">
- <li><roundcube:button command="select-all" type="link" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li>
- <li><roundcube:button command="select-all" type="link" prop="page" label="currpage" class="icon" classAct="icon active" innerclass="icon list" /></li>
- <li><roundcube:button command="select-all" type="link" prop="unread" label="unread" class="icon" classAct="icon active" innerclass="icon unread" /></li>
- <li><roundcube:button command="select-all" type="link" prop="flagged" label="flagged" class="icon" classAct="icon active" innerclass="icon flagged" /></li>
- <li><roundcube:button command="select-all" type="link" prop="invert" label="invert" class="icon" classAct="icon active" innerclass="icon invert" /></li>
- <li><roundcube:button command="select-none" type="link" label="none" class="icon" classAct="icon active" innerclass="icon cross" /></li>
+ <h3 id="aria-label-listselectmenu" class="voice">List selection menu</h3>
+ <ul id="listselectmenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-listselectmenu">
+ <li role="menuitem"><roundcube:button command="select-all" type="link" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li>
+ <li role="menuitem"><roundcube:button command="select-all" type="link" prop="page" label="currpage" class="icon" classAct="icon active" innerclass="icon list" /></li>
+ <li role="menuitem"><roundcube:button command="select-all" type="link" prop="unread" label="unread" class="icon" classAct="icon active" innerclass="icon unread" /></li>
+ <li role="menuitem"><roundcube:button command="select-all" type="link" prop="flagged" label="flagged" class="icon" classAct="icon active" innerclass="icon flagged" /></li>
+ <li role="menuitem"><roundcube:button command="select-all" type="link" prop="invert" label="invert" class="icon" classAct="icon active" innerclass="icon invert" /></li>
+ <li role="menuitem"><roundcube:button command="select-none" type="link" label="none" class="icon" classAct="icon active" innerclass="icon cross" /></li>
</ul>
</div>
<div id="threadselectmenu" class="popupmenu dropdown">
- <ul class="toolbarmenu">
- <li><roundcube:button command="expand-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
- <li><roundcube:button command="expand-unread" type="link" label="expand-unread" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
- <li><roundcube:button command="collapse-all" type="link" label="collapse-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
+ <h3 id="aria-label-threadselectmenu" class="voice">Threads listing menu</h3>
+ <ul id="threadselectmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-threadselectmenu">
+ <li role="menuitem"><roundcube:button command="expand-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
+ <li role="menuitem"><roundcube:button command="expand-unread" type="link" label="expand-unread" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
+ <li role="menuitem"><roundcube:button command="collapse-all" type="link" label="collapse-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
</ul>
</div>
-<div id="listoptions" class="propform popupdialog">
+<div id="listoptions" class="propform popupdialog" role="dialog" aria-labelledby="aria-label-listoptions">
+<h2 id="aria-label-listoptions" class="voice">Message list display and sorting options</h2>
<roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" />
<fieldset class="floating">
<legend><roundcube:label name="listcolumns" /></legend>
diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html
index a661f5720..37ee71fe8 100644
--- a/skins/larry/templates/message.html
+++ b/skins/larry/templates/message.html
@@ -43,12 +43,6 @@
<div id="messageheader">
<span class="moreheaderstoggle"></span>
-<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
-<div class="message-headers">
-<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" />
-</div>
-<roundcube:object name="messageFullHeaders" id="full-headers" />
-
<!-- record navigation -->
<div id="countcontrols" class="pagenav">
<roundcube:object name="messageCountDisplay" class="countdisplay" />
@@ -70,11 +64,16 @@
</div>
<roundcube:endif />
+<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
+<div class="message-headers">
+<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" />
+</div>
+<roundcube:object name="messageFullHeaders" id="full-headers" />
<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
</div>
-<div id="messagecontent">
+<div id="messagecontent" role="main">
<div class="rightcol">
<roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
</div>
diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html
index 4a6d76ead..e2be09937 100644
--- a/skins/larry/templates/messagepreview.html
+++ b/skins/larry/templates/messagepreview.html
@@ -7,26 +7,6 @@
<body class="iframe fullheight">
<div id="messageheader" class="previewheader">
-<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
-
-<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
-<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
-
-<table class="headers-table" id="preview-shortheaders"><tbody><tr>
-<roundcube:if condition="env:mailbox == config:drafts_mbox || env:mailbox == config:sent_mbox">
- <td class="header-title"><roundcube:label name="to" /></td>
- <td class="header from"><roundcube:object name="messageHeaders" valueOf="to" max="3" addicon="/images/addcontact.png" /></td>
-<roundcube:else />
- <td class="header-title"><roundcube:label name="from" /></td>
- <td class="header from"><roundcube:object name="messageHeaders" valueOf="from" addicon="/images/addcontact.png" /></td>
-<roundcube:endif />
- <td class="header-title"><roundcube:label name="date" /></td>
- <td class="header date"><span><roundcube:object name="messageHeaders" valueOf="date" /></span></td>
-</tr></tbody></table>
-
-<roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" max="10" exclude="subject,replyto" />
-
-<roundcube:object name="messageFullHeaders" id="full-headers" />
<!-- record navigation -->
<div id="countcontrols">
@@ -50,9 +30,30 @@
<roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" />
</div>
+<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
+
+<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
+<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
+
+<table class="headers-table" id="preview-shortheaders"><tbody><tr>
+<roundcube:if condition="env:mailbox == config:drafts_mbox || env:mailbox == config:sent_mbox">
+ <td class="header-title"><roundcube:label name="to" /></td>
+ <td class="header from"><roundcube:object name="messageHeaders" valueOf="to" max="3" addicon="/images/addcontact.png" /></td>
+<roundcube:else />
+ <td class="header-title"><roundcube:label name="from" /></td>
+ <td class="header from"><roundcube:object name="messageHeaders" valueOf="from" addicon="/images/addcontact.png" /></td>
+<roundcube:endif />
+ <td class="header-title"><roundcube:label name="date" /></td>
+ <td class="header date"><span><roundcube:object name="messageHeaders" valueOf="date" /></span></td>
+</tr></tbody></table>
+
+<roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" max="10" exclude="subject,replyto" />
+
+<roundcube:object name="messageFullHeaders" id="full-headers" />
+
</div>
-<div id="messagepreview">
+<div id="messagepreview" role="main">
<div class="rightcol">
<roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
</div>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index add02b85e..9006b35d2 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -475,6 +475,8 @@ function rcube_mail_ui()
minHeight: 90
}).show();
+ me.messagedialog.closest('div[role=dialog]').attr('role', 'alertdialog');
+
me.message_timer = window.setTimeout(dialog_close, p.timeout);
}
}