From 6f9cf841c937a8ea0c31545cc29ed832a0ff7fc0 Mon Sep 17 00:00:00 2001
From: Damyon Wiese <damyon@moodle.com>
Date: Fri, 20 Sep 2013 14:16:47 +0800
Subject: [PATCH] MDL-41870 atto: keyboard navigation for toolbar (arrows)

---
 .../moodle-editor_atto-editor-debug.js        | 93 ++++++++++++++++---
 .../moodle-editor_atto-editor-min.js          |  3 +-
 .../moodle-editor_atto-editor.js              | 93 ++++++++++++++++---
 lib/editor/atto/yui/src/editor/js/editor.js   | 91 ++++++++++++++++--
 .../atto/yui/src/editor/meta/editor.json      |  1 +
 5 files changed, 248 insertions(+), 33 deletions(-)

diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js
index 2ebeb90b866..96ccd495ef5 100644
--- a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js
+++ b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js
@@ -159,19 +159,29 @@ M.editor_atto = M.editor_atto || {
      */
     add_toolbar_menu : function(elementid, plugin, icon, groupname, entries) {
         var toolbar = Y.one('#' + elementid + '_toolbar'),
-            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group');
+            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group'),
+            currentfocus,
+            button;
+
         if (!group) {
             group = Y.Node.create('<div class="atto_group ' + groupname + '_group"></div>');
             toolbar.append(group);
         }
-        var button = Y.Node.create('<button class="atto_' + plugin + '_button atto_hasmenu" ' +
+        button = Y.Node.create('<button class="atto_' + plugin + '_button atto_hasmenu" ' +
                                     'data-editor="' + Y.Escape.html(elementid) + '" ' +
+                                    'tabindex="-1" ' +
                                     'data-menu="' + plugin + '_' + elementid + '" >' +
                                     icon +
                                     '</button>');
 
         group.append(button);
 
+        currentfocus = toolbar.getAttribute('aria-activedescendant');
+        if (!currentfocus) {
+            button.setAttribute('tabindex', '0');
+            toolbar.setAttribute('aria-activedescendant', button.generateID());
+        }
+
         // Save the name of the plugin.
         M.editor_atto.widgets[plugin] = plugin;
 
@@ -228,20 +238,30 @@ M.editor_atto = M.editor_atto || {
      */
     add_toolbar_button : function(elementid, plugin, icon, groupname, handler) {
         var toolbar = Y.one('#' + elementid + '_toolbar'),
-            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group');
+            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group'),
+            button,
+            currentfocus;
+
         if (!group) {
             group = Y.Node.create('<div class="atto_group ' + groupname +'_group"></div>');
             toolbar.append(group);
         }
-        var button = Y.Node.create('<button class="atto_' + plugin + '_button" ' +
-                                   'data-editor="' + Y.Escape.html(elementid) + '" ' +
-                                   'data-plugin="' + Y.Escape.html(plugin) + '" ' +
-                                   'data-handler="' + Y.Escape.html(plugin) + '">' +
-                                    icon +
-                                    '</button>');
+        button = Y.Node.create('<button class="atto_' + plugin + '_button" ' +
+                               'data-editor="' + Y.Escape.html(elementid) + '" ' +
+                               'data-plugin="' + Y.Escape.html(plugin) + '" ' +
+                               'tabindex="-1" ' +
+                               'data-handler="' + Y.Escape.html(plugin) + '">' +
+                               icon +
+                               '</button>');
 
         group.append(button);
 
+        currentfocus = toolbar.getAttribute('aria-activedescendant');
+        if (!currentfocus) {
+            button.setAttribute('tabindex', '0');
+            toolbar.setAttribute('aria-activedescendant', button.generateID());
+        }
+
         // We only need to attach this once.
         if (!M.editor_atto.buttonhandlers[plugin]) {
             Y.one('body').delegate('click', M.editor_atto.buttonclicked_handler, '.atto_' + plugin + '_button');
@@ -294,7 +314,7 @@ M.editor_atto = M.editor_atto || {
                                             'spellcheck="true" ' +
                                             'class="editor_atto"/>');
         var cssfont = '';
-        var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar"/>');
+        var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar" role="toolbar"/>');
 
         // Bleh - why are we sent a url and not the css to apply directly?
         var css = Y.io(params.content_css, { sync: true });
@@ -323,10 +343,61 @@ M.editor_atto = M.editor_atto || {
             textarea.set('value', atto.getHTML());
         });
 
+        // Listen for Arrow left and Arrow right keys.
+        Y.one(Y.config.doc.body).delegate('key',
+                                          this.keyboard_navigation,
+                                          'down:37,39',
+                                          '#' + params.elementid + '_toolbar',
+                                          this,
+                                          params.elementid);
+
         // Save the file picker options for later.
         M.editor_atto.filepickeroptions[params.elementid] = params.filepickeroptions;
     },
 
+    /**
+     * Implement arrow key navigation for the buttons in the toolbar.
+     * @param Event e - the keyboard event.
+     * @param string elementid - the id of the textarea we created this editor from.
+     */
+    keyboard_navigation : function(e, elementid) {
+        var buttons,
+            current,
+            currentid,
+            currentindex;
+
+        e.preventDefault();
+
+        buttons = Y.all('#' + elementid + '_toolbar button');
+        currentid = Y.one('#' + elementid + '_toolbar').getAttribute('aria-activedescendant');
+        if (!currentid) {
+            return;
+        }
+        current = Y.one('#' + currentid);
+        current.setAttribute('tabindex', '-1');
+
+        currentindex = buttons.indexOf(current);
+
+        if (e.keyCode === 37) {
+            // Left
+            currentindex--;
+            if (currentindex < 0) {
+                currentindex = buttons.size()-1;
+            }
+        } else {
+            // Right
+            currentindex++;
+            if (currentindex >= buttons.size()) {
+                currentindex = 0;
+            }
+        }
+
+        current = buttons.item(currentindex);
+        current.setAttribute('tabindex', '0');
+        current.focus();
+        Y.one('#' + elementid + '_toolbar').setAttribute('aria-activedescendant', current.generateID());
+    },
+
     /**
      * Show the filepicker.
      * @param string elementid for this editor instance.
@@ -432,4 +503,4 @@ M.editor_atto = M.editor_atto || {
 };
 
 
-}, '@VERSION@', {"requires": ["node", "io", "overlay", "escape", "moodle-core-notification"]});
+}, '@VERSION@', {"requires": ["node", "io", "overlay", "escape", "event-key", "moodle-core-notification"]});
diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js
index 9ce52aa4a06..21a2acec687 100644
--- a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js
+++ b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js
@@ -1 +1,2 @@
-YUI.add("moodle-editor_atto-editor",function(e,t){M.editor_atto=M.editor_atto||{buttonhandlers:{},menus:{},menuhandlers:{},filepickeroptions:{},widgets:{},showhide_menu_handler:function(e){e.preventDefault();var t=this.getAttribute("disabled"),n=this.getAttribute("data-menu"),r=M.editor_atto.menus[n],i=r.get("bodyContent");r.get("visible")||t?(r.hide(),i.detach("clickoutside")):(i.on("clickoutside",function(e){e.target.ancestor()!==this&&e.target!==this&&r.get("visible")&&(i.detach("clickoutside"),r.hide())},this),r.show())},buttonclicked_handler:function(e){var t=this.getAttribute("data-editor"),n=this.getAttribute("data-plugin"),r=this.getAttribute("data-handler"),i=M.editor_atto.menus[n+"_"+t];i&&i.hide();if(M.editor_atto.is_enabled(t,n))return r=M.editor_atto.buttonhandlers[r],r(e,t)},is_enabled:function(t,n){var r=e.one("#"+t+"_toolbar .atto_"+n+"_button");return!r.hasAttribute("disabled")},disable_all_widgets:function(t){var n,r;for(n in M.editor_atto.widgets)r=e.one("#"+t+"_toolbar .atto_"+n+"_button"),r&&r.setAttribute("disabled","true")},enable_widget:function(t,n){var r=e.one("#"+t+"_toolbar .atto_"+n+"_button");r&&r.removeAttribute("disabled")},enable_all_widgets:function(t){var n,r;for(n in M.editor_atto.widgets)r=e.one("#"+t+"_toolbar .atto_"+n+"_button"),r&&r.removeAttribute("disabled")},add_toolbar_menu:function(t,n,r,i,s){var o=e.one("#"+t+"_toolbar"),u=e.one("#"+t+"_toolbar .atto_group."+i+"_group");u||(u=e.Node.create('<div class="atto_group '+i+'_group"></div>'),o.append(u));var a=e.Node.create('<button class="atto_'+n+'_button atto_hasmenu" '+'data-editor="'+e.Escape.html(t)+'" '+'data-menu="'+n+"_"+t+'" >'+r+"</button>");u.append(a),M.editor_atto.widgets[n]=n;var f=e.Node.create('<div class="atto_'+n+"_menu"+' atto_menu" data-editor="'+e.Escape.html(t)+'"></div>'),l=0,c={};for(l=0;l<s.length;l++)c=s[l],f.append(e.Node.create('<div class="atto_menuentry"><a href="#" class="atto_'+n+"_action_"+l+'" '+'data-editor="'+e.Escape.html(t)+'" '+'data-plugin="'+e.Escape.html(n)+'" '+'data-handler="'+e.Escape.html(n+"_action_"+l)+'">'+c.text+"</a>"+"</div>")),M.editor_atto.buttonhandlers[n+"_action_"+l]||(e.one("body").delegate("click",M.editor_atto.buttonclicked_handler,".atto_"+n+"_action_"+l),M.editor_atto.buttonhandlers[n+"_action_"+l]=c.handler);M.editor_atto.buttonhandlers[n]||(e.one("body").delegate("click",M.editor_atto.showhide_menu_handler,".atto_"+n+"_button"),M.editor_atto.buttonhandlers[n]=!0);var h=new M.core.dialogue({bodyContent:f,visible:!1,width:"14em",zindex:100,lightbox:!1,closeButton:!1,centered:!1,align:{node:a,points:[e.WidgetPositionAlign.TL,e.WidgetPositionAlign.BL]}});M.editor_atto.menus[n+"_"+t]=h,h.render(),h.hide(),h.headerNode.hide()},add_toolbar_button:function(t,n,r,i,s){var o=e.one("#"+t+"_toolbar"),u=e.one("#"+t+"_toolbar .atto_group."+i+"_group");u||(u=e.Node.create('<div class="atto_group '+i+'_group"></div>'),o.append(u));var a=e.Node.create('<button class="atto_'+n+'_button" '+'data-editor="'+e.Escape.html(t)+'" '+'data-plugin="'+e.Escape.html(n)+'" '+'data-handler="'+e.Escape.html(n)+'">'+r+"</button>");u.append(a),M.editor_atto.buttonhandlers[n]||(e.one("body").delegate("click",M.editor_atto.buttonclicked_handler,".atto_"+n+"_button"),M.editor_atto.buttonhandlers[n]=s),M.editor_atto.widgets[n]=n},is_active:function(t){var n=M.editor_atto.get_selection();n.length&&(n=n.pop());var r=null;return n.parentElement?r=e.one(n.parentElement()):r=e.one(n.startContainer),r&&r.ancestor("#"+t+"editable")!==null},focus:function(t){e.one("#"+t+"editable").focus()},init:function(t){var n=e.one("#"+t.elementid),r=e.Node.create('<div id="'+t.elementid+'editable" '+'contenteditable="true" '+'spellcheck="true" '+'class="editor_atto"/>'),i="",s=e.Node.create('<div class="editor_atto_toolbar" id="'+t.elementid+'_toolbar"/>'),o=e.io(t.content_css,{sync:!0}),u=o.responseText.indexOf("font:");u&&(i=o.responseText.substring(u+"font:".length,o.responseText.length-1),r.setStyle("font",i)),r.setStyle("minHeight",1.2*(n.getAttribute("rows")-1)+"em"),r.append(n.get("value")),n.get("parentNode").insert(s,n),n.get("parentNode").insert(r,n),r.setStyle("color",n.getStyle("color")),r.setStyle("lineHeight",n.getStyle("lineHeight")),r.setStyle("fontSize",n.getStyle("fontSize")),n.hide(),r.on("blur",function(){n.set("value",r.getHTML())}),M.editor_atto.filepickeroptions[t.elementid]=t.filepickeroptions},show_filepicker:function(t,n,r){e.use("core_filepicker",function(e){var i=M.editor_atto.filepickeroptions[t][n];i.formcallback=r,i.editor_target=e.one(t),M.core_filepicker.show(e,i)})},get_selection_from_node:function(e){var t;return window.getSelection?(t=document.createRange(),t.setStartBefore(e.getDOMNode()),t.setEndAfter(e.getDOMNode()),[t]):document.selection?(t=document.body.createTextRange(),t.moveToElementText(e.getDOMNode()),t):!1},get_selection:function(){if(window.getSelection){var e=window.getSelection(),t=[],n=0;for(n=0;n<e.rangeCount;n++)t.push(e.getRangeAt(n));return t}return document.selection&&document.selection.createRange?document.selection.createRange():!1},get_selection_parent_node:function(){var e=M.editor_atto.get_selection();if(e.length>0)return e[0].commonAncestorContainer},get_selection_text:function(){var e=M.editor_atto.get_selection();if(e.length>0&&e[0].cloneContents)return e[0].cloneContents()},set_selection:function(e){var t,n;if(window.getSelection){t=window.getSelection(),t.removeAllRanges();for(n=0;n<e.length;n++)t.addRange(e[n])}else document.selection&&e.select&&e.select()}}},"@VERSION@",{requires:["node","io","overlay","escape","moodle-core-notification"]});
+YUI.add("moodle-editor_atto-editor",function(e,t){M.editor_atto=M.editor_atto||{buttonhandlers:{},menus:{},menuhandlers:{},filepickeroptions:{},widgets:{},showhide_menu_handler:function(e){e.preventDefault();var t=this.getAttribute("disabled"),n=this.getAttribute("data-menu"),r=M.editor_atto.menus[n],i=r.get("bodyContent");r.get("visible")||t?(r.hide(),i.detach("clickoutside")):(i.on("clickoutside",function(e){e.target.ancestor()!==this&&e.target!==this&&r.get("visible")&&(i.detach("clickoutside"),r.hide())},this),r.show())},buttonclicked_handler:function(e){var t=this.getAttribute("data-editor"),n=this.getAttribute("data-plugin"),r=this.getAttribute("data-handler"),i=M.editor_atto.menus[n+"_"+t];i&&i.hide();if(M.editor_atto.is_enabled(t,n))return r=M.editor_atto.buttonhandlers[r],r(e,t)},is_enabled:function(t,n){var r=e.one("#"+t+"_toolbar .atto_"+n+"_button");return!r.hasAttribute("disabled")},disable_all_widgets:function(t){var n,r;for(n in M.editor_atto.widgets)r=e.one("#"+t+"_toolbar .atto_"+n+"_button"),r&&r.setAttribute("disabled","true")},enable_widget:function(t,n){var r=e.one("#"+t+"_toolbar .atto_"+n+"_button");r&&r.removeAttribute("disabled")},enable_all_widgets:function(t){var n,r;for(n in M.editor_atto.widgets)r=e.one("#"+t+"_toolbar .atto_"+n+"_button"),r&&r.removeAttribute("disabled")},add_toolbar_menu:function(t,n,r,i,s){var o=e.one("#"+t+"_toolbar"),u=e.one("#"+t+"_toolbar .atto_group."+i+"_group"),a,f;u||(u=e.Node.create('<div class="atto_group '+i+'_group"></div>'),o.append(u)),f=e.Node.create('<button class="atto_'+n+'_button atto_hasmenu" '+'data-editor="'+e.Escape.html(t)+'" '+'tabindex="-1" '+'data-menu="'+n+"_"+t+'" >'+r+"</button>"),u.append(f),a=o.getAttribute("aria-activedescendant"),a||(f.setAttribute("tabindex","0"),o.setAttribute("aria-activedescendant",f.generateID())),M.editor_atto.widgets[n]=n;var l=e.Node.create('<div class="atto_'+n+"_menu"+' atto_menu" data-editor="'+e.Escape.html(t)+'"></div>'),c=0,h={};for(c=0;c<s.length;c++)h=s[c],l.append(e.Node.create('<div class="atto_menuentry"><a href="#" class="atto_'+n+"_action_"+c+'" '+'data-editor="'+e.Escape.html(t)+'" '+'data-plugin="'+e.Escape.html(n)+'" '+'data-handler="'+e.Escape.html(n+"_action_"+c)+'">'+h.text+"</a>"+"</div>")),M.editor_atto.buttonhandlers[n+"_action_"+c]||(e.one("body").delegate("click",M.editor_atto.buttonclicked_handler,".atto_"+n+"_action_"+c),M.editor_atto.buttonhandlers[n+"_action_"+c]=h.handler);M.editor_atto.buttonhandlers[n]||(e.one("body").delegate("click",M.editor_atto.showhide_menu_handler,".atto_"+n+"_button"),M.editor_atto.buttonhandlers[n]=!0);var p=new M.core.dialogue({bodyContent:l,visible:!1,width:"14em",zindex:100,lightbox:!1,closeButton:!1,centered:!1,align:{node:f,points:[e.WidgetPositionAlign.TL,e.WidgetPositionAlign.BL]}});M.editor_atto.menus[n+"_"+t]=p,p.render(),p.hide(),p.headerNode.hide()},add_toolbar_button:function(t,n,r,i,s){var o=e.one("#"+t+"_toolbar"),u=e.one("#"+t+"_toolbar .atto_group."+i+"_group"),a,f;u||(u=e.Node.create('<div class="atto_group '+i+'_group"></div>'),o.append(u)),a=e.Node.create('<button class="atto_'+n+'_button" '+'data-editor="'+e.Escape.html(t)+'" '+'data-plugin="'+e.Escape.html(n)+'" '+'tabindex="-1" '+'data-handler="'+e.Escape.html(n)+'">'+r+"</button>"),u.append(a),f=o.getAttribute("aria-activedescendant"),f||(a.setAttribute("tabindex","0"),o.setAttribute("aria-activedescendant",a.generateID())),M.editor_atto.buttonhandlers[n]||(e.one("body").delegate("click",M.editor_atto.buttonclicked_handler,".atto_"+n+"_button"),M.editor_atto.buttonhandlers[n]=s),M.editor_atto.widgets[n]=n},is_active:function(t){var n=M.editor_atto.get_selection();n.length&&(n=n.pop());var r=null;return n.parentElement?r=e.one(n.parentElement()):r=e.one(n.startContainer),r&&r.ancestor("#"+t+"editable")!==null},focus:function(t){e.one("#"+t+"editable").focus()},init:function(t){var n=e.one("#"+t.elementid),r=e.Node.create('<div id="'+t.elementid+'editable" '+'contenteditable="true" '+'spellcheck="true" '+'class="editor_atto"/>'),i="",s=e.Node.create('<div class="editor_atto_toolbar" id="'+t.elementid+'_toolbar" role="toolbar"/>'),o=e.io(t.content_css,{sync:!0}),u=o.responseText.indexOf("font:");u&&(i=o.responseText.substring(u+"font:".length,o.responseText.length-1),r.setStyle("font",i)),r.setStyle("minHeight",1.2*(n.getAttribute("rows")-1)+"em"),r.append(n.get("value")),n.get("parentNode").insert(s,n),n.get("parentNode").insert(r,n),r.setStyle("color",n.getStyle("color")),r.setStyle("lineHeight",n.getStyle("lineHeight")),r.setStyle("fontSize",n.getStyle("fontSize")),n.hide(),r.on("blur",function(){n.set("value",r.getHTML())}),e.one(e.config.doc.body).delegate("key",this.keyboard_navigation,"down:37,39","#"+t.elementid+"_toolbar",this,t.elementid),M.editor_atto.filepickeroptions[t.elementid]=t.filepickeroptions},keyboard_navigation:function(t,n){var r,i,s,o;t.preventDefault(),r=e.all("#"+n+"_toolbar button"),s=e.one("#"+n+"_toolbar").getAttribute("aria-activedescendant");if(!s)return;i=e.one("#"+s),i.setAttribute("tabindex","-1"),o=r.indexOf(i),t.keyCode===37?(o--,o<0&&(o=r.size()-1)):(o++,o>=r.size()&&(o=0)),i=r.item(o),i.setAttribute("tabindex","0"),i.focus(),e.one("#"+n+"_toolbar").setAttribute("aria-activedescendant",i.generateID())},show_filepicker:function(t,n,r){e.use("core_filepicker",function(e){var i=M.editor_atto.filepickeroptions[t][n];i.formcallback=r,i.editor_target=e.one(t),M.core_filepicker.show(e,i)})},get_selection_from_node:function(e){var t;return window.getSelection?(t=document.createRange(),t.setStartBefore(e.getDOMNode()),t.setEndAfter(e.getDOMNode()),[t]):document.selection?(t=document.body.createTextRange(),t.moveToElementText(e.getDOMNode()),t):!1},get_selection:function(){if(window.getSelection){var e=window.getSelection(),t=[],n=0;for(n=0;n<e.rangeCount;n++)t.push(e.getRangeAt(n));return t}return document.selection&&document.selection.createRange?document.selection.createRange():!1},get_selection_parent_node:function(){var e=M.editor_atto
+.get_selection();if(e.length>0)return e[0].commonAncestorContainer},get_selection_text:function(){var e=M.editor_atto.get_selection();if(e.length>0&&e[0].cloneContents)return e[0].cloneContents()},set_selection:function(e){var t,n;if(window.getSelection){t=window.getSelection(),t.removeAllRanges();for(n=0;n<e.length;n++)t.addRange(e[n])}else document.selection&&e.select&&e.select()}}},"@VERSION@",{requires:["node","io","overlay","escape","event-key","moodle-core-notification"]});
diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js
index 2ebeb90b866..96ccd495ef5 100644
--- a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js
+++ b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js
@@ -159,19 +159,29 @@ M.editor_atto = M.editor_atto || {
      */
     add_toolbar_menu : function(elementid, plugin, icon, groupname, entries) {
         var toolbar = Y.one('#' + elementid + '_toolbar'),
-            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group');
+            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group'),
+            currentfocus,
+            button;
+
         if (!group) {
             group = Y.Node.create('<div class="atto_group ' + groupname + '_group"></div>');
             toolbar.append(group);
         }
-        var button = Y.Node.create('<button class="atto_' + plugin + '_button atto_hasmenu" ' +
+        button = Y.Node.create('<button class="atto_' + plugin + '_button atto_hasmenu" ' +
                                     'data-editor="' + Y.Escape.html(elementid) + '" ' +
+                                    'tabindex="-1" ' +
                                     'data-menu="' + plugin + '_' + elementid + '" >' +
                                     icon +
                                     '</button>');
 
         group.append(button);
 
+        currentfocus = toolbar.getAttribute('aria-activedescendant');
+        if (!currentfocus) {
+            button.setAttribute('tabindex', '0');
+            toolbar.setAttribute('aria-activedescendant', button.generateID());
+        }
+
         // Save the name of the plugin.
         M.editor_atto.widgets[plugin] = plugin;
 
@@ -228,20 +238,30 @@ M.editor_atto = M.editor_atto || {
      */
     add_toolbar_button : function(elementid, plugin, icon, groupname, handler) {
         var toolbar = Y.one('#' + elementid + '_toolbar'),
-            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group');
+            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group'),
+            button,
+            currentfocus;
+
         if (!group) {
             group = Y.Node.create('<div class="atto_group ' + groupname +'_group"></div>');
             toolbar.append(group);
         }
-        var button = Y.Node.create('<button class="atto_' + plugin + '_button" ' +
-                                   'data-editor="' + Y.Escape.html(elementid) + '" ' +
-                                   'data-plugin="' + Y.Escape.html(plugin) + '" ' +
-                                   'data-handler="' + Y.Escape.html(plugin) + '">' +
-                                    icon +
-                                    '</button>');
+        button = Y.Node.create('<button class="atto_' + plugin + '_button" ' +
+                               'data-editor="' + Y.Escape.html(elementid) + '" ' +
+                               'data-plugin="' + Y.Escape.html(plugin) + '" ' +
+                               'tabindex="-1" ' +
+                               'data-handler="' + Y.Escape.html(plugin) + '">' +
+                               icon +
+                               '</button>');
 
         group.append(button);
 
+        currentfocus = toolbar.getAttribute('aria-activedescendant');
+        if (!currentfocus) {
+            button.setAttribute('tabindex', '0');
+            toolbar.setAttribute('aria-activedescendant', button.generateID());
+        }
+
         // We only need to attach this once.
         if (!M.editor_atto.buttonhandlers[plugin]) {
             Y.one('body').delegate('click', M.editor_atto.buttonclicked_handler, '.atto_' + plugin + '_button');
@@ -294,7 +314,7 @@ M.editor_atto = M.editor_atto || {
                                             'spellcheck="true" ' +
                                             'class="editor_atto"/>');
         var cssfont = '';
-        var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar"/>');
+        var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar" role="toolbar"/>');
 
         // Bleh - why are we sent a url and not the css to apply directly?
         var css = Y.io(params.content_css, { sync: true });
@@ -323,10 +343,61 @@ M.editor_atto = M.editor_atto || {
             textarea.set('value', atto.getHTML());
         });
 
+        // Listen for Arrow left and Arrow right keys.
+        Y.one(Y.config.doc.body).delegate('key',
+                                          this.keyboard_navigation,
+                                          'down:37,39',
+                                          '#' + params.elementid + '_toolbar',
+                                          this,
+                                          params.elementid);
+
         // Save the file picker options for later.
         M.editor_atto.filepickeroptions[params.elementid] = params.filepickeroptions;
     },
 
+    /**
+     * Implement arrow key navigation for the buttons in the toolbar.
+     * @param Event e - the keyboard event.
+     * @param string elementid - the id of the textarea we created this editor from.
+     */
+    keyboard_navigation : function(e, elementid) {
+        var buttons,
+            current,
+            currentid,
+            currentindex;
+
+        e.preventDefault();
+
+        buttons = Y.all('#' + elementid + '_toolbar button');
+        currentid = Y.one('#' + elementid + '_toolbar').getAttribute('aria-activedescendant');
+        if (!currentid) {
+            return;
+        }
+        current = Y.one('#' + currentid);
+        current.setAttribute('tabindex', '-1');
+
+        currentindex = buttons.indexOf(current);
+
+        if (e.keyCode === 37) {
+            // Left
+            currentindex--;
+            if (currentindex < 0) {
+                currentindex = buttons.size()-1;
+            }
+        } else {
+            // Right
+            currentindex++;
+            if (currentindex >= buttons.size()) {
+                currentindex = 0;
+            }
+        }
+
+        current = buttons.item(currentindex);
+        current.setAttribute('tabindex', '0');
+        current.focus();
+        Y.one('#' + elementid + '_toolbar').setAttribute('aria-activedescendant', current.generateID());
+    },
+
     /**
      * Show the filepicker.
      * @param string elementid for this editor instance.
@@ -432,4 +503,4 @@ M.editor_atto = M.editor_atto || {
 };
 
 
-}, '@VERSION@', {"requires": ["node", "io", "overlay", "escape", "moodle-core-notification"]});
+}, '@VERSION@', {"requires": ["node", "io", "overlay", "escape", "event-key", "moodle-core-notification"]});
diff --git a/lib/editor/atto/yui/src/editor/js/editor.js b/lib/editor/atto/yui/src/editor/js/editor.js
index 8dc7d7a950b..30e18927c95 100644
--- a/lib/editor/atto/yui/src/editor/js/editor.js
+++ b/lib/editor/atto/yui/src/editor/js/editor.js
@@ -157,19 +157,29 @@ M.editor_atto = M.editor_atto || {
      */
     add_toolbar_menu : function(elementid, plugin, icon, groupname, entries) {
         var toolbar = Y.one('#' + elementid + '_toolbar'),
-            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group');
+            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group'),
+            currentfocus,
+            button;
+
         if (!group) {
             group = Y.Node.create('<div class="atto_group ' + groupname + '_group"></div>');
             toolbar.append(group);
         }
-        var button = Y.Node.create('<button class="atto_' + plugin + '_button atto_hasmenu" ' +
+        button = Y.Node.create('<button class="atto_' + plugin + '_button atto_hasmenu" ' +
                                     'data-editor="' + Y.Escape.html(elementid) + '" ' +
+                                    'tabindex="-1" ' +
                                     'data-menu="' + plugin + '_' + elementid + '" >' +
                                     icon +
                                     '</button>');
 
         group.append(button);
 
+        currentfocus = toolbar.getAttribute('aria-activedescendant');
+        if (!currentfocus) {
+            button.setAttribute('tabindex', '0');
+            toolbar.setAttribute('aria-activedescendant', button.generateID());
+        }
+
         // Save the name of the plugin.
         M.editor_atto.widgets[plugin] = plugin;
 
@@ -226,20 +236,30 @@ M.editor_atto = M.editor_atto || {
      */
     add_toolbar_button : function(elementid, plugin, icon, groupname, handler) {
         var toolbar = Y.one('#' + elementid + '_toolbar'),
-            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group');
+            group = Y.one('#' + elementid + '_toolbar .atto_group.' + groupname + '_group'),
+            button,
+            currentfocus;
+
         if (!group) {
             group = Y.Node.create('<div class="atto_group ' + groupname +'_group"></div>');
             toolbar.append(group);
         }
-        var button = Y.Node.create('<button class="atto_' + plugin + '_button" ' +
-                                   'data-editor="' + Y.Escape.html(elementid) + '" ' +
-                                   'data-plugin="' + Y.Escape.html(plugin) + '" ' +
-                                   'data-handler="' + Y.Escape.html(plugin) + '">' +
-                                    icon +
-                                    '</button>');
+        button = Y.Node.create('<button class="atto_' + plugin + '_button" ' +
+                               'data-editor="' + Y.Escape.html(elementid) + '" ' +
+                               'data-plugin="' + Y.Escape.html(plugin) + '" ' +
+                               'tabindex="-1" ' +
+                               'data-handler="' + Y.Escape.html(plugin) + '">' +
+                               icon +
+                               '</button>');
 
         group.append(button);
 
+        currentfocus = toolbar.getAttribute('aria-activedescendant');
+        if (!currentfocus) {
+            button.setAttribute('tabindex', '0');
+            toolbar.setAttribute('aria-activedescendant', button.generateID());
+        }
+
         // We only need to attach this once.
         if (!M.editor_atto.buttonhandlers[plugin]) {
             Y.one('body').delegate('click', M.editor_atto.buttonclicked_handler, '.atto_' + plugin + '_button');
@@ -292,7 +312,7 @@ M.editor_atto = M.editor_atto || {
                                             'spellcheck="true" ' +
                                             'class="editor_atto"/>');
         var cssfont = '';
-        var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar"/>');
+        var toolbar = Y.Node.create('<div class="editor_atto_toolbar" id="' + params.elementid + '_toolbar" role="toolbar"/>');
 
         // Bleh - why are we sent a url and not the css to apply directly?
         var css = Y.io(params.content_css, { sync: true });
@@ -321,10 +341,61 @@ M.editor_atto = M.editor_atto || {
             textarea.set('value', atto.getHTML());
         });
 
+        // Listen for Arrow left and Arrow right keys.
+        Y.one(Y.config.doc.body).delegate('key',
+                                          this.keyboard_navigation,
+                                          'down:37,39',
+                                          '#' + params.elementid + '_toolbar',
+                                          this,
+                                          params.elementid);
+
         // Save the file picker options for later.
         M.editor_atto.filepickeroptions[params.elementid] = params.filepickeroptions;
     },
 
+    /**
+     * Implement arrow key navigation for the buttons in the toolbar.
+     * @param Event e - the keyboard event.
+     * @param string elementid - the id of the textarea we created this editor from.
+     */
+    keyboard_navigation : function(e, elementid) {
+        var buttons,
+            current,
+            currentid,
+            currentindex;
+
+        e.preventDefault();
+
+        buttons = Y.all('#' + elementid + '_toolbar button');
+        currentid = Y.one('#' + elementid + '_toolbar').getAttribute('aria-activedescendant');
+        if (!currentid) {
+            return;
+        }
+        current = Y.one('#' + currentid);
+        current.setAttribute('tabindex', '-1');
+
+        currentindex = buttons.indexOf(current);
+
+        if (e.keyCode === 37) {
+            // Left
+            currentindex--;
+            if (currentindex < 0) {
+                currentindex = buttons.size()-1;
+            }
+        } else {
+            // Right
+            currentindex++;
+            if (currentindex >= buttons.size()) {
+                currentindex = 0;
+            }
+        }
+
+        current = buttons.item(currentindex);
+        current.setAttribute('tabindex', '0');
+        current.focus();
+        Y.one('#' + elementid + '_toolbar').setAttribute('aria-activedescendant', current.generateID());
+    },
+
     /**
      * Show the filepicker.
      * @param string elementid for this editor instance.
diff --git a/lib/editor/atto/yui/src/editor/meta/editor.json b/lib/editor/atto/yui/src/editor/meta/editor.json
index 9e6959c169e..850911d8a79 100644
--- a/lib/editor/atto/yui/src/editor/meta/editor.json
+++ b/lib/editor/atto/yui/src/editor/meta/editor.json
@@ -5,6 +5,7 @@
         "io",
         "overlay",
         "escape",
+        "event-key",
         "moodle-core-notification"
       ]
   }