Changeset 4914

Timestamp:

01/12/10 13:01:38 (3 years ago)

Author:

garry.yao

Message:

Enhance ARIA support for dialogs by describe frequent used keystrokes.

Location:

CKEditor/branches/features/aria/_source

Files:

• lang/en.js (modified) (1 diff)
• plugins/dialog/plugin.js (modified) (1 diff)

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

@@ -33 +33 @@
          */
         editorTitle             : 'Rich text editor, %1',
-        editorWysiwygModeVoiceLabel : 'Wysiwyg mode, press ALT+F10 moves to toolbar, ALT+F11 moves to elementspath bar.SHIFT+F10 opens contextmenu.',
+        editorWysiwygModeVoiceLabel : 'Wysiwyg mode, press ALT+F10 moves to toolbar, ALT+F11 moves to elementspath bar, SHIFT+F10 opens contextmenu.',
         editorSourceModeVoiceLabel : 'Source mode, press ALT+F10 moves to toolbar.',
+        dialogVoiceLabel : 'Press Esc to close dialog, enter to submit dialog, ALT+F10 moves to tab list.',
 
         // Toolbar buttons without dialogs.

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

@@ -136 +136 @@
                 this.parts = themeBuilt.parts;
 
+                var dialogPart = this.parts.dialog,
+                         contentsPart = this.parts.contents,
+                         titleId = this.parts.title.$.id,
+                         descriptiveLabelId = titleId.replace( 'title', 'desc' ),
+                         descriptiveLabel = CKEDITOR.dom.element.createFromHtml( '<label id="' + descriptiveLabelId + '" style="display:none">' + editor.lang.dialogVoiceLabel+ '</label>' );
+
+                descriptiveLabel.insertAfter( contentsPart );
+                contentsPart.setAttributes(
+                {
+                        'role' : 'dialog',
+                        'aria-labelledby' : titleId,
+                        'aria-describedby' : descriptiveLabelId
+                } );
+
                 // Set the startup styles for the dialog, avoiding it enlarging the
                 // page size on the dialog creation.
-                this.parts.dialog.setStyles(
+                dialogPart.setStyles(
                         {
                                 position : CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed',