From b2992dd2283c3d0ac95f3293497dfaed0493f607 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Wed, 07 May 2014 11:34:28 -0400
Subject: [PATCH] Further accessibility improvements regarding keyboard navigation and document structure
---
program/js/common.js | 338 +++++++++++++++++++-------------------------------------
1 files changed, 116 insertions(+), 222 deletions(-)
diff --git a/program/js/common.js b/program/js/common.js
index 1075225..e15c34a 100644
--- a/program/js/common.js
+++ b/program/js/common.js
@@ -1,18 +1,30 @@
-/*
- +-----------------------------------------------------------------------+
- | Roundcube common js library |
- | |
- | This file is part of the Roundcube web development suite |
- | Copyright (C) 2005-2012, The Roundcube Dev Team |
- | |
- | Licensed under the GNU General Public License version 3 or |
- | any later version with exceptions for skins & plugins. |
- | See the README file for a full license statement. |
- | |
- +-----------------------------------------------------------------------+
- | Author: Thomas Bruederli <roundcube@gmail.com> |
- +-----------------------------------------------------------------------+
-*/
+/**
+ * Roundcube common js library
+ *
+ * This file is part of the Roundcube Webmail client
+ *
+ * @licstart The following is the entire license notice for the
+ * JavaScript code in this file.
+ *
+ * Copyright (c) 2005-2014, The Roundcube Dev Team
+ *
+ * The JavaScript code in this page is free software: you can
+ * redistribute it and/or modify it under the terms of the GNU
+ * General Public License (GNU GPL) as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option)
+ * any later version. The code is distributed WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
+ *
+ * As additional permission under GNU GPL version 3 section 7, you
+ * may distribute non-source (e.g., minimized or compacted) forms of
+ * that code without the copy of the GNU GPL normally required by
+ * section 4, provided you include this license notice and a URL
+ * through which recipients can access the Corresponding Source.
+ *
+ * @licend The above is the entire license notice
+ * for the JavaScript code in this file.
+ */
// Constants
var CONTROL_KEY = 1;
@@ -37,58 +49,55 @@
this.vendver = n.vendorSub ? parseFloat(n.vendorSub) : 0;
this.product = n.product ? n.product : '';
this.platform = String(n.platform).toLowerCase();
- this.lang = (n.language) ? n.language.substring(0,2) :
- (n.browserLanguage) ? n.browserLanguage.substring(0,2) :
- (n.systemLanguage) ? n.systemLanguage.substring(0,2) : 'en';
+ this.lang = n.language ? n.language.substring(0,2) :
+ n.browserLanguage ? n.browserLanguage.substring(0,2) :
+ n.systemLanguage ? n.systemLanguage.substring(0,2) : 'en';
- this.win = (this.platform.indexOf('win') >= 0);
- this.mac = (this.platform.indexOf('mac') >= 0);
- this.linux = (this.platform.indexOf('linux') >= 0);
- this.unix = (this.platform.indexOf('unix') >= 0);
+ this.win = this.platform.indexOf('win') >= 0;
+ this.mac = this.platform.indexOf('mac') >= 0;
+ this.linux = this.platform.indexOf('linux') >= 0;
+ this.unix = this.platform.indexOf('unix') >= 0;
this.dom = document.getElementById ? true : false;
- this.dom2 = (document.addEventListener && document.removeEventListener);
+ this.dom2 = document.addEventListener && document.removeEventListener;
- this.ie = (document.all && !window.opera);
- this.ie4 = (this.ie && !this.dom);
- this.ie5 = (this.dom && this.appver.indexOf('MSIE 5')>0);
- this.ie8 = (this.dom && this.appver.indexOf('MSIE 8')>0);
- this.ie9 = (this.dom && this.appver.indexOf('MSIE 9')>0);
- this.ie7 = (this.dom && this.appver.indexOf('MSIE 7')>0);
- this.ie6 = (this.dom && !this.ie8 && !this.ie7 && this.appver.indexOf('MSIE 6')>0);
+ this.webkit = this.agent_lc.indexOf('applewebkit') > 0;
+ this.ie = (document.all && !window.opera) || (this.win && this.agent_lc.indexOf('trident/') > 0);
- this.ns = ((this.ver < 5 && this.name == 'Netscape') || (this.ver >= 5 && this.vendor.indexOf('Netscape') >= 0));
- this.chrome = (this.agent_lc.indexOf('chrome') > 0);
- this.safari = (!this.chrome && (this.agent_lc.indexOf('safari') > 0 || this.agent_lc.indexOf('applewebkit') > 0));
- this.konq = (this.agent_lc.indexOf('konqueror') > 0);
- this.mz = (this.dom && !this.ie && !this.ns && !this.chrome && !this.safari && !this.konq && this.agent.indexOf('Mozilla') >= 0);
- this.iphone = (this.safari && this.agent_lc.indexOf('iphone') > 0);
- this.ipad = (this.safari && this.agent_lc.indexOf('ipad') > 0);
- this.opera = window.opera ? true : false;
+ if (this.ie) {
+ this.ie7 = this.appver.indexOf('MSIE 7') > 0;
+ this.ie8 = this.appver.indexOf('MSIE 8') > 0;
+ this.ie9 = this.appver.indexOf('MSIE 9') > 0;
+ }
+ else if (window.opera) {
+ this.opera = true;
+ this.vendver = opera.version();
+ }
+ else {
+ this.chrome = this.agent_lc.indexOf('chrome') > 0;
+ this.safari = !this.chrome && (this.webkit || this.agent_lc.indexOf('safari') > 0);
+ this.konq = this.agent_lc.indexOf('konqueror') > 0;
+ this.mz = this.dom && !this.chrome && !this.safari && !this.konq && this.agent.indexOf('Mozilla') >= 0;
+ this.iphone = this.safari && (this.agent_lc.indexOf('iphone') > 0 || this.agent_lc.indexOf('ipod') > 0);
+ this.ipad = this.safari && this.agent_lc.indexOf('ipad') > 0;
+ }
- if (this.opera && window.RegExp)
- this.vendver = (/opera(\s|\/)([0-9\.]+)/.test(this.agent_lc)) ? parseFloat(RegExp.$2) : -1;
- else if (this.chrome && window.RegExp)
- this.vendver = (/chrome\/([0-9\.]+)/.test(this.agent_lc)) ? parseFloat(RegExp.$1) : 0;
- else if (!this.vendver && this.safari)
- this.vendver = (/(safari|applewebkit)\/([0-9]+)/.test(this.agent_lc)) ? parseInt(RegExp.$2) : 0;
- else if ((!this.vendver && this.mz) || this.agent.indexOf('Camino')>0)
- this.vendver = (/rv:([0-9\.]+)/.test(this.agent)) ? parseFloat(RegExp.$1) : 0;
- else if (this.ie && window.RegExp)
- this.vendver = (/msie\s+([0-9\.]+)/.test(this.agent_lc)) ? parseFloat(RegExp.$1) : 0;
- else if (this.konq && window.RegExp)
- this.vendver = (/khtml\/([0-9\.]+)/.test(this.agent_lc)) ? parseFloat(RegExp.$1) : 0;
+ if (!this.vendver) {
+ // common version strings
+ this.vendver = /(opera|opr|khtml|chrome|safari|applewebkit|msie)(\s|\/)([0-9\.]+)/.test(this.agent_lc) ? parseFloat(RegExp.$3) : 0;
+
+ // any other (Mozilla, Camino, IE>=11)
+ if (!this.vendver)
+ this.vendver = /rv:([0-9\.]+)/.test(this.agent) ? parseFloat(RegExp.$1) : 0;
+ }
// get real language out of safari's user agent
if (this.safari && (/;\s+([a-z]{2})-[a-z]{2}\)/.test(this.agent_lc)))
this.lang = RegExp.$1;
- this.mobile = this.agent_lc.match(/iphone|ipad|ipod|android|blackberry|iemobile|opera mini|opera mobi/);
- this.dhtml = ((this.ie4 && this.win) || this.ie5 || this.ie6 || this.ns4 || this.mz);
- this.vml = (this.win && this.ie && this.dom && !this.opera);
- this.pngalpha = (this.mz || (this.opera && this.vendver >= 6) || (this.ie && this.mac && this.vendver >= 5) ||
- (this.ie && this.win && this.vendver >= 5.5) || this.safari);
- this.opacity = (this.mz || (this.ie && this.vendver >= 5.5 && !this.opera) || (this.safari && this.vendver >= 100));
+ this.tablet = /ipad|android|xoom|sch-i800|playbook|tablet|kindle/i.test(this.agent_lc);
+ this.mobile = /iphone|ipod|blackberry|iemobile|opera mini|opera mobi|mobile/i.test(this.agent_lc);
+ this.touch = this.mobile || this.tablet;
this.cookies = n.cookieEnabled;
// test for XMLHTTP support
@@ -122,11 +131,13 @@
classname += ' iphone';
else if (this.ipad)
classname += ' ipad';
- else if (this.safari || this.chrome)
+ else if (this.webkit)
classname += ' webkit';
if (this.mobile)
classname += ' mobile';
+ if (this.tablet)
+ classname += ' tablet';
if (document.documentElement)
document.documentElement.className += classname;
@@ -251,19 +262,43 @@
},
/**
- * Prevent event propagation and bubbeling
+ * Prevent event propagation and bubbling
*/
cancel: function(evt)
{
var e = evt ? evt : window.event;
+
if (e.preventDefault)
e.preventDefault();
+ else
+ e.returnValue = false;
+
if (e.stopPropagation)
e.stopPropagation();
e.cancelBubble = true;
- e.returnValue = false;
+
return false;
+},
+
+/**
+ * Determine whether the given event was trigered from keyboard
+ */
+is_keyboard: function(e)
+{
+ return e && (
+ (e.mozInputSource && e.mozInputSource == e.MOZ_SOURCE_KEYBOARD) ||
+ (!e.pageX && (e.pageY || 0) <= 0 && !e.clientX && (e.clientY || 0) <= 0)
+ );
+},
+
+/**
+ * Accept event if triggered from keyboard action (e.g. <Enter>)
+ */
+keyboard_only: function(e)
+{
+ console.log(e);
+ return rcube_event.is_keyboard(e) ? true : rcube_event.cancel(e);
},
touchevent: function(e)
@@ -289,7 +324,6 @@
*
* @param {String} Event name
* @param {Function} Handler function
- * @return Listener ID (used to remove this handler later on)
*/
addEventListener: function(evt, func, obj)
{
@@ -298,8 +332,9 @@
if (!this._events[evt])
this._events[evt] = [];
- var e = {func:func, obj:obj ? obj : window};
- this._events[evt][this._events[evt].length] = e;
+ this._events[evt].push({func:func, obj:obj ? obj : window});
+
+ return this; // chainable
},
/**
@@ -327,13 +362,17 @@
triggerEvent: function(evt, e)
{
var ret, h;
+
if (e === undefined)
e = this;
else if (typeof e === 'object')
e.event = evt;
- if (this._events && this._events[evt] && !this._event_exec) {
- this._event_exec = true;
+ if (!this._event_exec)
+ this._event_exec = {};
+
+ if (this._events && this._events[evt] && !this._event_exec[evt]) {
+ this._event_exec[evt] = true;
for (var i=0; i < this._events[evt].length; i++) {
if ((h = this._events[evt][i])) {
if (typeof h.func === 'function')
@@ -356,7 +395,8 @@
}
}
- this._event_exec = false;
+ delete this._event_exec[evt];
+
if (e.event) {
try {
delete e.event;
@@ -370,117 +410,6 @@
}
}; // end rcube_event_engine.prototype
-
-
-
-/**
- * Roundcube generic layer (floating box) class
- *
- * @constructor
- */
-function rcube_layer(id, attributes)
-{
- this.name = id;
-
- // create a new layer in the current document
- this.create = function(arg)
- {
- var l = (arg.x) ? arg.x : 0,
- t = (arg.y) ? arg.y : 0,
- w = arg.width,
- h = arg.height,
- z = arg.zindex,
- vis = arg.vis,
- parent = arg.parent,
- obj = document.createElement('DIV');
-
- obj.id = this.name;
- obj.style.position = 'absolute';
- obj.style.visibility = (vis) ? (vis==2) ? 'inherit' : 'visible' : 'hidden';
- obj.style.left = l+'px';
- obj.style.top = t+'px';
- if (w)
- obj.style.width = w.toString().match(/\%$/) ? w : w+'px';
- if (h)
- obj.style.height = h.toString().match(/\%$/) ? h : h+'px';
- if (z)
- obj.style.zIndex = z;
-
- if (parent)
- parent.appendChild(obj);
- else
- document.body.appendChild(obj);
-
- this.elm = obj;
- };
-
- // create new layer
- if (attributes != null) {
- this.create(attributes);
- this.name = this.elm.id;
- }
- else // just refer to the object
- this.elm = document.getElementById(id);
-
- if (!this.elm)
- return false;
-
-
- // ********* layer object properties *********
-
- this.css = this.elm.style;
- this.event = this.elm;
- this.width = this.elm.offsetWidth;
- this.height = this.elm.offsetHeight;
- this.x = parseInt(this.elm.offsetLeft);
- this.y = parseInt(this.elm.offsetTop);
- this.visible = (this.css.visibility=='visible' || this.css.visibility=='show' || this.css.visibility=='inherit') ? true : false;
-
-
- // ********* layer object methods *********
-
- // move the layer to a specific position
- this.move = function(x, y)
- {
- this.x = x;
- this.y = y;
- this.css.left = Math.round(this.x)+'px';
- this.css.top = Math.round(this.y)+'px';
- };
-
- // change the layers width and height
- this.resize = function(w,h)
- {
- this.css.width = w+'px';
- this.css.height = h+'px';
- this.width = w;
- this.height = h;
- };
-
- // show or hide the layer
- this.show = function(a)
- {
- if(a == 1) {
- this.css.visibility = 'visible';
- this.visible = true;
- }
- else if(a == 2) {
- this.css.visibility = 'inherit';
- this.visible = true;
- }
- else {
- this.css.visibility = 'hidden';
- this.visible = false;
- }
- };
-
- // write new content into a Layer
- this.write = function(cont)
- {
- this.elm.innerHTML = cont;
- };
-
-};
// check if input is a valid email address
@@ -537,7 +466,7 @@
for (var key in obj) {
if (obj[key] && typeof obj[key] === 'object')
- out[key] = clone_object(obj[key]);
+ out[key] = rcube_clone_object(obj[key]);
else
out[key] = obj[key];
}
@@ -641,36 +570,6 @@
roundcube_browser.prototype.set_cookie = setCookie;
roundcube_browser.prototype.get_cookie = getCookie;
-// tiny replacement for Firebox functionality
-function rcube_console()
-{
- this.log = function(msg)
- {
- var box = rcube_find_object('dbgconsole');
-
- if (box) {
- if (msg.charAt(msg.length-1)=='\n')
- msg += '--------------------------------------\n';
- else
- msg += '\n--------------------------------------\n';
-
- // Konqueror doesn't allow to just change the value of hidden element
- if (bw.konq) {
- box.innerText += msg;
- box.value = box.innerText;
- } else
- box.value += msg;
- }
- };
-
- this.reset = function()
- {
- var box = rcube_find_object('dbgconsole');
- if (box)
- box.innerText = box.value = '';
- };
-};
-
var bw = new roundcube_browser();
bw.set_html_class();
@@ -700,24 +599,18 @@
return tzo;
}
-// Make getElementById() case-sensitive on IE
-if (bw.ie) {
- document._getElementById = document.getElementById;
- document.getElementById = function(id) {
- var i = 0, obj = document._getElementById(id);
-
- if (obj && obj.id != id)
- while ((obj = document.all[i]) && obj.id != id)
- i++;
-
- return obj;
- }
+// define String's startsWith() method for old browsers
+if (!String.prototype.startsWith) {
+ String.prototype.startsWith = function(search, position) {
+ position = position || 0;
+ return this.slice(position, search.length) === search;
+ };
}
// jQuery plugin to emulate HTML5 placeholder attributes on input elements
jQuery.fn.placeholder = function(text) {
return this.each(function() {
- var elem = $(this);
+ var active = false, elem = $(this);
this.title = text;
// Try HTML5 placeholder attribute first
@@ -742,8 +635,9 @@
elem[(active ? 'addClass' : 'removeClass')]('placeholder').attr('spellcheck', active);
});
- // Do not blur currently focused element
- if (this != document.activeElement)
+ // Do not blur currently focused element (catch exception: #1489008)
+ try { active = this == document.activeElement; } catch(e) {}
+ if (!active)
elem.blur();
}
});
--
Gitblit v1.9.1