diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index 4a6d76ead..e2be09937 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -7,26 +7,6 @@

- - -

- - - - - - - - - - - -

- - - -

@@ -50,9 +30,30 @@

+ + +

+ + + + + + + + + + + +

+ + + + +

diff --git a/skins/larry/ui.js b/skins/larry/ui.js index add02b85e..9006b35d2 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -475,6 +475,8 @@ function rcube_mail_ui() minHeight: 90 }).show(); + me.messagedialog.closest('div[role=dialog]').attr('role', 'alertdialog'); + me.message_timer = window.setTimeout(dialog_close, p.timeout); } } -- cgit v1.2.3 From d2bf33b242e9578fcb05bbf1365eeaf1d0dac67c Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Wed, 7 May 2014 12:44:10 +0200 Subject: Forward keyboard event through 'menu-open' command to enable keyboard navigation --- program/js/app.js | 2 +- skins/larry/ui.js | 17 ++++++++++------- 2 files changed, 11 insertions(+), 8 deletions(-) (limited to 'skins') diff --git a/program/js/app.js b/program/js/app.js index f0aadd970..fecd5a0ee 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -711,7 +711,7 @@ function rcube_webmail() } case 'menu-save': - this.triggerEvent(command, {props:props}); + this.triggerEvent(command, {props:props, e:event}); return false; case 'open': diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 9006b35d2..8476d91c7 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -160,7 +160,10 @@ function rcube_mail_ui() // add menu link for each attachment $('#attachment-list > li').each(function() { - $(this).append($('').click(function() { attachmentmenu(this); })); + $(this).append($('Show options') + .click(function(e) { attachmentmenu(this, e); return false; }) + .keypress(function(e){ if (rcube_event.get_keycode(e) == 13) attachmentmenu(this, e); return false; }) + ); }); if (get_pref('previewheaders') == '1') { @@ -491,7 +494,7 @@ function rcube_mail_ui() $('#message-objects div a').addClass('button'); if (!$('#attachment-list li').length) { - $('div.rightcol').hide(); + $('div.rightcol').hide().attr('aria-hidden', 'true'); $('div.leftcol').css('margin-right', '0'); } } @@ -652,12 +655,12 @@ function rcube_mail_ui() ref.focus(); } - obj[show?'show':'hide'](); + obj[show?'show':'hide']().attr('aria-hidden', show?'false':'true'); popup_keyboard_active = show && keyboard; if (popup_keyboard_active) { focused_popup = popup; - obj.find('a,input').not('[aria-disabled=true]').first().focus(); + obj.find('a,input:not(:disabled)').not('[aria-disabled=true]').first().focus(); } else { focused_popup = null; @@ -819,7 +822,7 @@ function rcube_mail_ui() function menu_open(p) { if (p && p.props && p.props.menu == 'attachmentmenu') - show_popupmenu('attachmentmenu'); + show_popupmenu('attachmentmenu', true, rcube_event.is_keyboard(p.e)); else show_listoptions(); } @@ -863,7 +866,7 @@ function rcube_mail_ui() } } - function attachmentmenu(elem) + function attachmentmenu(elem, event) { var id = elem.parentNode.id.replace(/^attach/, ''); @@ -876,7 +879,7 @@ function rcube_mail_ui() }); popupconfig.attachmentmenu.link = elem; - rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}); + rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}, elem, event); } function spellmenu(show) -- cgit v1.2.3 From b2992dd2283c3d0ac95f3293497dfaed0493f607 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Wed, 7 May 2014 17:34:28 +0200 Subject: 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(-) (limited to 'skins') 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 @@ -

+ -

	- +


- x + x
- x + x
- x + x
- x + x
	- - - - + + + +

- x +
- x +
- x +
- x +

Forwarding options

Reply-all options

More message toolbar actions

Mark selected messages as...

Application toolbar

Email message search form

Message headers

Composition options

:

Message Body

Application toolbar

:

Application toolbar

Attachment preview

Message actions

:

Message Body

Application toolbar

Email message search form

Contacts search form

Message headers

Composition options