diff options
Diffstat (limited to 'skins/larry')
| -rw-r--r-- | skins/larry/includes/mailtoolbar.html | 8 | ||||
| -rw-r--r-- | skins/larry/mail.css | 16 | ||||
| -rw-r--r-- | skins/larry/styles.css | 10 | ||||
| -rw-r--r-- | skins/larry/templates/compose.html | 50 | ||||
| -rw-r--r-- | skins/larry/templates/login.html | 4 | ||||
| -rw-r--r-- | skins/larry/templates/mail.html | 22 | ||||
| -rw-r--r-- | skins/larry/templates/message.html | 33 | ||||
| -rw-r--r-- | skins/larry/templates/messageerror.html | 14 | ||||
| -rw-r--r-- | skins/larry/templates/messagepart.html | 14 | ||||
| -rw-r--r-- | skins/larry/templates/messagepreview.html | 11 | ||||
| -rw-r--r-- | skins/larry/ui.js | 66 |
11 files changed, 154 insertions, 94 deletions
diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html index d73fa7dba..ac93d47cb 100644 --- a/skins/larry/includes/mailtoolbar.html +++ b/skins/larry/includes/mailtoolbar.html @@ -18,7 +18,7 @@ <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"> +<div id="forwardmenu" class="popupmenu" aria-hidden="true"> <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> @@ -27,7 +27,7 @@ </ul> </div> -<div id="replyallmenu" class="popupmenu"> +<div id="replyallmenu" class="popupmenu" aria-hidden="true"> <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> @@ -36,7 +36,7 @@ </ul> </div> -<div id="messagemenu" class="popupmenu"> +<div id="messagemenu" class="popupmenu" aria-hidden="true"> <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> @@ -50,7 +50,7 @@ </ul> </div> -<div id="markmessagemenu" class="popupmenu"> +<div id="markmessagemenu" class="popupmenu" aria-hidden="true"> <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> diff --git a/skins/larry/mail.css b/skins/larry/mail.css index c0bd3db5b..ff590c45d 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -599,7 +599,7 @@ table.messagelist.fixedcopy { .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, @@ -734,10 +734,20 @@ table.messagelist.fixedcopy { 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, diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 6c59b88d5..cbff87bec 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -2678,6 +2678,7 @@ ul.toolbarmenu li span.copy { overflow: hidden; text-overflow: ellipsis; line-height: 20px; + outline: none; } .attachmentslist li a.drop { @@ -2689,6 +2690,15 @@ ul.toolbarmenu li span.copy { 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 { diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html index d0338292b..07d935795 100644 --- a/skins/larry/templates/compose.html +++ b/skins/larry/templates/compose.html @@ -13,9 +13,11 @@ <div id="mainscreen"> +<h1 class="voice"><roundcube:object name="pagetitle" /></h1> + <!-- toolbar --> -<div id="messagetoolbar" class="fullwidth"> -<div id="mailtoolbar" class="toolbar"> +<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2> +<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar"> <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="cancel" condition="!env:extwin" /> <roundcube:button command="close" type="link" class="button close disabled" classAct="button close" classSel="button close pressed" label="cancel" condition="env:extwin" /> <span class="spacer"></span> @@ -25,25 +27,26 @@ <roundcube:if condition="config:enable_spellcheck" /> <span class="dropbutton"> <roundcube:button command="spellcheck" type="link" class="button spellcheck disabled" classAct="button spellcheck" classSel="button spellcheck pressed" label="spellcheck" title="checkspelling" /> - <span class="dropbuttontip" id="spellmenulink" onclick="UI.show_popup('spellmenu');return false"></span> + <a href="#languages" class="dropbuttontip" id="spellmenulink" onclick="UI.toggle_popup('spellmenu',event);return false" aria-haspopup="true"></a> </span> <roundcube:endif /> <roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attach pressed" label="attach" title="addattachment" onclick="UI.show_uploadform();return false" /> <roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" classSel="button insertsig pressed" label="signature" title="insertsignature" /> - <a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="UI.show_popup('responsesmenu');return false"><roundcube:label name="responses" /></a> + <a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="UI.toggle_popup('responsesmenu',event);return false" aria-haspopup="true" aria-owns="textresponsesmenu"><roundcube:label name="responses" /></a> <roundcube:container name="toolbar" id="compose-toolbar" /> </div> -</div> <div id="mainscreencontent"> <div id="composeview-left"> <!-- inline address book --> -<div id="compose-contacts" class="uibox listbox"> -<h2 class="boxtitle"><roundcube:label name="contacts" /></h2> - <div id="composequicksearch"> +<div id="compose-contacts" class="uibox listbox" role="region" aria-labelledby="aria-label-composecontacts"> +<h2 id="aria-label-composecontacts" class="boxtitle"><roundcube:label name="contacts" /></h2> + <div id="composequicksearch" role="search" aria-labelledby="aria-label-composequicksearch"> + <h3 id="aria-label-composequicksearch" class="voice">Contacts search form</h3> <div class="searchbox"> + <label for="contactsearchbox" class="voice">Contact search input</label> <roundcube:object name="searchform" id="contactsearchbox" /> <a id="searchmenulink" class="iconbutton searchoptions"> </a> <roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " /> @@ -66,12 +69,14 @@ </div> -<div id="composeview-right"> +<div id="composeview-right" role="main"> <roundcube:form name="form" method="post" id="compose-content" class="uibox"> <!-- message headers --> -<div id="composeheaders"> +<div id="composeheaders" role="region" aria-labelledby="aria-label-composeheaders"> +<h2 id="aria-label-composeheaders" class="voice">Message headers</h2> + <a href="#options" id="composeoptionstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='options' />"></span></a> <table class="headers-table compose-headers"> @@ -80,7 +85,7 @@ <td class="title"><label for="_from"><roundcube:label name="from" /></label></td> <td class="editfield"> <roundcube:object name="composeHeaders" part="from" form="form" id="_from" tabindex="1" /> - <a href="#identities" onclick="return rcmail.command('identities')" class="iconlink edit"><roundcube:label name="editidents" /></a> + <a href="#identities" onclick="return rcmail.command('identities')" class="iconlink edit" tabindex="0"><roundcube:label name="editidents" /></a> </td> </tr><tr> <td class="title top"><label for="_to"><roundcube:label name="to" /></label></td> @@ -129,7 +134,8 @@ </div> <!-- (collapsable) message options --> -<div id="composeoptions"> +<div id="composeoptions" role="region" aria-labelledby="aria-label-composeoptions"> + <h2 id="aria-label-composeoptions" class="voice">Composition options</h2> <roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" /> <span class="composeoption"> <label><roundcube:label name="editortype" /> @@ -163,7 +169,8 @@ <div id="composebodycontainer"> <roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="9" /> </div> - <div id="compose-attachments" class="rightcol"> + <div id="compose-attachments" class="rightcol" role="region"> + <h2 id="aria-label-composeoptions" class="voice"><roundcube:label name="attachments" /></h2> <div style="text-align:center; margin-bottom:20px"> <roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform();return false" /> </div> @@ -187,7 +194,8 @@ </div><!-- end mainscreen --> -<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />"> +<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />" aria-hidden="true"> + <h2 id="aria-label-uploaddialog" class="voice">Attachment upload form</h2> <roundcube:object name="composeAttachmentForm" id="uploadform" buttons="no" /> <div class="formbuttons"> <roundcube:button command="send-attachment" type="input" class="button mainaction" label="upload" /> @@ -195,15 +203,15 @@ </div> </div> -<div id="spellmenu" class="popupmenu"></div> +<div id="spellmenu" class="popupmenu" aria-hidden="true"></div> -<div id="responsesmenu" class="popupmenu"> - <ul class="toolbarmenu" id="textresponsesmenu"> - <li class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li> +<div id="responsesmenu" class="popupmenu" aria-hidden="true"> + <ul class="toolbarmenu" id="textresponsesmenu" role="menu"> + <li role="separator" class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li> <roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" /> - <li class="separator"><label><roundcube:label name="manageresponses" /></label></li> - <li><roundcube:button command="save-response" type="link" label="savenewresponse" classAct="active" unselectable="on" /></li> - <li><roundcube:button command="responses" type="link" label="editresponses" classAct="active" /></li> + <li role="separator" class="separator"><label><roundcube:label name="manageresponses" /></label></li> + <li role="menuitem"><roundcube:button command="save-response" type="link" label="savenewresponse" classAct="active" unselectable="on" /></li> + <li role="menuitem"><roundcube:button command="responses" type="link" label="editresponses" classAct="active" /></li> </ul> </div> diff --git a/skins/larry/templates/login.html b/skins/larry/templates/login.html index b14d1965e..557b029ee 100644 --- a/skins/larry/templates/login.html +++ b/skins/larry/templates/login.html @@ -7,6 +7,8 @@ </head> <body> +<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1> + <div id="login-form"> <div class="box-inner" role="main"> <roundcube:object name="logo" src="/images/roundcube_logo.png" id="logo" /> @@ -25,7 +27,7 @@ </div> <div id="bottomline" role="contentinfo"> - <roundcube:var name="config:product_name"> <roundcube:object name="version" condition="config:display_version" /> + <roundcube:object name="productname" /> <roundcube:object name="version" condition="config:display_version" /> <roundcube:if condition="config:support_url" /> ● <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a> <roundcube:endif /> diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index 07020f62b..b41e4b9ae 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -92,12 +92,13 @@ <!-- messagelist --> <div id="messagelistcontainer" class="boxlistcontent"> -<h2 id="aria-label-messagelist" class="voice">Messages list</h2> +<h2 id="aria-label-messagelist" class="voice">Email Messages Listing</h2> <roundcube:object name="messages" id="messagelist" class="records-table messagelist sortheader fixedheader" optionsmenuIcon="true" - role="grid" + summary="Email Messages Listing" + role="grid" aria-labelledby="aria-label-messagelist" /> </div> @@ -136,7 +137,7 @@ <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" /> +<roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="Message preview" /> </div> </div><!-- end mailview-bottom --> @@ -147,14 +148,14 @@ </div><!-- end mainscreen --> -<div id="dragmessagemenu" class="popupmenu"> +<div id="dragmessagemenu" class="popupmenu" aria-hidden="true"> <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"> +<div id="mailboxmenu" class="popupmenu" aria-hidden="true"> <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> @@ -165,7 +166,7 @@ </ul> </div> -<div id="listselectmenu" class="popupmenu dropdown"> +<div id="listselectmenu" class="popupmenu dropdown" aria-hidden="true"> <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> @@ -177,7 +178,7 @@ </ul> </div> -<div id="threadselectmenu" class="popupmenu dropdown"> +<div id="threadselectmenu" class="popupmenu dropdown" aria-hidden="true"> <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> @@ -186,7 +187,7 @@ </ul> </div> -<div id="listoptions" class="propform popupdialog" role="dialog" aria-labelledby="aria-label-listoptions"> +<div id="listoptions" class="propform popupdialog" role="dialog" aria-labelledby="aria-label-listoptions" aria-hidden="true"> <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"> @@ -236,11 +237,12 @@ <br style="clear:both" /> <div class="formbuttons"> <roundcube:button command="menu-save" id="listmenusave" type="input" class="button mainaction" label="save" /> - <roundcube:button command="menu-open" id="listmenucancel" type="input" class="button" label="cancel" /> + <roundcube:button command="menu-close" id="listmenucancel" type="input" class="button" label="cancel" /> </div> </div> -<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='importmessages' />"> +<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='importmessages' />" aria-hidden="true"> + <h2 id="aria-label-uploaddialog" class="voice">Message import dialog</h2> <roundcube:object name="messageimportform" id="uploadform" buttons="no" /> <div class="formbuttons"> <roundcube:button command="import-messages" type="input" class="button mainaction" label="upload" /> diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index 37ee71fe8..c7df4d8b3 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -10,8 +10,11 @@ <div id="mainscreen"> +<h1 class="voice"><roundcube:object name="messageHeaders" valueOf="subject" /></h1> + <!-- toolbar --> -<div id="messagetoolbar" class="toolbar fullwidth"> +<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2> +<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar"> <roundcube:if condition="!env:extwin" /> <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> <roundcube:endif /> @@ -25,7 +28,8 @@ <div id="mailview-left"> <!-- folders list --> -<div id="mailboxcontainer" class="uibox listbox"> +<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 class="scroller"> <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> </div> @@ -33,18 +37,19 @@ </div> -<div id="mailview-right" class="uibox"> +<div id="mailview-right" class="uibox" role="main"> <roundcube:else /> <roundcube:object name="mailboxlist" folder_filter="mail" type="js" /> -<div id="mailview-right" class="offset fullwidth uibox"> +<div id="mailview-right" class="offset fullwidth uibox" role="main"> <roundcube:endif /> <div id="messageheader"> <span class="moreheaderstoggle"></span> <!-- record navigation --> -<div id="countcontrols" class="pagenav"> +<div id="countcontrols" class="pagenav" role="navigation" aria-labelledby="aria-label-countcontrols"> + <h2 id="aria-label-countcontrols" class="voice">Message navigation</h2> <roundcube:object name="messageCountDisplay" class="countdisplay" /> <roundcube:button command="previousmessage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previousmessage" content="&lt;" /> <roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&gt;" /> @@ -64,7 +69,7 @@ </div> <roundcube:endif /> -<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2> +<h2 class="subject"><span class="voice"><roundcube:label name="subject" />: </span><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> @@ -73,11 +78,13 @@ <div id="contactphoto"><roundcube:object name="contactphoto" /></div> </div> -<div id="messagecontent" role="main"> -<div class="rightcol"> +<div id="messagecontent"> +<div class="rightcol" role="region" aria-labelledby="aria-label-messageattachments"> +<h2 id="aria-label-messageattachments" class="voice"><roundcube:label name="attachments" /></h2> <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" /> </div> -<div class="leftcol"> +<div class="leftcol" role="region" aria-labelledby="aria-label-messagebody"> +<h2 id="aria-label-messagebody" class="voice">Message Body</h2> <roundcube:object name="messageObjects" id="message-objects" /> <roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" /> </div> @@ -91,10 +98,10 @@ </div><!-- end mainscreen --> -<div id="attachmentmenu" class="popupmenu"> - <ul class="toolbarmenu"> - <li><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /></li> - <li><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="icon" classAct="icon active" innerclass="icon download" /></li> +<div id="attachmentmenu" class="popupmenu" aria-hidden="true"> + <ul class="toolbarmenu" role="menu"> + <li role="menuitem"><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /></li> + <li role="menuitem"><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="icon" classAct="icon active" innerclass="icon download" /></li> <roundcube:container name="attachmentmenu" id="attachmentmenu" /> </ul> </div> diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html index d509ce804..ffe3a873a 100644 --- a/skins/larry/templates/messageerror.html +++ b/skins/larry/templates/messageerror.html @@ -16,11 +16,12 @@ <div id="mainscreen"> +<h1 class="voice"><roundcube:label name="messageopenerror" /></h1> + <!-- toolbar --> -<div id="messagetoolbar" class="fullwidth"> - <div id="mailtoolbar" class="toolbar"> - <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> - </div> +<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2> +<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar"> + <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> </div> <div id="mainscreencontent"> @@ -28,7 +29,8 @@ <div id="mailview-left"> <!-- folders list --> -<div id="mailboxcontainer" class="uibox listbox"> +<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 class="scroller"> <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> </div> @@ -36,7 +38,7 @@ </div> -<div id="mailview-right" class="offset uibox"> +<div id="mailview-right" class="uibox"> <div id="messagecontent" class="watermark"></div> diff --git a/skins/larry/templates/messagepart.html b/skins/larry/templates/messagepart.html index 3b878c9d7..c76d8a3d5 100644 --- a/skins/larry/templates/messagepart.html +++ b/skins/larry/templates/messagepart.html @@ -10,7 +10,10 @@ <div id="mainscreen"> -<div id="messagetoolbar" class="toolbar fullwidth"> +<h1 class="voice"><roundcube:label name="attachment" />: <roundcube:var name="env:filename" /></h1> + +<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2> +<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar"> <roundcube:button command="download" type="link" class="button download disabled" classAct="button download" classSel="button download pressed" label="download" /> <roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" /> <roundcube:container name="toolbar" id="messagetoolbar" /> @@ -18,16 +21,17 @@ <div id="mainscreencontent"> -<div id="messagepartheader" class="uibox listbox"> - <h2 class="boxtitle"><roundcube:label name="properties" /></h2> +<div id="messagepartheader" class="uibox listbox" role="contentinfo" aria-labelledby="aria-label-contentinfo"> + <h2 class="boxtitle" id="aria-label-contentinfo"><roundcube:label name="properties" /></h2> <div class="scroller"> <roundcube:object name="messagePartControls" class="listing" /> </div> </div> -<div id="messagepartcontainer" class="uibox"> +<div id="messagepartcontainer" class="uibox" role="main" aria-labelledby="aria-label-messagepart"> + <h2 id="aria-label-messagepart" class="voice">Attachment preview</h2> <div class="iframebox"> - <roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" /> + <roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" title="Attachment preview" /> </div> </div> diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index e2be09937..0acc0d0ad 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -9,7 +9,8 @@ <div id="messageheader" class="previewheader"> <!-- record navigation --> -<div id="countcontrols"> +<div id="countcontrols" role="toolbar" aria-labelledby="aria-label-messagetoolbar"> +<h2 id="aria-label-messagetoolbar" class="voice">Message actions</h2> <roundcube:if condition="env:optional_format=='text'" /> <span class="buttongroup"> <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="icon" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button changeformat text pressed" innerClass="icon" title="changeformattext" content="Text" /> @@ -30,7 +31,7 @@ <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> +<h3 class="subject"><span class="voice"><roundcube:label name="subject" />: </span><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> @@ -54,10 +55,12 @@ </div> <div id="messagepreview" role="main"> -<div class="rightcol"> +<div class="rightcol" role="region" aria-labelledby="aria-label-messageattachments"> +<h2 id="aria-label-messageattachments" class="voice"><roundcube:label name="attachments" /></h2> <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" /> </div> -<div class="leftcol"> +<div class="leftcol" role="region" aria-labelledby="aria-label-messagebody"> +<h2 id="aria-label-messagebody" class="voice">Message Body</h2> <roundcube:object name="messageObjects" id="message-objects" /> <roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" /> </div> diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 8476d91c7..922bb2119 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -141,8 +141,9 @@ function rcube_mail_ui() /*** mail task ***/ if (rcmail.env.task == 'mail') { - rcmail.addEventListener('menu-open', menu_open) - .addEventListener('menu-save', menu_save) + rcmail.addEventListener('menu-open', menu_toggle) + .addEventListener('menu-close', menu_toggle) + .addEventListener('menu-save', save_listoptions) .addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) }) .addEventListener('responseaftersearch', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) }); @@ -161,8 +162,12 @@ function rcube_mail_ui() // add menu link for each attachment $('#attachment-list > li').each(function() { $(this).append($('<a class="drop" tabindex="0" aria-haspopup="true">Show options</a>') - .click(function(e) { attachmentmenu(this, e); return false; }) - .keypress(function(e){ if (rcube_event.get_keycode(e) == 13) attachmentmenu(this, e); return false; }) + .bind('click keypress', function(e) { + if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) { + attachmentmenu(this, e); + return false; + } + }) ); }); @@ -819,17 +824,12 @@ function rcube_mail_ui() /**** popup callbacks ****/ - function menu_open(p) + function menu_toggle(p) { if (p && p.props && p.props.menu == 'attachmentmenu') - show_popupmenu('attachmentmenu', true, rcube_event.is_keyboard(p.e)); + show_popupmenu('attachmentmenu', undefined, rcube_event.is_keyboard(p.originalEvent)); else - show_listoptions(); - } - - function menu_save(prop) - { - save_listoptions(); + show_listoptions(p); } function searchmenu(show) @@ -884,20 +884,24 @@ function rcube_mail_ui() function spellmenu(show) { - var link, li, + var k, link, li, lang = rcmail.spellcheck_lang(), menu = popups.spellmenu, ul = $('ul', menu); if (!ul.length) { - ul = $('<ul class="toolbarmenu selectable">'); - - for (i in rcmail.env.spell_langs) { - li = $('<li>'); - link = $('<a href="#"></a>').text(rcmail.env.spell_langs[i]) - .addClass('active').data('lang', i) - .click(function() { - rcmail.spellcheck_lang_set($(this).data('lang')); + ul = $('<ul class="toolbarmenu selectable" role="menu">'); + + for (k in rcmail.env.spell_langs) { + li = $('<li role="menuitem">'); + link = $('<a href="#'+k+'" tabindex="0"></a>').text(rcmail.env.spell_langs[k]) + .addClass('active').data('lang', k) + .bind('click keypress', function(e) { + if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) { + rcmail.spellcheck_lang_set($(this).data('lang')); + show_popupmenu('spellmenu', false, rcube_event.is_keyboard(e)) + return false; + } }); link.appendTo(li); @@ -911,9 +915,9 @@ function rcube_mail_ui() $('li', ul).each(function() { var el = $('a', this); if (el.data('lang') == lang) - el.addClass('selected'); + el.addClass('selected').attr('aria-selected', 'true'); else if (el.hasClass('selected')) - el.removeClass('selected'); + el.removeClass('selected').removeAttr('aria-selected'); }); } @@ -921,13 +925,13 @@ function rcube_mail_ui() /** * */ - function show_listoptions() + function show_listoptions(p) { var $dialog = $('#listoptions'); // close the dialog if ($dialog.is(':visible')) { - $dialog.dialog('close'); + $dialog.dialog('close', p.originalEvent); return; } @@ -946,8 +950,13 @@ function rcube_mail_ui() resizable: false, closeOnEscape: true, title: null, - close: function() { + open: function(e) { + setTimeout(function(){ $dialog.find('a, input:not(:disabled)').not('[aria-disabled=true]').first().focus(); }, 100); + }, + close: function(e) { $dialog.dialog('destroy').hide(); + if (e.originalEvent && rcube_event.is_keyboard(e.originalEvent)) + $('#listmenulink').focus(); }, minWidth: 500, width: $dialog.width()+25 @@ -958,10 +967,13 @@ function rcube_mail_ui() /** * */ - function save_listoptions() + function save_listoptions(p) { $('#listoptions').dialog('close'); + if (rcube_event.is_keyboard(p.originalEvent)) + $('#listmenulink').focus(); + var sort = $('input[name="sort_col"]:checked').val(), ord = $('input[name="sort_ord"]:checked').val(), cols = $('input[name="list_col[]"]:checked') |