From b2992dd2283c3d0ac95f3293497dfaed0493f607 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Wed, 7 May 2014 17:34:28 +0200 Subject: [PATCH] Further accessibility improvements regarding keyboard navigation and document structure --- plugins/zipdownload/zipdownload.php | 8 ++- program/js/app.js | 14 ++++- program/steps/mail/compose.inc | 5 +- program/steps/mail/func.inc | 21 +++++--- program/steps/mail/show.inc | 7 ++- skins/classic/mail.css | 6 ++- skins/larry/includes/mailtoolbar.html | 8 +-- skins/larry/mail.css | 16 ++++-- skins/larry/styles.css | 10 ++++ skins/larry/templates/compose.html | 50 +++++++++-------- skins/larry/templates/login.html | 4 +- skins/larry/templates/mail.html | 22 ++++---- skins/larry/templates/message.html | 33 +++++++----- skins/larry/templates/messageerror.html | 14 ++--- skins/larry/templates/messagepart.html | 14 +++-- skins/larry/templates/messagepreview.html | 11 ++-- skins/larry/ui.js | 66 +++++++++++++---------- 17 files changed, 198 insertions(+), 111 deletions(-) diff --git a/plugins/zipdownload/zipdownload.php b/plugins/zipdownload/zipdownload.php index 90a314437..edb8188cc 100644 --- a/plugins/zipdownload/zipdownload.php +++ b/plugins/zipdownload/zipdownload.php @@ -96,7 +96,10 @@ class zipdownload extends rcube_plugin $rcmail = rcmail::get_instance(); $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) { $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)))); } diff --git a/program/js/app.js b/program/js/app.js index fecd5a0ee..11236d0cb 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -197,7 +197,7 @@ function rcube_webmail() // enable general commands 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 this.set_button(this.task, 'sel'); @@ -711,7 +711,8 @@ function rcube_webmail() } case 'menu-save': - this.triggerEvent(command, {props:props, e:event}); + case 'menu-close': + this.triggerEvent(command, {props:props, originalEvent:event}); return false; case 'open': @@ -2316,6 +2317,7 @@ function rcube_webmail() url._page = page; 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 @@ -3592,6 +3594,7 @@ function rcube_webmail() $('').addClass('insertresponse active') .attr('href', '#') .attr('rel', key) + .attr('tabindex', '0') .html(this.quote_html(response.name)) .appendTo(li) .mousedown(function(e){ @@ -6940,6 +6943,13 @@ function rcube_webmail() 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 this.http_request = function(action, query, lock) { diff --git a/program/steps/mail/compose.inc b/program/steps/mail/compose.inc index 2b717d673..b56938596 100644 --- a/program/steps/mail/compose.inc +++ b/program/steps/mail/compose.inc @@ -977,7 +977,7 @@ function rcmail_compose_body($attrib) $OUTPUT->set_env('spellcheck_langs', join(',', $editor_lang_set)); } - $out .= "\n".''; + $out .= "\n".''; return $out; } @@ -1864,9 +1864,10 @@ function rcmail_compose_responses_list($attrib) foreach ($RCMAIL->get_compose_responses(true) as $response) { $key = $response['key']; $item = html::a(array( - 'href '=> '#'.urlencode($response['name']), + 'href' => '#'.urlencode($response['name']), 'class' => rtrim('insertresponse ' . $attrib['itemclass']), 'unselectable' => 'on', + 'tabindex' => '0', 'rel' => $key, ), rcube::Q($response['name'])); diff --git a/program/steps/mail/func.inc b/program/steps/mail/func.inc index b9971ce0c..811e8782d 100644 --- a/program/steps/mail/func.inc +++ b/program/steps/mail/func.inc @@ -507,14 +507,19 @@ function rcmail_message_list_head($attrib, $a_show_cols) $a_sort_cols = array('subject', 'date', 'from', 'to', 'fromto', 'size', 'cc'); if (!empty($attrib['optionsmenuicon'])) { - $onclick = 'return ' . rcmail_output::JS_OBJECT_NAME . ".command('menu-open', 'messagelistmenu')"; - if ($attrib['optionsmenuicon'] === true || $attrib['optionsmenuicon'] == 'true') - $list_menu = html::div(array('onclick' => $onclick, 'class' => 'listmenu', - 'id' => 'listmenulink', 'title' => $RCMAIL->gettext('listoptions'))); - else - $list_menu = html::a(array('href' => '#', 'onclick' => $onclick), - html::img(array('src' => $skin_path . $attrib['optionsmenuicon'], - 'id' => 'listmenulink', 'title' => $RCMAIL->gettext('listoptions')))); + $onclick = 'return ' . rcmail_output::JS_OBJECT_NAME . ".command('menu-open', 'messagelistmenu', null, event)"; + $inner = 'v'; + if (is_string($attrib['optionsmenuicon']) && $attrib['optionsmenuicon'] != 'true') { + $inner = html::img(array('src' => $skin_path . $attrib['optionsmenuicon'], 'alt' => $RCMAIL->gettext('listoptions'))); + } + $list_menu = html::a(array( + 'href' => '#list-options', + 'onclick' => $onclick, + 'class' => 'listmenu', + 'id' => 'listmenulink', + 'title' => $RCMAIL->gettext('listoptions'), + 'tabindex' => '0', + ), $inner); } else { $list_menu = ''; diff --git a/program/steps/mail/show.inc b/program/steps/mail/show.inc index 9498d1dc5..7f9a23e7d 100644 --- a/program/steps/mail/show.inc +++ b/program/steps/mail/show.inc @@ -198,6 +198,7 @@ function rcmail_message_attachments($attrib) if (sizeof($MESSAGE->attachments)) { foreach ($MESSAGE->attachments as $attach_prop) { $filename = rcmail_attachment_name($attach_prop, true); + $size = ''; if ($PRINT_MODE) { $size = $RCMAIL->message_part_size($attach_prop); @@ -212,6 +213,10 @@ function rcmail_message_attachments($attrib) $title = ''; } + if ($attach_prop->size) { + $size = ' ' . html::span('attachment-size', '(' . $RCMAIL->show_bytes($attach_prop->size) . ')'); + } + $mimetype = rcmail_fix_mimetype($attach_prop->mimetype); $class = rcube_utils::file2class($mimetype, $filename); $id = 'attach' . $attach_prop->mime_id; @@ -221,7 +226,7 @@ function rcmail_message_attachments($attrib) rcmail_output::JS_OBJECT_NAME, $attach_prop->mime_id), 'onmouseover' => $title ? '' : 'rcube_webmail.long_subject_title_ex(this, 0)', 'title' => rcube::Q($title), - ), rcube::Q($filename)); + ), rcube::Q($filename) . $size); $ol .= html::tag('li', array('class' => $class, 'id' => $id), $link); diff --git a/skins/classic/mail.css b/skins/classic/mail.css index fc066e023..43a658b7c 100644 --- a/skins/classic/mail.css +++ b/skins/classic/mail.css @@ -814,7 +814,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, @@ -954,10 +954,12 @@ table.messagelist.fixedcopy cursor: pointer; } -.messagelist tr td.threads div.listmenu +.messagelist tr td.threads .listmenu { background-position: 0 -238px; cursor: pointer; + overflow: hidden; + text-indent: -5000px; } .messagelist tbody tr td.subject 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 @@ -
+ -
+ -
+ -
+