1 /**

     2  * KeyboardNavigation.js

     3  *

     4  * Copyright, Moxiecode Systems AB

     5  * Released under LGPL License.

     6  *

     7  * License: http://www.tinymce.com/license

     8  * Contributing: http://www.tinymce.com/contributing

     9  */

    10 

    11 /**

    12  * This class handles keyboard navigation of controls and elements.

    13  *

    14  * @class tinymce.ui.KeyboardNavigation

    15  */

    16 define("tinymce/ui/KeyboardNavigation", [

    17 ], function() {

    18 	"use strict";

    19 

    20 	/**

    21 	 * This class handles all keyboard navigation for WAI-ARIA support. Each root container

    22 	 * gets an instance of this class.

    23 	 *

    24 	 * @constructor

    25 	 */

    26 	return function(settings) {

    27 		var root = settings.root, focusedElement, focusedControl;

    28 

    29 		try {

    30 			focusedElement = document.activeElement;

    31 		} catch (ex) {

    32 			// IE sometimes fails to return a proper element

    33 			focusedElement = document.body;

    34 		}

    35 

    36 		focusedControl = root.getParentCtrl(focusedElement);

    37 

    38 		/**

    39 		 * Returns the currently focused elements wai aria role of the currently

    40 		 * focused element or specified element.

    41 		 *

    42 		 * @private

    43 		 * @param {Element} elm Optional element to get role from.

    44 		 * @return {String} Role of specified element.

    45 		 */

    46 		function getRole(elm) {

    47 			elm = elm || focusedElement;

    48 

    49 			return elm && elm.getAttribute('role');

    50 		}

    51 

    52 		/**

    53 		 * Returns the wai role of the parent element of the currently

    54 		 * focused element or specified element.

    55 		 *

    56 		 * @private

    57 		 * @param {Element} elm Optional element to get parent role from.

    58 		 * @return {String} Role of the first parent that has a role.

    59 		 */

    60 		function getParentRole(elm) {

    61 			var role, parent = elm || focusedElement;

    62 

    63 			while ((parent = parent.parentNode)) {

    64 				if ((role = getRole(parent))) {

    65 					return role;

    66 				}

    67 			}

    68 		}

    69 

    70 		/**

    71 		 * Returns a wai aria property by name for example aria-selected.

    72 		 *

    73 		 * @private

    74 		 * @param {String} name Name of the aria property to get for example "disabled".

    75 		 * @return {String} Aria property value.

    76 		 */

    77 		function getAriaProp(name) {

    78 			var elm = focusedElement;

    79 

    80 			if (elm) {

    81 				return elm.getAttribute('aria-' + name);

    82 			}

    83 		}

    84 

    85 		/**

    86 		 * Is the element a text input element or not.

    87 		 *

    88 		 * @private

    89 		 * @param {Element} elm Element to check if it's an text input element or not.

    90 		 * @return {Boolean} True/false if the element is a text element or not.

    91 		 */

    92 		function isTextInputElement(elm) {

    93 			var tagName = elm.tagName.toUpperCase();

    94 

    95 			// Notice: since type can be "email" etc we don't check the type

    96 			// So all input elements gets treated as text input elements

    97 			return tagName == "INPUT" || tagName == "TEXTAREA";

    98 		}

    99 

   100 		/**

   101 		 * Returns true/false if the specified element can be focused or not.

   102 		 *

   103 		 * @private

   104 		 * @param {Element} elm DOM element to check if it can be focused or not.

   105 		 * @return {Boolean} True/false if the element can have focus.

   106 		 */

   107 		function canFocus(elm) {

   108 			if (isTextInputElement(elm) && !elm.hidden) {

   109 				return true;

   110 			}

   111 

   112 			if (/^(button|menuitem|checkbox|tab|menuitemcheckbox|option|gridcell)$/.test(getRole(elm))) {

   113 				return true;

   114 			}

   115 

   116 			return false;

   117 		}

   118 

   119 		/**

   120 		 * Returns an array of focusable visible elements within the specified container element.

   121 		 *

   122 		 * @private

   123 		 * @param {Element} elm DOM element to find focusable elements within.

   124 		 * @return {Array} Array of focusable elements.

   125 		 */

   126 		function getFocusElements(elm) {

   127 			var elements = [];

   128 

   129 			function collect(elm) {

   130 				if (elm.nodeType != 1 || elm.style.display == 'none') {

   131 					return;

   132 				}

   133 

   134 				if (canFocus(elm)) {

   135 					elements.push(elm);

   136 				}

   137 

   138 				for (var i = 0; i < elm.childNodes.length; i++) {

   139 					collect(elm.childNodes[i]);

   140 				}

   141 			}

   142 

   143 			collect(elm || root.getEl());

   144 

   145 			return elements;

   146 		}

   147 

   148 		/**

   149 		 * Returns the navigation root control for the specified control. The navigation root

   150 		 * is the control that the keyboard navigation gets scoped to for example a menubar or toolbar group.

   151 		 * It will look for parents of the specified target control or the currently focused control if this option is omitted.

   152 		 *

   153 		 * @private

   154 		 * @param {tinymce.ui.Control} targetControl Optional target control to find root of.

   155 		 * @return {tinymce.ui.Control} Navigation root control.

   156 		 */

   157 		function getNavigationRoot(targetControl) {

   158 			var navigationRoot, controls;

   159 

   160 			targetControl = targetControl || focusedControl;

   161 			controls = targetControl.parents().toArray();

   162 			controls.unshift(targetControl);

   163 

   164 			for (var i = 0; i < controls.length; i++) {

   165 				navigationRoot = controls[i];

   166 

   167 				if (navigationRoot.settings.ariaRoot) {

   168 					break;

   169 				}

   170 			}

   171 

   172 			return navigationRoot;

   173 		}

   174 

   175 		/**

   176 		 * Focuses the first item in the specified targetControl element or the last aria index if the

   177 		 * navigation root has the ariaRemember option enabled.

   178 		 *

   179 		 * @private

   180 		 * @param {tinymce.ui.Control} targetControl Target control to focus the first item in.

   181 		 */

   182 		function focusFirst(targetControl) {

   183 			var navigationRoot = getNavigationRoot(targetControl);

   184 			var focusElements = getFocusElements(navigationRoot.getEl());

   185 

   186 			if (navigationRoot.settings.ariaRemember && "lastAriaIndex" in navigationRoot) {

   187 				moveFocusToIndex(navigationRoot.lastAriaIndex, focusElements);

   188 			} else {

   189 				moveFocusToIndex(0, focusElements);

   190 			}

   191 		}

   192 

   193 		/**

   194 		 * Moves the focus to the specified index within the elements list.

   195 		 * This will scope the index to the size of the element list if it changed.

   196 		 *

   197 		 * @private

   198 		 * @param {Number} idx Specified index to move to.

   199 		 * @param {Array} elements Array with dom elements to move focus within.

   200 		 * @return {Number} Input index or a changed index if it was out of range.

   201 		 */

   202 		function moveFocusToIndex(idx, elements) {

   203 			if (idx < 0) {

   204 				idx = elements.length - 1;

   205 			} else if (idx >= elements.length) {

   206 				idx = 0;

   207 			}

   208 

   209 			if (elements[idx]) {

   210 				elements[idx].focus();

   211 			}

   212 

   213 			return idx;

   214 		}

   215 

   216 		/**

   217 		 * Moves the focus forwards or backwards.

   218 		 *

   219 		 * @private

   220 		 * @param {Number} dir Direction to move in positive means forward, negative means backwards.

   221 		 * @param {Array} elements Optional array of elements to move within defaults to the current navigation roots elements.

   222 		 */

   223 		function moveFocus(dir, elements) {

   224 			var idx = -1, navigationRoot = getNavigationRoot();

   225 

   226 			elements = elements || getFocusElements(navigationRoot.getEl());

   227 

   228 			for (var i = 0; i < elements.length; i++) {

   229 				if (elements[i] === focusedElement) {

   230 					idx = i;

   231 				}

   232 			}

   233 

   234 			idx += dir;

   235 			navigationRoot.lastAriaIndex = moveFocusToIndex(idx, elements);

   236 		}

   237 

   238 		/**

   239 		 * Moves the focus to the left this is called by the left key.

   240 		 *

   241 		 * @private

   242 		 */

   243 		function left() {

   244 			var parentRole = getParentRole();

   245 

   246 			if (parentRole == "tablist") {

   247 				moveFocus(-1, getFocusElements(focusedElement.parentNode));

   248 			} else if (focusedControl.parent().submenu) {

   249 				cancel();

   250 			} else {

   251 				moveFocus(-1);

   252 			}

   253 		}

   254 

   255 		/**

   256 		 * Moves the focus to the right this is called by the right key.

   257 		 *

   258 		 * @private

   259 		 */

   260 		function right() {

   261 			var role = getRole(), parentRole = getParentRole();

   262 

   263 			if (parentRole == "tablist") {

   264 				moveFocus(1, getFocusElements(focusedElement.parentNode));

   265 			} else if (role == "menuitem" && parentRole == "menu" && getAriaProp('haspopup')) {

   266 				enter();

   267 			} else {

   268 				moveFocus(1);

   269 			}

   270 		}

   271 

   272 		/**

   273 		 * Moves the focus to the up this is called by the up key.

   274 		 *

   275 		 * @private

   276 		 */

   277 		function up() {

   278 			moveFocus(-1);

   279 		}

   280 

   281 		/**

   282 		 * Moves the focus to the up this is called by the down key.

   283 		 *

   284 		 * @private

   285 		 */

   286 		function down() {

   287 			var role = getRole(), parentRole = getParentRole();

   288 

   289 			if (role == "menuitem" && parentRole == "menubar") {

   290 				enter();

   291 			} else if (role == "button" && getAriaProp('haspopup')) {

   292 				enter({key: 'down'});

   293 			} else {

   294 				moveFocus(1);

   295 			}

   296 		}

   297 

   298 		/**

   299 		 * Moves the focus to the next item or previous item depending on shift key.

   300 		 *

   301 		 * @private

   302 		 * @param {DOMEvent} e DOM event object.

   303 		 */

   304 		function tab(e) {

   305 			var parentRole = getParentRole();

   306 

   307 			if (parentRole == "tablist") {

   308 				var elm = getFocusElements(focusedControl.getEl('body'))[0];

   309 

   310 				if (elm) {

   311 					elm.focus();

   312 				}

   313 			} else {

   314 				moveFocus(e.shiftKey ? -1 : 1);

   315 			}

   316 		}

   317 

   318 		/**

   319 		 * Calls the cancel event on the currently focused control. This is normally done using the Esc key.

   320 		 *

   321 		 * @private

   322 		 */

   323 		function cancel() {

   324 			focusedControl.fire('cancel');

   325 		}

   326 

   327 		/**

   328 		 * Calls the click event on the currently focused control. This is normally done using the Enter/Space keys.

   329 		 *

   330 		 * @private

   331 		 * @param {Object} aria Optional aria data to pass along with the enter event.

   332 		 */

   333 		function enter(aria) {

   334 			aria = aria || {};

   335 			focusedControl.fire('click', {target: focusedElement, aria: aria});

   336 		}

   337 

   338 		root.on('keydown', function(e) {

   339 			function handleNonTabOrEscEvent(e, handler) {

   340 				// Ignore non tab keys for text elements

   341 				if (isTextInputElement(focusedElement)) {

   342 					return;

   343 				}

   344 

   345 				if (handler(e) !== false) {

   346 					e.preventDefault();

   347 				}

   348 			}

   349 

   350 			if (e.isDefaultPrevented()) {

   351 				return;

   352 			}

   353 

   354 			switch (e.keyCode) {

   355 				case 37: // DOM_VK_LEFT

   356 					handleNonTabOrEscEvent(e, left);

   357 					break;

   358 

   359 				case 39: // DOM_VK_RIGHT

   360 					handleNonTabOrEscEvent(e, right);

   361 					break;

   362 

   363 				case 38: // DOM_VK_UP

   364 					handleNonTabOrEscEvent(e, up);

   365 					break;

   366 

   367 				case 40: // DOM_VK_DOWN

   368 					handleNonTabOrEscEvent(e, down);

   369 					break;

   370 

   371 				case 27: // DOM_VK_ESCAPE

   372 					cancel();

   373 					break;

   374 

   375 				case 14: // DOM_VK_ENTER

   376 				case 13: // DOM_VK_RETURN

   377 				case 32: // DOM_VK_SPACE

   378 					handleNonTabOrEscEvent(e, enter);

   379 					break;

   380 

   381 				case 9: // DOM_VK_TAB

   382 					if (tab(e) !== false) {

   383 						e.preventDefault();

   384 					}

   385 					break;

   386 			}

   387 		});

   388 

   389 		root.on('focusin', function(e) {

   390 			focusedElement = e.target;

   391 			focusedControl = e.control;

   392 		});

   393 

   394 		return {

   395 			focusFirst: focusFirst

   396 		};

   397 	};

   398 });