Further accessibility improvements regarding keyboard navigation and document structure

pull/195/head
Thomas Bruederli 11 years ago
parent 184ed2efe2
commit b2992dd228

@ -96,7 +96,10 @@ class zipdownload extends rcube_plugin
$rcmail = rcmail::get_instance(); $rcmail = rcmail::get_instance();
$menu = array(); $menu = array();
$ul_attr = $rcmail->config->get('skin') == 'classic' ? null : array('class' => 'toolbarmenu'); $ul_attr = array('role' => 'menu', 'aria-labelledby' => 'aria-label-zipdownloadmenu');
if ($rcmail->config->get('skin') != 'classic') {
$ul_attr['class'] = 'toolbarmenu';
}
foreach (array('eml', 'mbox', 'maildir') as $type) { foreach (array('eml', 'mbox', 'maildir') as $type) {
$menu[] = html::tag('li', null, $rcmail->output->button(array( $menu[] = html::tag('li', null, $rcmail->output->button(array(
@ -106,7 +109,8 @@ class zipdownload extends rcube_plugin
))); )));
} }
$rcmail->output->add_footer(html::div(array('id' => 'zipdownload-menu', 'class' => 'popupmenu'), $rcmail->output->add_footer(html::div(array('id' => 'zipdownload-menu', 'class' => 'popupmenu', 'aria-hidden' => 'true'),
html::tag('h2', array('class' => 'voice', 'id' => 'aria-label-zipdownloadmenu'), "Message Download Options Menu") .
html::tag('ul', $ul_attr, implode('', $menu)))); html::tag('ul', $ul_attr, implode('', $menu))));
} }

@ -197,7 +197,7 @@ function rcube_webmail()
// enable general commands // enable general commands
this.enable_command('close', 'logout', 'mail', 'addressbook', 'settings', 'save-pref', this.enable_command('close', 'logout', 'mail', 'addressbook', 'settings', 'save-pref',
'compose', 'undo', 'about', 'switch-task', 'menu-open', 'menu-save', true); 'compose', 'undo', 'about', 'switch-task', 'menu-open', 'menu-close', 'menu-save', true);
// set active task button // set active task button
this.set_button(this.task, 'sel'); this.set_button(this.task, 'sel');
@ -711,7 +711,8 @@ function rcube_webmail()
} }
case 'menu-save': case 'menu-save':
this.triggerEvent(command, {props:props, e:event}); case 'menu-close':
this.triggerEvent(command, {props:props, originalEvent:event});
return false; return false;
case 'open': case 'open':
@ -2316,6 +2317,7 @@ function rcube_webmail()
url._page = page; url._page = page;
this.http_request('list', url, lock); this.http_request('list', url, lock);
this.update_state({ _mbox: mbox, _page: (page && page > 1 ? page : null) });
}; };
// removes messages that doesn't exists from list selection array // removes messages that doesn't exists from list selection array
@ -3592,6 +3594,7 @@ function rcube_webmail()
$('<a>').addClass('insertresponse active') $('<a>').addClass('insertresponse active')
.attr('href', '#') .attr('href', '#')
.attr('rel', key) .attr('rel', key)
.attr('tabindex', '0')
.html(this.quote_html(response.name)) .html(this.quote_html(response.name))
.appendTo(li) .appendTo(li)
.mousedown(function(e){ .mousedown(function(e){
@ -6940,6 +6943,13 @@ function rcube_webmail()
this.start_keepalive(); this.start_keepalive();
}; };
// update browser location to remember current view
this.update_state = function(query)
{
if (window.history.replaceState)
window.history.replaceState({}, document.title, rcmail.url('', query));
};
// send a http request to the server // send a http request to the server
this.http_request = function(action, query, lock) this.http_request = function(action, query, lock)
{ {

@ -977,7 +977,7 @@ function rcmail_compose_body($attrib)
$OUTPUT->set_env('spellcheck_langs', join(',', $editor_lang_set)); $OUTPUT->set_env('spellcheck_langs', join(',', $editor_lang_set));
} }
$out .= "\n".'<iframe name="savetarget" src="program/resources/blank.gif" style="width:0;height:0;border:none;visibility:hidden;"></iframe>'; $out .= "\n".'<iframe name="savetarget" src="program/resources/blank.gif" style="width:0;height:0;border:none;visibility:hidden;" aria-hidden="true"></iframe>';
return $out; return $out;
} }
@ -1864,9 +1864,10 @@ function rcmail_compose_responses_list($attrib)
foreach ($RCMAIL->get_compose_responses(true) as $response) { foreach ($RCMAIL->get_compose_responses(true) as $response) {
$key = $response['key']; $key = $response['key'];
$item = html::a(array( $item = html::a(array(
'href '=> '#'.urlencode($response['name']), 'href' => '#'.urlencode($response['name']),
'class' => rtrim('insertresponse ' . $attrib['itemclass']), 'class' => rtrim('insertresponse ' . $attrib['itemclass']),
'unselectable' => 'on', 'unselectable' => 'on',
'tabindex' => '0',
'rel' => $key, 'rel' => $key,
), rcube::Q($response['name'])); ), rcube::Q($response['name']));

@ -507,14 +507,19 @@ function rcmail_message_list_head($attrib, $a_show_cols)
$a_sort_cols = array('subject', 'date', 'from', 'to', 'fromto', 'size', 'cc'); $a_sort_cols = array('subject', 'date', 'from', 'to', 'fromto', 'size', 'cc');
if (!empty($attrib['optionsmenuicon'])) { if (!empty($attrib['optionsmenuicon'])) {
$onclick = 'return ' . rcmail_output::JS_OBJECT_NAME . ".command('menu-open', 'messagelistmenu')"; $onclick = 'return ' . rcmail_output::JS_OBJECT_NAME . ".command('menu-open', 'messagelistmenu', null, event)";
if ($attrib['optionsmenuicon'] === true || $attrib['optionsmenuicon'] == 'true') $inner = 'v';
$list_menu = html::div(array('onclick' => $onclick, 'class' => 'listmenu', if (is_string($attrib['optionsmenuicon']) && $attrib['optionsmenuicon'] != 'true') {
'id' => 'listmenulink', 'title' => $RCMAIL->gettext('listoptions'))); $inner = html::img(array('src' => $skin_path . $attrib['optionsmenuicon'], 'alt' => $RCMAIL->gettext('listoptions')));
else }
$list_menu = html::a(array('href' => '#', 'onclick' => $onclick), $list_menu = html::a(array(
html::img(array('src' => $skin_path . $attrib['optionsmenuicon'], 'href' => '#list-options',
'id' => 'listmenulink', 'title' => $RCMAIL->gettext('listoptions')))); 'onclick' => $onclick,
'class' => 'listmenu',
'id' => 'listmenulink',
'title' => $RCMAIL->gettext('listoptions'),
'tabindex' => '0',
), $inner);
} }
else { else {
$list_menu = ''; $list_menu = '';

@ -198,6 +198,7 @@ function rcmail_message_attachments($attrib)
if (sizeof($MESSAGE->attachments)) { if (sizeof($MESSAGE->attachments)) {
foreach ($MESSAGE->attachments as $attach_prop) { foreach ($MESSAGE->attachments as $attach_prop) {
$filename = rcmail_attachment_name($attach_prop, true); $filename = rcmail_attachment_name($attach_prop, true);
$size = '';
if ($PRINT_MODE) { if ($PRINT_MODE) {
$size = $RCMAIL->message_part_size($attach_prop); $size = $RCMAIL->message_part_size($attach_prop);
@ -212,6 +213,10 @@ function rcmail_message_attachments($attrib)
$title = ''; $title = '';
} }
if ($attach_prop->size) {
$size = ' ' . html::span('attachment-size', '(' . $RCMAIL->show_bytes($attach_prop->size) . ')');
}
$mimetype = rcmail_fix_mimetype($attach_prop->mimetype); $mimetype = rcmail_fix_mimetype($attach_prop->mimetype);
$class = rcube_utils::file2class($mimetype, $filename); $class = rcube_utils::file2class($mimetype, $filename);
$id = 'attach' . $attach_prop->mime_id; $id = 'attach' . $attach_prop->mime_id;
@ -221,7 +226,7 @@ function rcmail_message_attachments($attrib)
rcmail_output::JS_OBJECT_NAME, $attach_prop->mime_id), rcmail_output::JS_OBJECT_NAME, $attach_prop->mime_id),
'onmouseover' => $title ? '' : 'rcube_webmail.long_subject_title_ex(this, 0)', 'onmouseover' => $title ? '' : 'rcube_webmail.long_subject_title_ex(this, 0)',
'title' => rcube::Q($title), 'title' => rcube::Q($title),
), rcube::Q($filename)); ), rcube::Q($filename) . $size);
$ol .= html::tag('li', array('class' => $class, 'id' => $id), $link); $ol .= html::tag('li', array('class' => $class, 'id' => $id), $link);

@ -814,7 +814,7 @@ table.messagelist.fixedcopy
.messagelist tr td div.collapsed, .messagelist tr td div.collapsed,
.messagelist tr td div.expanded, .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.attachment,
.messagelist tr td.attachment span.report, .messagelist tr td.attachment span.report,
.messagelist tr td.priority span.priority, .messagelist tr td.priority span.priority,
@ -954,10 +954,12 @@ table.messagelist.fixedcopy
cursor: pointer; cursor: pointer;
} }
.messagelist tr td.threads div.listmenu .messagelist tr td.threads .listmenu
{ {
background-position: 0 -238px; background-position: 0 -238px;
cursor: pointer; cursor: pointer;
overflow: hidden;
text-indent: -5000px;
} }
.messagelist tbody tr td.subject .messagelist tbody tr td.subject

@ -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="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" /> <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> <h3 id="aria-label-forwardmenu" class="voice">Forwarding options</h3>
<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-forwardmenu"> <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-inline" label="forwardinline" prop="sub" classAct="forwardlink active" class="forwardlink" /></li>
@ -27,7 +27,7 @@
</ul> </ul>
</div> </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> <h3 id="aria-label-replyallmenu" class="voice">Reply-all options</h3>
<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-replyallmenu"> <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-all" label="replyall" prop="sub" class="replyalllink" classAct="replyalllink active" /></li>
@ -36,7 +36,7 @@
</ul> </ul>
</div> </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> <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"> <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="print" label="printmessage" class="icon" classAct="icon active" innerclass="icon print" /></li>
@ -50,7 +50,7 @@
</ul> </ul>
</div> </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> <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"> <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="read" label="markread" classAct="icon active" class="icon" innerclass="icon read" /></li>

@ -599,7 +599,7 @@ table.messagelist.fixedcopy {
.messagelist tr td div.collapsed, .messagelist tr td div.collapsed,
.messagelist tr td div.expanded, .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.attachment,
.messagelist tr td.attachment span.report, .messagelist tr td.attachment span.report,
.messagelist tr td.priority span.priority, .messagelist tr td.priority span.priority,
@ -734,10 +734,20 @@ table.messagelist.fixedcopy {
cursor: pointer; cursor: pointer;
} }
.messagelist tr td.threads div.listmenu { .messagelist tr td.threads .listmenu {
background-position: 0 -976px; background-position: 6px -972px;
cursor: pointer; cursor: pointer;
width: 26px; 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, .messagelist thead tr td.subject,

@ -2678,6 +2678,7 @@ ul.toolbarmenu li span.copy {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 20px; line-height: 20px;
outline: none;
} }
.attachmentslist li a.drop { .attachmentslist li a.drop {
@ -2689,6 +2690,15 @@ ul.toolbarmenu li span.copy {
right: 0; right: 0;
top: 0; top: 0;
padding: 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 { #compose-attachments ul li {

@ -13,9 +13,11 @@
<div id="mainscreen"> <div id="mainscreen">
<h1 class="voice"><roundcube:object name="pagetitle" /></h1>
<!-- toolbar --> <!-- toolbar -->
<div id="messagetoolbar" class="fullwidth"> <h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
<div id="mailtoolbar" class="toolbar"> <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="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" /> <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> <span class="spacer"></span>
@ -25,25 +27,26 @@
<roundcube:if condition="config:enable_spellcheck" /> <roundcube:if condition="config:enable_spellcheck" />
<span class="dropbutton"> <span class="dropbutton">
<roundcube:button command="spellcheck" type="link" class="button spellcheck disabled" classAct="button spellcheck" classSel="button spellcheck pressed" label="spellcheck" title="checkspelling" /> <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> </span>
<roundcube:endif /> <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 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" /> <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" /> <roundcube:container name="toolbar" id="compose-toolbar" />
</div> </div>
</div>
<div id="mainscreencontent"> <div id="mainscreencontent">
<div id="composeview-left"> <div id="composeview-left">
<!-- inline address book --> <!-- inline address book -->
<div id="compose-contacts" class="uibox listbox"> <div id="compose-contacts" class="uibox listbox" role="region" aria-labelledby="aria-label-composecontacts">
<h2 class="boxtitle"><roundcube:label name="contacts" /></h2> <h2 id="aria-label-composecontacts" class="boxtitle"><roundcube:label name="contacts" /></h2>
<div id="composequicksearch"> <div id="composequicksearch" role="search" aria-labelledby="aria-label-composequicksearch">
<h3 id="aria-label-composequicksearch" class="voice">Contacts search form</h3>
<div class="searchbox"> <div class="searchbox">
<label for="contactsearchbox" class="voice">Contact search input</label>
<roundcube:object name="searchform" id="contactsearchbox" /> <roundcube:object name="searchform" id="contactsearchbox" />
<a id="searchmenulink" class="iconbutton searchoptions"> </a> <a id="searchmenulink" class="iconbutton searchoptions"> </a>
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " /> <roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
@ -66,12 +69,14 @@
</div> </div>
<div id="composeview-right"> <div id="composeview-right" role="main">
<roundcube:form name="form" method="post" id="compose-content" class="uibox"> <roundcube:form name="form" method="post" id="compose-content" class="uibox">
<!-- message headers --> <!-- 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> <a href="#options" id="composeoptionstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='options' />"></span></a>
<table class="headers-table compose-headers"> <table class="headers-table compose-headers">
@ -80,7 +85,7 @@
<td class="title"><label for="_from"><roundcube:label name="from" /></label></td> <td class="title"><label for="_from"><roundcube:label name="from" /></label></td>
<td class="editfield"> <td class="editfield">
<roundcube:object name="composeHeaders" part="from" form="form" id="_from" tabindex="1" /> <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> </td>
</tr><tr> </tr><tr>
<td class="title top"><label for="_to"><roundcube:label name="to" /></label></td> <td class="title top"><label for="_to"><roundcube:label name="to" /></label></td>
@ -129,7 +134,8 @@
</div> </div>
<!-- (collapsable) message options --> <!-- (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)" /> <roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
<span class="composeoption"> <span class="composeoption">
<label><roundcube:label name="editortype" /> <label><roundcube:label name="editortype" />
@ -163,7 +169,8 @@
<div id="composebodycontainer"> <div id="composebodycontainer">
<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="9" /> <roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="9" />
</div> </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"> <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" /> <roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform();return false" />
</div> </div>
@ -187,7 +194,8 @@
</div><!-- end mainscreen --> </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" /> <roundcube:object name="composeAttachmentForm" id="uploadform" buttons="no" />
<div class="formbuttons"> <div class="formbuttons">
<roundcube:button command="send-attachment" type="input" class="button mainaction" label="upload" /> <roundcube:button command="send-attachment" type="input" class="button mainaction" label="upload" />
@ -195,15 +203,15 @@
</div> </div>
</div> </div>
<div id="spellmenu" class="popupmenu"></div> <div id="spellmenu" class="popupmenu" aria-hidden="true"></div>
<div id="responsesmenu" class="popupmenu"> <div id="responsesmenu" class="popupmenu" aria-hidden="true">
<ul class="toolbarmenu" id="textresponsesmenu"> <ul class="toolbarmenu" id="textresponsesmenu" role="menu">
<li class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li> <li role="separator" class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li>
<roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" /> <roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" />
<li class="separator"><label><roundcube:label name="manageresponses" /></label></li> <li role="separator" 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 role="menuitem"><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="menuitem"><roundcube:button command="responses" type="link" label="editresponses" classAct="active" /></li>
</ul> </ul>
</div> </div>

@ -7,6 +7,8 @@
</head> </head>
<body> <body>
<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1>
<div id="login-form"> <div id="login-form">
<div class="box-inner" role="main"> <div class="box-inner" role="main">
<roundcube:object name="logo" src="/images/roundcube_logo.png" id="logo" /> <roundcube:object name="logo" src="/images/roundcube_logo.png" id="logo" />
@ -25,7 +27,7 @@
</div> </div>
<div id="bottomline" role="contentinfo"> <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" /> <roundcube:if condition="config:support_url" />
&nbsp;&#9679;&nbsp; <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a> &nbsp;&#9679;&nbsp; <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a>
<roundcube:endif /> <roundcube:endif />

@ -92,12 +92,13 @@
<!-- messagelist --> <!-- messagelist -->
<div id="messagelistcontainer" class="boxlistcontent"> <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" <roundcube:object name="messages"
id="messagelist" id="messagelist"
class="records-table messagelist sortheader fixedheader" class="records-table messagelist sortheader fixedheader"
optionsmenuIcon="true" optionsmenuIcon="true"
role="grid" summary="Email Messages Listing"
role="grid"
aria-labelledby="aria-label-messagelist" /> aria-labelledby="aria-label-messagelist" />
</div> </div>
@ -136,7 +137,7 @@
<div id="mailpreviewframe" class="iframebox" role="complementary" aria-labelledby="aria-label-mailpreviewframe"> <div id="mailpreviewframe" class="iframebox" role="complementary" aria-labelledby="aria-label-mailpreviewframe">
<h2 id="aria-label-mailpreviewframe" class="voice">Message preview</h2> <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>
</div><!-- end mailview-bottom --> </div><!-- end mailview-bottom -->
@ -147,14 +148,14 @@
</div><!-- end mainscreen --> </div><!-- end mainscreen -->
<div id="dragmessagemenu" class="popupmenu"> <div id="dragmessagemenu" class="popupmenu" aria-hidden="true">
<ul class="toolbarmenu" role="menu"> <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="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> <li role="menuitem"><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
</ul> </ul>
</div> </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> <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"> <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="expunge" type="link" label="compact" classAct="active" /></li>
@ -165,7 +166,7 @@
</ul> </ul>
</div> </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> <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"> <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" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li>
@ -177,7 +178,7 @@
</ul> </ul>
</div> </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> <h3 id="aria-label-threadselectmenu" class="voice">Threads listing menu</h3>
<ul id="threadselectmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-threadselectmenu"> <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-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
@ -186,7 +187,7 @@
</ul> </ul>
</div> </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> <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)" /> <roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" />
<fieldset class="floating"> <fieldset class="floating">
@ -236,11 +237,12 @@
<br style="clear:both" /> <br style="clear:both" />
<div class="formbuttons"> <div class="formbuttons">
<roundcube:button command="menu-save" id="listmenusave" type="input" class="button mainaction" label="save" /> <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> </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" /> <roundcube:object name="messageimportform" id="uploadform" buttons="no" />
<div class="formbuttons"> <div class="formbuttons">
<roundcube:button command="import-messages" type="input" class="button mainaction" label="upload" /> <roundcube:button command="import-messages" type="input" class="button mainaction" label="upload" />

@ -10,8 +10,11 @@
<div id="mainscreen"> <div id="mainscreen">
<h1 class="voice"><roundcube:object name="messageHeaders" valueOf="subject" /></h1>
<!-- toolbar --> <!-- 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:if condition="!env:extwin" />
<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
<roundcube:endif /> <roundcube:endif />
@ -25,7 +28,8 @@
<div id="mailview-left"> <div id="mailview-left">
<!-- folders list --> <!-- 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"> <div class="scroller">
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
</div> </div>
@ -33,18 +37,19 @@
</div> </div>
<div id="mailview-right" class="uibox"> <div id="mailview-right" class="uibox" role="main">
<roundcube:else /> <roundcube:else />
<roundcube:object name="mailboxlist" folder_filter="mail" type="js" /> <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 /> <roundcube:endif />
<div id="messageheader"> <div id="messageheader">
<span class="moreheaderstoggle"></span> <span class="moreheaderstoggle"></span>
<!-- record navigation --> <!-- 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: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="&amp;lt;" /> <roundcube:button command="previousmessage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previousmessage" content="&amp;lt;" />
<roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&amp;gt;" /> <roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&amp;gt;" />
@ -64,7 +69,7 @@
</div> </div>
<roundcube:endif /> <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"> <div class="message-headers">
<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" /> <roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" />
</div> </div>
@ -73,11 +78,13 @@
<div id="contactphoto"><roundcube:object name="contactphoto" /></div> <div id="contactphoto"><roundcube:object name="contactphoto" /></div>
</div> </div>
<div id="messagecontent" role="main"> <div id="messagecontent">
<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" /> <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
</div> </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="messageObjects" id="message-objects" />
<roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" /> <roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" />
</div> </div>
@ -91,10 +98,10 @@
</div><!-- end mainscreen --> </div><!-- end mainscreen -->
<div id="attachmentmenu" class="popupmenu"> <div id="attachmentmenu" class="popupmenu" aria-hidden="true">
<ul class="toolbarmenu"> <ul class="toolbarmenu" role="menu">
<li><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="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> <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" /> <roundcube:container name="attachmentmenu" id="attachmentmenu" />
</ul> </ul>
</div> </div>

@ -16,11 +16,12 @@
<div id="mainscreen"> <div id="mainscreen">
<h1 class="voice"><roundcube:label name="messageopenerror" /></h1>
<!-- toolbar --> <!-- toolbar -->
<div id="messagetoolbar" class="fullwidth"> <h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
<div id="mailtoolbar" class="toolbar"> <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" /> <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
</div>
</div> </div>
<div id="mainscreencontent"> <div id="mainscreencontent">
@ -28,7 +29,8 @@
<div id="mailview-left"> <div id="mailview-left">
<!-- folders list --> <!-- 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"> <div class="scroller">
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
</div> </div>
@ -36,7 +38,7 @@
</div> </div>
<div id="mailview-right" class="offset uibox"> <div id="mailview-right" class="uibox">
<div id="messagecontent" class="watermark"></div> <div id="messagecontent" class="watermark"></div>

@ -10,7 +10,10 @@
<div id="mainscreen"> <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="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:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" />
<roundcube:container name="toolbar" id="messagetoolbar" /> <roundcube:container name="toolbar" id="messagetoolbar" />
@ -18,16 +21,17 @@
<div id="mainscreencontent"> <div id="mainscreencontent">
<div id="messagepartheader" class="uibox listbox"> <div id="messagepartheader" class="uibox listbox" role="contentinfo" aria-labelledby="aria-label-contentinfo">
<h2 class="boxtitle"><roundcube:label name="properties" /></h2> <h2 class="boxtitle" id="aria-label-contentinfo"><roundcube:label name="properties" /></h2>
<div class="scroller"> <div class="scroller">
<roundcube:object name="messagePartControls" class="listing" /> <roundcube:object name="messagePartControls" class="listing" />
</div> </div>
</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"> <div class="iframebox">
<roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" /> <roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" title="Attachment preview" />
</div> </div>
</div> </div>

@ -9,7 +9,8 @@
<div id="messageheader" class="previewheader"> <div id="messageheader" class="previewheader">
<!-- record navigation --> <!-- 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'" /> <roundcube:if condition="env:optional_format=='text'" />
<span class="buttongroup"> <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" /> <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="[]" /> <roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" />
</div> </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> <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> <div id="contactphoto"><roundcube:object name="contactphoto" /></div>
@ -54,10 +55,12 @@
</div> </div>
<div id="messagepreview" role="main"> <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" /> <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
</div> </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="messageObjects" id="message-objects" />
<roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" /> <roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" />
</div> </div>

@ -141,8 +141,9 @@ function rcube_mail_ui()
/*** mail task ***/ /*** mail task ***/
if (rcmail.env.task == 'mail') { if (rcmail.env.task == 'mail') {
rcmail.addEventListener('menu-open', menu_open) rcmail.addEventListener('menu-open', menu_toggle)
.addEventListener('menu-save', menu_save) .addEventListener('menu-close', menu_toggle)
.addEventListener('menu-save', save_listoptions)
.addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list', true) }) .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) }); .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 // add menu link for each attachment
$('#attachment-list > li').each(function() { $('#attachment-list > li').each(function() {
$(this).append($('<a class="drop" tabindex="0" aria-haspopup="true">Show options</a>') $(this).append($('<a class="drop" tabindex="0" aria-haspopup="true">Show options</a>')
.click(function(e) { attachmentmenu(this, e); return false; }) .bind('click keypress', function(e) {
.keypress(function(e){ if (rcube_event.get_keycode(e) == 13) attachmentmenu(this, e); return false; }) 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 ****/ /**** popup callbacks ****/
function menu_open(p) function menu_toggle(p)
{ {
if (p && p.props && p.props.menu == 'attachmentmenu') 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 else
show_listoptions(); show_listoptions(p);
}
function menu_save(prop)
{
save_listoptions();
} }
function searchmenu(show) function searchmenu(show)
@ -884,20 +884,24 @@ function rcube_mail_ui()
function spellmenu(show) function spellmenu(show)
{ {
var link, li, var k, link, li,
lang = rcmail.spellcheck_lang(), lang = rcmail.spellcheck_lang(),
menu = popups.spellmenu, menu = popups.spellmenu,
ul = $('ul', menu); ul = $('ul', menu);
if (!ul.length) { if (!ul.length) {
ul = $('<ul class="toolbarmenu selectable">'); ul = $('<ul class="toolbarmenu selectable" role="menu">');
for (i in rcmail.env.spell_langs) { for (k in rcmail.env.spell_langs) {
li = $('<li>'); li = $('<li role="menuitem">');
link = $('<a href="#"></a>').text(rcmail.env.spell_langs[i]) link = $('<a href="#'+k+'" tabindex="0"></a>').text(rcmail.env.spell_langs[k])
.addClass('active').data('lang', i) .addClass('active').data('lang', k)
.click(function() { .bind('click keypress', function(e) {
rcmail.spellcheck_lang_set($(this).data('lang')); 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); link.appendTo(li);
@ -911,9 +915,9 @@ function rcube_mail_ui()
$('li', ul).each(function() { $('li', ul).each(function() {
var el = $('a', this); var el = $('a', this);
if (el.data('lang') == lang) if (el.data('lang') == lang)
el.addClass('selected'); el.addClass('selected').attr('aria-selected', 'true');
else if (el.hasClass('selected')) 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'); var $dialog = $('#listoptions');
// close the dialog // close the dialog
if ($dialog.is(':visible')) { if ($dialog.is(':visible')) {
$dialog.dialog('close'); $dialog.dialog('close', p.originalEvent);
return; return;
} }
@ -946,8 +950,13 @@ function rcube_mail_ui()
resizable: false, resizable: false,
closeOnEscape: true, closeOnEscape: true,
title: null, 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(); $dialog.dialog('destroy').hide();
if (e.originalEvent && rcube_event.is_keyboard(e.originalEvent))
$('#listmenulink').focus();
}, },
minWidth: 500, minWidth: 500,
width: $dialog.width()+25 width: $dialog.width()+25
@ -958,10 +967,13 @@ function rcube_mail_ui()
/** /**
* *
*/ */
function save_listoptions() function save_listoptions(p)
{ {
$('#listoptions').dialog('close'); $('#listoptions').dialog('close');
if (rcube_event.is_keyboard(p.originalEvent))
$('#listmenulink').focus();
var sort = $('input[name="sort_col"]:checked').val(), var sort = $('input[name="sort_col"]:checked').val(),
ord = $('input[name="sort_ord"]:checked').val(), ord = $('input[name="sort_ord"]:checked').val(),
cols = $('input[name="list_col[]"]:checked') cols = $('input[name="list_col[]"]:checked')

Loading…
Cancel
Save