summaryrefslogtreecommitdiff
path: root/program
diff options
context:
space:
mode:
authorThomas Bruederli <thomas@roundcube.net>2014-05-27 16:59:28 +0200
committerThomas Bruederli <thomas@roundcube.net>2014-05-27 16:59:28 +0200
commitd4d62ac414a3ba706fb65c581581c419a90d5ac9 (patch)
treef8c152c10a7602164ff327c978ab181848096d6d /program
parent170e45e03587f983354d20f18184d465216deb0c (diff)
Set aria-* attributes for autocompletion fields and widgets
Diffstat (limited to 'program')
-rw-r--r--program/js/app.js42
-rw-r--r--program/js/list.js1
2 files changed, 30 insertions, 13 deletions
diff --git a/program/js/app.js b/program/js/app.js
index 06008b2da..4bd6442b3 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -3381,7 +3381,9 @@ function rcube_webmail()
this.env.recipients_delimiter = this.env.recipients_separator + ' ';
obj.keydown(function(e) { return ref.ksearch_keydown(e, this, props); })
- .attr('autocomplete', 'off');
+ .attr('autocomplete', 'off')
+ .attr('aria-autocomplete', 'list')
+ .attr('aria-expanded', 'false');
};
this.submit_messageform = function(draft)
@@ -4471,7 +4473,7 @@ function rcube_webmail()
var dir = key==38 ? 1 : 0;
- highlight = document.getElementById('rcmksearchSelected');
+ highlight = document.getElementById('rcmkSearchItem' + this.ksearch_selected);
if (!highlight)
highlight = this.ksearch_pane.__ul.firstChild;
@@ -4519,14 +4521,14 @@ function rcube_webmail()
this.ksearch_select = function(node)
{
- var current = $('#rcmksearchSelected');
- if (current[0] && node) {
- current.removeAttr('id').removeClass('selected');
+ if (this.ksearch_pane && node) {
+ this.ksearch_pane.find('li.selected').removeClass('selected');
}
if (node) {
- $(node).attr('id', 'rcmksearchSelected').addClass('selected');
+ $(node).addClass('selected');
this.ksearch_selected = node._rcm_id;
+ $(this.ksearch_input).attr('aria-activedecendant', 'rcmkSearchItem' + this.ksearch_selected);
}
};
@@ -4664,9 +4666,13 @@ function rcube_webmail()
// create results pane if not present
if (!this.ksearch_pane) {
ul = $('<ul>');
- this.ksearch_pane = $('<div>').attr('id', 'rcmKSearchpane')
+ this.ksearch_pane = $('<div>').attr('id', 'rcmKSearchpane').attr('role', 'listbox')
.css({ position:'absolute', 'z-index':30000 }).append(ul).appendTo(document.body);
this.ksearch_pane.__ul = ul[0];
+
+ // register (delegate) event handlers
+ ul.on('mouseover', 'li', function(e){ ref.ksearch_select(e.target); })
+ .on('onmouseup', 'li', function(e){ ref.ksearch_click(e.target); })
}
ul = this.ksearch_pane.__ul;
@@ -4692,10 +4698,9 @@ function rcube_webmail()
text = typeof results[i] === 'object' ? results[i].name : results[i];
type = typeof results[i] === 'object' ? results[i].type : '';
li = document.createElement('LI');
- li.innerHTML = text.replace(new RegExp('('+RegExp.escape(value)+')', 'ig'), '##$1%%').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/##([^%]+)%%/g, '<b>$1</b>');
- li.onmouseover = function(){ ref.ksearch_select(this); };
- li.onmouseup = function(){ ref.ksearch_click(this) };
- li._rcm_id = this.env.contacts.length + i;
+ li._rcm_id = i + this.env.contacts.length;
+ li.id = 'rcmkSearchItem' + li._rcm_id;
+ li.innerHTML = this.quote_html(text.replace(new RegExp('('+RegExp.escape(value)+')', 'ig'), '##$1%%')).replace(/##([^%]+)%%/g, '<b>$1</b>');
if (type) li.className = type;
ul.appendChild(li);
maxlen -= 1;
@@ -4706,9 +4711,14 @@ function rcube_webmail()
this.ksearch_pane.show();
// select the first
if (!this.env.contacts.length) {
- $('li:first', ul).attr('id', 'rcmksearchSelected').addClass('selected');
- this.ksearch_selected = 0;
+ this.ksearch_select($('li:first', ul).get(0));
}
+
+ // set the right aria-* attributes to the input field
+ $(this.ksearch_input)
+ .attr('aria-haspopup', 'true')
+ .attr('aria-expanded', 'true')
+ .attr('aria-owns', 'rcmKSearchpane')
}
if (len)
@@ -4744,6 +4754,12 @@ function rcube_webmail()
if (this.ksearch_pane)
this.ksearch_pane.hide();
+ $(this.ksearch_input)
+ .attr('aria-haspopup', 'false')
+ .attr('aria-expanded', 'false')
+ .removeAttr('aria-activedecendant')
+ .removeAttr('aria-owns');
+
this.ksearch_destroy();
};
diff --git a/program/js/list.js b/program/js/list.js
index f64d38bc3..59651b8a2 100644
--- a/program/js/list.js
+++ b/program/js/list.js
@@ -213,6 +213,7 @@ init_fixed_header: function()
if (!this.fixed_header) {
this.fixed_header = $('<table>')
.attr('class', this.list.className + ' fixedcopy')
+ .attr('role', 'presentation')
.css({ position:'fixed' })
.append(clone)
.append('<tbody></tbody>');