diff --git a/KeyNav.js b/KeyNav.js index d761bbf68c..79f9ea154b 100644 --- a/KeyNav.js +++ b/KeyNav.js @@ -39,12 +39,13 @@ define([ * * To use this mixin, the subclass must: * - * - Implement one method for each keystroke that subclass wants to handle, with names based on the key names - * defined by https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key. For example, `DOWN_ARROW` --> - * `downKeyHandler()`. - * The method takes two parameters: the events, and the currently navigated node. + * - Implement one method for each keystroke that the subclass wants to handle. + * The methods for up and down arrow keys are `upKeyHandler() and `downKeyHandler()`. * For BIDI support, the left and right arrows are handled specially, mapped to the `previousKeyHandler()` * and `nextKeyHandler()` methods in LTR mode, or reversed in RTL mode. + * Otherwise, the method name is based on the key names + * defined by https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key, for example `homeKeyHandler()`. + * The method takes two parameters: the event, and the currently navigated node. * Most subclasses will want to implement either `previousKeyHandler()` * and `nextKeyHandler()`, or `downKeyHandler()` and `upKeyHandler()`. * - Set all navigable descendants' initial tabIndex to "-1"; both initial descendants and any @@ -412,7 +413,7 @@ define([ _keynavKeyDownHandler: function (evt) { // Ignore left, right, home, end, and space on controls if (takesInput(evt.target) && - (evt.key === "Left" || evt.key === "Right" || + (evt.key === "ArrowLeft" || evt.key === "ArrowRight" || evt.key === "Home" || evt.key === "End" || evt.key === "Spacebar")) { return; } @@ -442,12 +443,16 @@ define([ // Get name of method to call var methodName; switch (evt.key) { - case "Left": + case "ArrowLeft": methodName = this.effectiveDir === "rtl" ? "nextKeyHandler" : "previousKeyHandler"; break; - case "Right": + case "ArrowRight": methodName = this.effectiveDir === "rtl" ? "previousKeyHandler" : "nextKeyHandler"; break; + case "ArrowUp": + case "ArrowDown": + methodName = evt.key.charAt(5).toLowerCase() + evt.key.substr(6) + "KeyHandler"; + break; default: methodName = evt.key.charAt(0).toLowerCase() + evt.key.substr(1) + "KeyHandler"; } diff --git a/on.js b/on.js index 459fc69b4c..6c87c36c19 100644 --- a/on.js +++ b/on.js @@ -17,7 +17,7 @@ define(function () { capture = true; } - // Shim support for event.key, and fix some wrong event.key values on FF and Android 4.2. + // Shim support for Event.key, and fix some wrong/outdated Event.key values if (/^key(down|press|up)$/.test(type)) { var origFunc = callback; callback = function (event) { @@ -33,6 +33,14 @@ define(function () { // fix for FF 34 " ": "Spacebar", + // fix for old key names, see https://www.w3.org/Bugs/Public/show_bug.cgi?id=22084 + "Apps": "ContextMenu", + "Left": "ArrowLeft", + "Down": "ArrowDown", + "Right": "ArrowRight", + "Up": "ArrowUp", + "Del": "Delete", + // fix for Android 4.2 "U+00007F": "Backspace" }[key] || key.replace(/^U\+0*(.*)$/, function (all, hexString) { @@ -46,8 +54,12 @@ define(function () { if (event.key !== fixedKey) { // A simple "event.key = fixedKey" doesn't work on FF31 (for " " --> "Spacebar" conversion). - Object.defineProperty(event, "key", {value: fixedKey, enumerable: true}); + // And Object.defineProperty(event, "key", {value: fixedKey}); (for "Down" --> "ArrowDown") + // doesn't work on IE. + console.log("defineProp"); + Object.defineProperty(event, "key", {get: function () { return fixedKey; }}); } + console.log("fixedKey = " + fixedKey + ", event.key =" + event.key); origFunc(event); }; diff --git a/tests/functional/on.js b/tests/functional/on.js index 53c1405118..7da2182b70 100644 --- a/tests/functional/on.js +++ b/tests/functional/on.js @@ -40,10 +40,10 @@ define([ return this.remote.execute("document.getElementById('key').focus();") .pressKeys(keys.ARROW_DOWN) .execute("return keydown_log.value;").then(function (log) { - assert.strictEqual(log, "Down"); + assert.strictEqual(log, "ArrowDown"); }) .execute("return keyup_log.value;").then(function (log) { - assert.strictEqual(log, "Down"); + assert.strictEqual(log, "ArrowDown"); }) .pressKeys(keys.TAB) .execute("return keydown_log.value;").then(function (log) {