Add basic ARIA support for toolbars and buttons

Fixes #58
liferay · Oct 27, 2014 · 258ce16 · 258ce16
1 parent c426afc
commit 258ce16
Show file tree

Hide file tree

Showing 14 changed files with 247 additions and 13 deletions.
diff --git a/src/core/uicore.js b/src/core/uicore.js
@@ -57,26 +57,61 @@
              * @param {Object} editor The current CKEditor instance.
              */
             init: function(editor) {
-                var handleUI;
+                var handleUI,
+                    handleAria,
+                    ariaState = [],
+                    ariaStatusElement,
+                    uiTasksTimeout;
+
+                ariaStatusElement = this._createAriaStatusElement(editor.id);
+
+                uiTasksTimeout = editor.config.uicore ? editor.config.uicore.timeout : 50;
+
+                handleAria = CKEDITOR.tools.debounce(
+                    function(event) {
+                        ariaStatusElement.innerHTML = ariaState.join('. ');
+                    },
+                    uiTasksTimeout
+                );
 
                 handleUI = CKEDITOR.tools.debounce(
                     function(event) {
+                        ariaState = [];
+
                         if (event.name !== 'keyup' || event.data.$.keyCode !== 27 || editor.config.allowEsc) {
                             editor.fire('editorInteraction', {
                                 nativeEvent: event.data.$,
                                 selectionData: editor.getSelectionData()
                             });
                         }
                     },
-                    editor.config.uicore ? editor.config.uicore.timeout : 50
+                    uiTasksTimeout
                 );
 
+                editor.on('ariaUpdate', function(event) {
+                    ariaState.push(event.data.msg);
+                    handleAria();
+                });
+
                 editor.on('contentDom', function() {
                     var editable = editor.editable();
 
                     editable.attachListener(editable, 'mouseup', handleUI);
                     editable.attachListener(editable, 'keyup', handleUI);
                 });
+            },
+
+            _createAriaStatusElement: function(id) {
+                var statusElement;
+
+                statusElement = document.createElement('div');
+                statusElement.setAttribute('aria-live', 'polite');
+                statusElement.setAttribute('role', 'status');
+                statusElement.setAttribute('id', id + '_aria');
+
+                document.body.appendChild(statusElement);
+
+                return statusElement;
             }
         }
     );

diff --git a/src/ui/yui/src/adapter/yui.js b/src/ui/yui/src/adapter/yui.js
@@ -43,7 +43,6 @@ YUI.add('alloy-editor', function(Y) {
             editor.config.removePlugins = this.get('removePlugins');
             editor.config.extraPlugins = this.get('extraPlugins');
             editor.config.placeholderClass = this.get('placeholderClass');
-            editor.config.title = false;
 
             Y.mix(editor.config, config);
 

diff --git a/src/ui/yui/src/buttons/button-a.js b/src/ui/yui/src/buttons/button-a.js
@@ -506,12 +506,18 @@ YUI.add('button-a', function(Y) {
              */
             _renderLinkUI: function() {
                 var contentBox,
-                    linkContainer;
+                    linkContainer,
+                    strings;
+
+                strings = this.get('strings');
 
                 linkContainer = YNode.create(
                     Lang.sub(
                         this.TPL_LINK_CONTAINER, {
-                            placeholder: this.get('strings').placeholder
+                            back: strings.back,
+                            clear: strings.clear,
+                            confirm: strings.confirm,
+                            placeholder: strings.placeholder
                         }
                     )
                 );
@@ -687,16 +693,16 @@ YUI.add('button-a', function(Y) {
                 '<div class="pull-left btn-group input-wrapper">' +
                 '<span class="input-container">' +
                 '<input class="input-large" type="text" placeholder="{placeholder}"></input>' +
-                '<span class="input-clear">' +
+                '<span aria-label="{clear}" class="input-clear">' +
                 '<i class="alloy-editor-icon-remove"></i>' +
                 '</span>' +
                 '</span>' +
                 '</div>' +
                 '<div class="pull-left btn-group input-close-container">' +
-                '<button class="alloy-editor-button btn btn-default close-link"><i class="alloy-editor-icon-ok"></i></button>' +
+                '<button aria-label="{confirm}" class="alloy-editor-button btn btn-default close-link"><i class="alloy-editor-icon-ok"></i></button>' +
                 '</div>' +
                 '<div class="pull-right btn-group show-buttons-container">' +
-                '<button class="alloy-editor-button btn btn-default switch-to-edit"><i class="alloy-editor-icon-remove"></i></button>' +
+                '<button aria-label="{back}" class="alloy-editor-button btn btn-default switch-to-edit"><i class="alloy-editor-icon-remove"></i></button>' +
                 '</div>' +
                 '</div>'
         }, {
@@ -719,14 +725,21 @@ YUI.add('button-a', function(Y) {
 
                 /**
                  * Collection of strings used to label elements of the button's UI.
-                 * ButtonA provides one string property, to specify the value of link placeholder.
+                 * ButtonA provides string properties to specify the messages for:
+                 *  - Link input placeholder
+                 *  - Button label
+                 *  - Button actions (back, clear and confirm)
                  *
                  * @attribute strings
-                 * @default {placeholder: 'Type or paste link here'}
-                 * @type String
+                 * @default {back: 'Back', clear: 'Clear', confirm: 'Confirm', label: 'Link', placeholder: 'Type or paste link here'}
+                 * @type Object
                  */
                 strings: {
                     value: {
+                        back: 'Back',
+                        clear: 'Clear',
+                        confirm: 'Confirm',
+                        label: 'Link',
                         placeholder: 'Type or paste link here'
                     }
                 }

diff --git a/src/ui/yui/src/buttons/button-base.js b/src/ui/yui/src/buttons/button-base.js
@@ -208,7 +208,8 @@ YUI.add('button-base', function(Y) {
 
             btnSrcNode = YNode.create(
                 Lang.sub(this.TPL_BUTTON, {
-                    content: this.TPL_CONTENT
+                    content: this.TPL_CONTENT,
+                    label: this.get('strings').label
                 })
             );
 
@@ -226,10 +227,25 @@ YUI.add('button-base', function(Y) {
             });
         },
 
-        TPL_BUTTON: '<button class="alloy-editor-button btn btn-default">{content}</button>'
+        TPL_BUTTON: '<button aria-label="{label}" class="alloy-editor-button btn btn-default">{content}</button>'
     };
 
     ButtonBase.ATTRS = {
+        /**
+         * Collection of strings used to label elements of the button's UI.
+         * ButtonBase provides string properties to specify the label of the button.
+         *
+         * @attribute strings
+         * @default {label: 'Button'}
+         * @type Object
+         */
+        strings: {
+            validator: Lang.isObject,
+            value: {
+                label: 'Button'
+            }
+        },
+
         /**
          * Specifies if the button is toggleable, or not.
          * Buttons may be "toggleable" or "push" buttons.

diff --git a/src/ui/yui/src/buttons/button-em.js b/src/ui/yui/src/buttons/button-em.js
@@ -27,6 +27,21 @@ YUI.add('button-em', function(Y) {
             element: {
                 validator: Lang.isString,
                 value: 'em'
+            },
+
+            /**
+             * Collection of strings used to label elements of the button's UI.
+             * ButtonEm provides string properties to specify the label of the button.
+             *
+             * @attribute strings
+             * @default {label: 'Italic'}
+             * @type Object
+             */
+            strings: {
+                validator: Lang.isObject,
+                value: {
+                    label: 'Italic'
+                }
             }
         }
     });

diff --git a/src/ui/yui/src/buttons/button-h1.js b/src/ui/yui/src/buttons/button-h1.js
@@ -27,6 +27,21 @@ YUI.add('button-h1', function(Y) {
             element: {
                 validator: Lang.isString,
                 value: 'h1'
+            },
+
+            /**
+             * Collection of strings used to label elements of the button's UI.
+             * ButtonH1 provides string properties to specify the label of the button.
+             *
+             * @attribute strings
+             * @default {label: 'Heading level 1'}
+             * @type Object
+             */
+            strings: {
+                validator: Lang.isObject,
+                value: {
+                    label: 'Heading level 1'
+                }
             }
         }
     });

diff --git a/src/ui/yui/src/buttons/button-h2.js b/src/ui/yui/src/buttons/button-h2.js
@@ -27,6 +27,21 @@ YUI.add('button-h2', function(Y) {
             element: {
                 validator: Lang.isString,
                 value: 'h2'
+            },
+
+            /**
+             * Collection of strings used to label elements of the button's UI.
+             * ButtonH2 provides string properties to specify the label of the button.
+             *
+             * @attribute strings
+             * @default {label: 'Heading level 2'}
+             * @type Object
+             */
+            strings: {
+                validator: Lang.isObject,
+                value: {
+                    label: 'Heading level 2'
+                }
             }
         }
     });

diff --git a/src/ui/yui/src/buttons/button-image.js b/src/ui/yui/src/buttons/button-image.js
@@ -99,6 +99,21 @@ YUI.add('button-image', function(Y) {
         NS: 'image',
 
         ATTRS: {
+            /**
+             * Collection of strings used to label elements of the button's UI.
+             * ButtonImage provides string properties to specify the label of the button.
+             *
+             * @attribute strings
+             * @default {label: 'Image'}
+             * @type Object
+             */
+            strings: {
+                validator: Lang.isObject,
+                value: {
+                    label: 'Image'
+                }
+            },
+
             /**
              * Specifies if this button will be toggleable, or not.
              * ButtonImage will be not toggleable by default.

diff --git a/src/ui/yui/src/buttons/button-left.js b/src/ui/yui/src/buttons/button-left.js
@@ -76,6 +76,21 @@ YUI.add('button-left', function(Y) {
             element: {
                 validator: Lang.isString,
                 value: 'left'
+            },
+
+            /**
+             * Collection of strings used to label elements of the button's UI.
+             * ButtonLeft provides string properties to specify the label of the button.
+             *
+             * @attribute strings
+             * @default {label: 'Align left'}
+             * @type Object
+             */
+            strings: {
+                validator: Lang.isObject,
+                value: {
+                    label: 'Align left'
+                }
             }
         }
     });

diff --git a/src/ui/yui/src/buttons/button-right.js b/src/ui/yui/src/buttons/button-right.js
@@ -76,6 +76,21 @@ YUI.add('button-right', function(Y) {
             element: {
                 validator: Lang.isString,
                 value: 'right'
+            },
+
+            /**
+             * Collection of strings used to label elements of the button's UI.
+             * ButtonRight provides string properties to specify the label of the button.
+             *
+             * @attribute strings
+             * @default {label: 'Align right'}
+             * @type Object
+             */
+            strings: {
+                validator: Lang.isObject,
+                value: {
+                    label: 'Align right'
+                }
             }
         }
     });

diff --git a/src/ui/yui/src/buttons/button-strong.js b/src/ui/yui/src/buttons/button-strong.js
@@ -26,6 +26,21 @@ YUI.add('button-strong', function(Y) {
             element: {
                 validator: Lang.isString,
                 value: 'strong'
+            },
+
+            /**
+             * Collection of strings used to label elements of the button's UI.
+             * ButtonStrong provides string properties to specify the label of the button.
+             *
+             * @attribute strings
+             * @default {label: 'Bold'}
+             * @type Object
+             */
+            strings: {
+                validator: Lang.isObject,
+                value: {
+                    label: 'Bold'
+                }
             }
         }
     });

diff --git a/src/ui/yui/src/buttons/button-twitter.js b/src/ui/yui/src/buttons/button-twitter.js
@@ -54,6 +54,21 @@ YUI.add('button-twitter', function(Y) {
         NS: 'tweet',
 
         ATTRS: {
+            /**
+             * Collection of strings used to label elements of the button's UI.
+             * ButtonTwitter provides string properties to specify the label of the button.
+             *
+             * @attribute strings
+             * @default {label: 'Tweet'}
+             * @type Object
+             */
+            strings: {
+                validator: Lang.isObject,
+                value: {
+                    label: 'Tweet'
+                }
+            },
+
             /**
              * Specifies if the button is toggleable, or not. ButtonTwitter will be not toggleable by default.
              *

diff --git a/src/ui/yui/src/buttons/button-underline.js b/src/ui/yui/src/buttons/button-underline.js
@@ -29,6 +29,21 @@ YUI.add('button-u', function(Y) {
             element: {
                 validator: Lang.isString,
                 value: 'u'
+            },
+
+            /**
+             * Collection of strings used to label elements of the button's UI.
+             * ButtonU provides string properties to specify the label of the button.
+             *
+             * @attribute strings
+             * @default {label: 'Underline'}
+             * @type Object
+             */
+            strings: {
+                validator: Lang.isObject,
+                value: {
+                    label: 'Underline'
+                }
             }
         }
     });