summaryrefslogtreecommitdiff
path: root/skins/larry/ui.js
diff options
context:
space:
mode:
authorThomas Bruederli <thomas@roundcube.net>2014-05-07 17:34:28 +0200
committerThomas Bruederli <thomas@roundcube.net>2014-05-07 17:34:28 +0200
commitb2992dd2283c3d0ac95f3293497dfaed0493f607 (patch)
tree038053fb7e932450abb4151ceb053be2a8311b8a /skins/larry/ui.js
parent184ed2efe2258579c886de337446fcbb05f5faf4 (diff)
Further accessibility improvements regarding keyboard navigation and document structure
Diffstat (limited to 'skins/larry/ui.js')
-rw-r--r--skins/larry/ui.js66
1 files changed, 39 insertions, 27 deletions
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')