Changeset 4912

Timestamp:

01/12/10 09:50:39 (3 years ago)

Author:

garry.yao

Message:

Enable ARIA support for wysiwyg editing block.

Location:

CKEditor/branches/features/aria/_source

Files:

• lang/en.js (modified) (1 diff)
• plugins/wysiwygarea/plugin.js (modified) (4 diffs)

CKEditor/branches/features/aria/_source/lang/en.js

@@ -33 +33 @@
          */
         editorTitle             : 'Rich text editor, %1',
+        editorVoiceLabel : 'Press ALT+F10 moves to toolbar, ALT+F11 moves to elementspath bar.',
 
         // Toolbar buttons without dialogs.

CKEditor/branches/features/aria/_source/plugins/wysiwygarea/plugin.js

@@ -242 +242 @@
                                 ? editor.config.enterMode == CKEDITOR.ENTER_DIV ? 'div' : 'p' : false;
 
+                        var frameLabel = editor.lang.editorTitle.replace( '%1', editor.name ),
+                                 frameDescriptiveLabel = editor.lang.editorVoiceLabel;
+
                         editor.on( 'editingBlockReady', function()
                                 {
                                         var mainElement,
-                                                fieldset,
+                                                label,
                                                 iframe,
                                                 isLoadingData,
@@ -260 +263 @@
                                                 if ( iframe )
                                                         iframe.remove();
-                                                if ( fieldset )
-                                                        fieldset.remove();
+                                                if ( label )
+                                                        label.remove();
 
                                                 frameLoaded = 0;
+
+                                                // Accessibility label for iframe document.
+                                                var labelId = editor.name + '_editing_frame_label',
+                                                         descriptionId = editor.name + '_editing_frame_desc';
+
+                                                label = CKEDITOR.dom.element.createFromHtml(
+                                                        '<div style="display:none">' +
+                                                                '<span id="' + labelId + '">' +
+                                                                        CKEDITOR.tools.htmlEncode( frameLabel ) +
+                                                                '</span>' +
+                                                                '<span id="' + descriptionId + '">' +
+                                                                        CKEDITOR.tools.htmlEncode( frameDescriptiveLabel ) +
+                                                                '</span>' +
+                                                        '</div>'
+                                                        , CKEDITOR.document );
 
                                                 iframe = CKEDITOR.dom.element.createFromHtml( '<iframe' +
@@ -277 +295 @@
                                                         ' tabIndex="-1"' +
                                                         ' allowTransparency="true"' +
+                                                        ' role="textbox"'        +
+                                                        ' aria-multiline="true"'        +
+                                                        ' aria-labelledby="' + labelId + '"' +
+                                                        ' aria-describedby="' + descriptionId + '"' +
                                                         '></iframe>' );
 
@@ -295 +317 @@
                                                 } );
 
-                                                var accTitle = editor.lang.editorTitle.replace( '%1', editor.name );
-
-                                                if ( CKEDITOR.env.gecko )
-                                                {
-                                                        // Accessibility attributes for Firefox.
-                                                        mainElement.setAttributes(
-                                                                {
-                                                                        role : 'region',
-                                                                        title : accTitle
-                                                                } );
-                                                        iframe.setAttributes(
-                                                                {
-                                                                        role : 'region',
-                                                                        title : ' '
-                                                                } );
-                                                }
-                                                else if ( CKEDITOR.env.webkit )
-                                                {
-                                                        iframe.setAttribute( 'title', accTitle );       // Safari 4
-                                                        iframe.setAttribute( 'name', accTitle );        // Safari 3
-                                                }
-                                                else if ( CKEDITOR.env.ie )
-                                                {
-                                                        // Accessibility label for IE.
-                                                        fieldset = CKEDITOR.dom.element.createFromHtml(
-                                                                '<fieldset style="height:100%' +
-                                                                ( CKEDITOR.env.ie && CKEDITOR.env.quirks ? ';position:relative' : '' ) +
-                                                                '">' +
-                                                                        '<legend style="display:block;width:0;height:0;overflow:hidden;' +
-                                                                        ( CKEDITOR.env.ie && CKEDITOR.env.quirks ? 'position:absolute' : '' ) +
-                                                                        '">' +
-                                                                                CKEDITOR.tools.htmlEncode( accTitle ) +
-                                                                        '</legend>' +
-                                                                '</fieldset>'
-                                                                , CKEDITOR.document );
-                                                        iframe.appendTo( fieldset );
-                                                        fieldset.appendTo( mainElement );
-                                                }
-
-                                                if ( !CKEDITOR.env.ie )
-                                                        mainElement.append( iframe );
+                                                mainElement.append( iframe );
+                                                label.insertBefore( iframe );
                                         };