Added WAI-ARIA support for the main UI and dialogs this feature was c…

…ontributed by Ephox.

.gitignore

@@ -4,12 +4,15 @@ tmp
 docs
 .settings
 .project
+.externalToolBuilders
 *~
 *.diff
 *.patch
 *.bak
 *.log
+*.swp
 .DS_Store
+.project
 editor_plugin.js
 editor_template.js
 jscripts/tiny_mce/jquery.tinymce.js
@@ -19,3 +22,4 @@ jscripts/tiny_mce/tiny_mce_jquery_src.js
 jscripts/tiny_mce/tiny_mce_prototype.js
 jscripts/tiny_mce/tiny_mce_prototype_src.js
 jscripts/tiny_mce/tiny_mce_src.js
+build-utils

build.xml

@@ -91,6 +91,7 @@
 			<fileset dir="${classes_dir}" includes="dom/RangeUtils.js" />
 
 			<!-- tinymce.ui.* -->
+			<fileset dir="${classes_dir}" includes="ui/KeyboardNavigation.js" />
 			<fileset dir="${classes_dir}" includes="ui/Control.js" />
 			<fileset dir="${classes_dir}" includes="ui/Container.js" />
 			<fileset dir="${classes_dir}" includes="ui/Separator.js" />
@@ -103,6 +104,7 @@
 			<fileset dir="${classes_dir}" includes="ui/MenuButton.js" />
 			<fileset dir="${classes_dir}" includes="ui/SplitButton.js" />
 			<fileset dir="${classes_dir}" includes="ui/ColorSplitButton.js" />
+			<fileset dir="${classes_dir}" includes="ui/ToolbarGroup.js" />
 			<fileset dir="${classes_dir}" includes="ui/Toolbar.js" />
 
 			<!-- tinymce.* -->

changelog.txt

@@ -1,4 +1,5 @@
 Version 3.4b3 (2011-01-xx)
+	Added WAI-ARIA support for the main UI and dialogs this feature was contributed by Ephox.
 	Added iframe support to media plugin in order to handle the new YouTube HTML5 video formats.
 	Fixed bug where anchors would wrap the text contents after it due to a bug in the DomParser logic.
 	Fixed bug where the selected state wouldn't be removed on ListBox controls when a menu item was selected.

jscripts/tiny_mce/classes/AddOnManager.js

@@ -115,7 +115,7 @@
 				return;
 
 			if (u.indexOf('/') != 0 && u.indexOf('://') == -1)
-				u = tinymce.baseURL + '/' +  u;
+				u = tinymce.baseURL + '/' + u;
 
 			t.urls[n] = u.substring(0, u.lastIndexOf('/'));
 

jscripts/tiny_mce/classes/ControlManager.js

@@ -239,7 +239,7 @@
 				c = new tinymce.ui.NativeListBox(id, s);
 			else {
 				cls = cc || t._cls.listbox || tinymce.ui.ListBox;
-				c = new cls(id, s);
+				c = new cls(id, s, ed);
 			}
 
 			t.controls[id] = c;
@@ -303,7 +303,7 @@
 
 			if (s.menu_button) {
 				cls = cc || t._cls.menubutton || tinymce.ui.MenuButton;
-				c = new cls(id, s);
+				c = new cls(id, s, ed);
 				ed.onMouseDown.add(c.hideMenu, c);
 			} else {
 				cls = t._cls.button || tinymce.ui.Button;
@@ -368,7 +368,7 @@
 
 			id = t.prefix + id;
 			cls = cc || t._cls.splitbutton || tinymce.ui.SplitButton;
-			c = t.add(new cls(id, s));
+			c = t.add(new cls(id, s, ed));
 			ed.onMouseDown.add(c.hideMenu, c);
 
 			return c;
@@ -417,7 +417,7 @@
 
 			id = t.prefix + id;
 			cls = cc || t._cls.colorsplitbutton || tinymce.ui.ColorSplitButton;
-			c = new cls(id, s);
+			c = new cls(id, s, ed);
 			ed.onMouseDown.add(c.hideMenu, c);
 
 			// Remove the menu element when the editor is removed
@@ -458,13 +458,25 @@
 
 			id = t.prefix + id;
 			cls = cc || t._cls.toolbar || tinymce.ui.Toolbar;
-			c = new cls(id, s);
+			c = new cls(id, s, t.editor);
 
 			if (t.get(id))
 				return null;
 
 			return t.add(c);
 		},
+
+		createToolbarGroup : function(id, s, cc) {
+			var c, t = this, cls;
+			id = t.prefix + id;
+			cls = cc || this._cls.toolbarGroup || tinymce.ui.ToolbarGroup;
+			c = new cls(id, s, t.editor);
+
+			if (t.get(id))
+				return null;
+
+			return t.add(c);
+		},
 
 		/**
 		 * Creates a separator control instance.

jscripts/tiny_mce/classes/Editor.js

@@ -1014,6 +1014,8 @@
 
 			tinymce.add(t);
 
+			s.aria_label = s.aria_label || DOM.getAttrib(e, 'aria-label', t.getLang('aria.rich_text_area'));
+
 			/**
 			 * Reference to the theme instance that was used to generate the UI. 
 			 *
@@ -1197,9 +1199,11 @@
 
 			// Create iframe
 			n = DOM.add(o.iframeContainer, 'iframe', {
+				role :"application",
 				id : t.id + "_ifr",
 				src : u || 'javascript:""', // Workaround for HTTPS warning in IE6/7
-				frameBorder : '0',
+				frameBorder : '0', 
+				title : s.aria_label,
 				style : {
 					width : '100%',
 					height : h
@@ -1209,6 +1213,7 @@
 			t.contentAreaContainer = o.iframeContainer;
 			DOM.get(o.editorContainer).style.display = t.orgDisplay;
 			DOM.get(t.id).style.display = 'none';
+			DOM.setAttrib(t.id, 'aria-hidden', true);
 
 			if (!tinymce.relaxedDomain || !u)
 				t.setupIframe();

jscripts/tiny_mce/classes/Popup.js

@@ -156,7 +156,7 @@ tinyMCEPopup = {
 				t.getWindowArg('mce_height') - vp.h,
 				t.id || window
 			);
-		}, 0);
+		}, 10);
 	},
 
 	/**
@@ -339,6 +339,9 @@ tinyMCEPopup = {
 				document.title = ti = nv;
 		}
 
+		if (!t.editor.getParam('browser_preferred_colors', false) || !t.isWindow)
+			t.dom.addClass(document.body, 'forceColors');
+
 		document.body.style.display = '';
 
 		// Restore selection in IE when focus is placed on a non textarea or input element of the type text

jscripts/tiny_mce/classes/dom/EventUtils.js

@@ -353,7 +353,7 @@
 		},
 
 		_stoppers : {
-			preventDefault :  function() {
+			preventDefault : function() {
 				this.returnValue = false;
 			},
 

jscripts/tiny_mce/classes/dom/Range.js

@@ -501,7 +501,7 @@
 				frag.appendChild(n);
 
 			startIdx = nodeIndex(startAncestor);
-			++startIdx;  // Because we already traversed it....
+			++startIdx; // Because we already traversed it
 
 			cnt = t[END_OFFSET] - startIdx;
 			n = startAncestor.nextSibling;

jscripts/tiny_mce/classes/firebug/FIREBUG.LICENSE

@@ -0,0 +1,30 @@
+Software License Agreement (BSD License)
+
+Copyright (c) 2007, Parakey Inc.
+All rights reserved.
+
+Redistribution and use of this software in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above
+  copyright notice, this list of conditions and the
+  following disclaimer.
+
+* Redistributions in binary form must reproduce the above
+  copyright notice, this list of conditions and the
+  following disclaimer in the documentation and/or other
+  materials provided with the distribution.
+
+* Neither the name of Parakey Inc. nor the names of its
+  contributors may be used to endorse or promote products
+  derived from this software without specific prior
+  written permission of Parakey Inc.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
+IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
+OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

jscripts/tiny_mce/classes/ui/Button.js

@@ -26,9 +26,10 @@
 		 * @method Button
 		 * @param {String} id Control id for the button.
 		 * @param {Object} s Optional name/value settings object.
+		 * @param {Editor} ed Optional the editor instance this button is for.
 		 */
-		Button : function(id, s) {
-			this.parent(id, s);
+		Button : function(id, s, ed) {
+			this.parent(id, s, ed);
 			this.classPrefix = 'mceButton';
 		},
 
@@ -43,13 +44,15 @@
 			var cp = this.classPrefix, s = this.settings, h, l;
 
 			l = DOM.encode(s.label || '');
-			h = '<a id="' + this.id + '" href="javascript:;" class="' + cp + ' ' + cp + 'Enabled ' + s['class'] + (l ? ' ' + cp + 'Labeled' : '') +'" onmousedown="return false;" onclick="return false;" title="' + DOM.encode(s.title) + '">';
+			h = '<a role="button" id="' + this.id + '" href="javascript:;" class="' + cp + ' ' + cp + 'Enabled ' + s['class'] + (l ? ' ' + cp + 'Labeled' : '') +'" onmousedown="return false;" onclick="return false;" aria-labelledby="' + this.id + '_voice" title="' + DOM.encode(s.title) + '">';
 
 			if (s.image)
-				h += '<img class="mceIcon" src="' + s.image + '" />' + l + '</a>';
+				h += '<img class="mceIcon" src="' + s.image + '" />' + l;
 			else
-				h += '<span class="mceIcon ' + s['class'] + '"></span>' + (l ? '<span class="' + cp + 'Label">' + l + '</span>' : '') + '</a>';
+				h += '<span class="mceIcon ' + s['class'] + '"></span>' + (l ? '<span class="' + cp + 'Label">' + l + '</span>' : '');
 
+			h += '<span class="mceVoiceLabel mceIconOnly" style="display: none;" id="' + this.id + '_voice">' + s.title + '</span>'; 
+			h += '</a>';
 			return h;
 		},
 

jscripts/tiny_mce/classes/ui/ColorSplitButton.js

@@ -26,11 +26,12 @@
 		 * @method ColorSplitButton
 		 * @param {String} id Control id for the color split button.
 		 * @param {Object} s Optional name/value settings object.
+		 * @param {Editor} ed The editor instance this button is for.
 		 */
-		ColorSplitButton : function(id, s) {
+		ColorSplitButton : function(id, s, ed) {
 			var t = this;
 
-			t.parent(id, s);
+			t.parent(id, s, ed);
 
 			/**
 			 * Settings object.
@@ -137,6 +138,7 @@
 			t.onHideMenu.dispatch(t);
 
 			t.isMenuVisible = 0;
+			t.editor.focus();
 		},
 
 		/**
@@ -145,13 +147,13 @@
 		 * @method renderMenu
 		 */
 		renderMenu : function() {
-			var t = this, m, i = 0, s = t.settings, n, tb, tr, w;
+			var t = this, m, i = 0, s = t.settings, n, tb, tr, w, context;
 
-			w = DOM.add(s.menu_container, 'div', {id : t.id + '_menu', 'class' : s['menu_class'] + ' ' + s['class'], style : 'position:absolute;left:0;top:-1000px;'});
+			w = DOM.add(s.menu_container, 'div', {role: 'listbox', id : t.id + '_menu', 'class' : s['menu_class'] + ' ' + s['class'], style : 'position:absolute;left:0;top:-1000px;'});
 			m = DOM.add(w, 'div', {'class' : s['class'] + ' mceSplitButtonMenu'});
 			DOM.add(m, 'span', {'class' : 'mceMenuLine'});
 
-			n = DOM.add(m, 'table', {'class' : 'mceColorSplitMenu'});
+			n = DOM.add(m, 'table', {role: 'presentation', 'class' : 'mceColorSplitMenu'});
 			tb = DOM.add(n, 'tbody');
 
 			// Generate color grid
@@ -165,20 +167,34 @@
 				}
 
 				n = DOM.add(tr, 'td');
-
 				n = DOM.add(n, 'a', {
+					role : 'option',
 					href : 'javascript:;',
 					style : {
 						backgroundColor : '#' + c
 					},
+					'title': t.editor.getLang('colors.' + c, c),
+					_mce_color : '#' + c,
 					'data-mce-color' : '#' + c
 				});
+
+				/*
+				if (t.editor.forcedHighContrastMode) {
+					n = DOM.add(n, 'canvas', { width: 16, height: 16, 'aria-hidden': 'true' });
+					if (n.getContext && (context = n.getContext("2d"))) {
+						context.fillStyle = '#' + c;
+						context.fillRect(0, 0, 16, 16);
+					} else {
+						// No point leaving a canvas element around if it's not supported for drawing on anyway.
+						DOM.remove(n);
+					}
+				}*/
 			});
 
 			if (s.more_colors_func) {
 				n = DOM.add(tb, 'tr');
 				n = DOM.add(n, 'td', {colspan : s.grid_width, 'class' : 'mceMoreColors'});
-				n = DOM.add(n, 'a', {id : t.id + '_more', href : 'javascript:;', onclick : 'return false;', 'class' : 'mceMoreColors'}, s.more_colors_title);
+				n = DOM.add(n, 'a', {role: 'option', id : t.id + '_more', href : 'javascript:;', onclick : 'return false;', 'class' : 'mceMoreColors'}, s.more_colors_title);
 
 				Event.add(n, 'click', function(e) {
 					s.more_colors_func.call(s.more_colors_scope || this);
@@ -187,14 +203,23 @@
 			}
 
 			DOM.addClass(m, 'mceColorSplitMenu');
+
+			new tinymce.ui.KeyboardNavigation({
+				root: t.id + '_menu',
+				items: DOM.select('a', t.id + '_menu'),
+				onCancel: function() {
+					t.hideMenu();
+					t.focus();
+				}
+			});
 
 			// Prevent IE from scrolling and hindering click to occur #4019
 			Event.add(t.id + '_menu', 'mousedown', function(e) {return Event.cancel(e);});
 
 			Event.add(t.id + '_menu', 'click', function(e) {
 				var c;
 
-				e = e.target;
+				e = DOM.getParent(e.target, 'a', tb);
 
 				if (e.nodeName == 'A' && (c = e.getAttribute('data-mce-color')))
 					t.setColor(c);
@@ -212,13 +237,23 @@
 		 * @param {String} c Color code value in hex for example: #FF00FF
 		 */
 		setColor : function(c) {
+			this.displayColor(c);
+			this.hideMenu();
+			this.settings.onselect(c);
+		},
+
+		/**
+		 * Change the currently selected color for the control.
+		 *
+		 * @method displayColor
+		 * @param {String} c Color code value in hex for example: #FF00FF
+		 */
+		displayColor : function(c) {
 			var t = this;
 
 			DOM.setStyle(t.id + '_preview', 'backgroundColor', c);
 
 			t.value = c;
-			t.hideMenu();
-			t.settings.onselect(c);
 		},
 
 		/**

jscripts/tiny_mce/classes/ui/Container.js

@@ -24,8 +24,8 @@ tinymce.create('tinymce.ui.Container:tinymce.ui.Control', {
 	 * @param {String} id Control id to use for the container.
 	 * @param {Object} s Optional name/value settings object.
 	 */
-	Container : function(id, s) {
-		this.parent(id, s);
+	Container : function(id, s, editor) {
+		this.parent(id, s, editor);
 
 		/**
 		 * Array of controls added to the container.