Merge branch 't/9541'

Author: fredck

core/creators/themedui.js

@@ -152,6 +152,9 @@ CKEDITOR.replaceClass = 'ckeditor';
 			// Detach the current editable.
 			editor.editable( 0 );
 
+			// Clear up the mode space.
+			editor.ui.space( 'contents' ).setHtml( '' );
+
 			editor.mode = '';
 		}
 

core/editable.js

@@ -466,6 +466,14 @@
 					});
 				}
 
+				// Apply tab index on demand, with original direction saved.
+				if ( this.isInline() ) {
+
+					// tabIndex of the editable is different than editor's one.
+					// Update the attribute of the editable.
+					this.changeAttr( 'tabindex', editor.tabIndex );
+				}
+
 				// The above is all we'll be doing for a <textarea> editable.
 				if ( this.is( 'textarea' ) )
 					return;
@@ -483,14 +491,6 @@
 				if ( this.getDirection( 1 ) != dir )
 					this.changeAttr( 'dir', dir );
 
-				// Apply tab index on demand, with original direction saved.
-				if ( editor.document.equals( CKEDITOR.document ) ) {
-
-					// tabIndex of the editable is different than editor's one.
-					// Update the attribute of the editable.
-					this.changeAttr( 'tabindex', editor.tabIndex );
-				}
-
 				// Create the content stylesheet for this document.
 				var styles = CKEDITOR.getCss();
 				if ( styles ) {
@@ -913,7 +913,37 @@
 				!isDirty && editor.resetDirty();
 			}
 		});
+	});
+
+
+	CKEDITOR.on( 'instanceCreated', function( evt ) {
+		var editor = evt.editor;
+
+		editor.on( 'mode', function() {
+
+			var editable = editor.editable();
 
+			// Setup proper ARIA roles and properties for inline editable, framed
+			// editable is instead handled by plugin.
+			if ( editable.isInline() ) {
+
+				var ariaLabel = [ this.lang.editor, this.name ].join( ',' );
+
+				editable.changeAttr( 'role', 'textbox' );
+				editable.changeAttr( 'aria-label', ariaLabel );
+				editable.changeAttr( 'title', ariaLabel );
+
+				// Put the voice label in different spaces, depending on element mode, so
+				// the DOM element get auto detached on mode reload or editor destroy.
+				var ct = this.ui.space( this.elementMode == CKEDITOR.ELEMENT_MODE_INLINE ? 'top' : 'contents' );
+				if ( ct ) {
+					var ariaDescId = CKEDITOR.tools.getNextId(),
+						desc = CKEDITOR.dom.element.createFromHtml( '<span id="' + ariaDescId + '" class="cke_voice_label">' + this.lang.common.editorHelp + '</span>' );
+					ct.append( desc );
+					editable.changeAttr( 'aria-describedby', ariaDescId );
+				}
+			}
+		});
 	});
 
 	// #9222: Show text cursor in Gecko.

plugins/sourcearea/plugin.js

@@ -34,15 +34,6 @@
 					},
 					CKEDITOR.tools.cssVendorPrefix( 'tab-size', editor.config.sourceAreaTabSize || 4 ) ) );
 
-				var ariaLabel = [ editor.lang.editor, editor.name ].join( ',' );
-
-				textarea.setAttributes({
-					dir: 'ltr',
-					tabIndex: CKEDITOR.env.webkit ? -1 : editor.tabIndex,
-					'role': 'textbox',
-					'aria-label': ariaLabel
-				});
-
 				textarea.addClass( 'cke_source cke_reset cke_enable_context_menu' );
 
 				editor.ui.space( 'contents' ).append( textarea );
@@ -155,4 +146,4 @@ CKEDITOR.plugins.sourcearea = {
  * @cfg {Number} [sourceAreaTabSize=4]
  * @member CKEDITOR.config
  * @see CKEDITOR.config#dataIndentationChars
- */
+ */