Make ricktext toolbar keyboard accesible #1272

customize.dist/ckeditor-config.js

@@ -28,7 +28,7 @@ CKEDITOR.editorConfig = function( config ) {
     config.mathJaxLib = '/pad/mathjax/MathJax.js?config=TeX-AMS_HTML';
     config.font_defaultLabel = 'Arial';
     config.fontSize_defaultLabel = '16';
-
+    config.accessibility = 'true';
     config.keystrokes = [
         [ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ],
         [ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ],
@@ -46,7 +46,13 @@ CKEDITOR.editorConfig = function( config ) {
         [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ],
         [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ],
 
-        [ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]
+        [CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ],
+        [37 /* Left Arrow */, 'focusPreviousButton'],
+        [39 /* Right Arrow */, 'focusNextButton'],
+        //enter
+        [13, 'clickFocusedButton'],
+        //space bar
+        [32, 'clickFocusedButton']
     ];
 
     //skin: 'moono-cryptpad,/pad/themes/moono-cryptpad/'

www/pad/csp.js

@@ -14,11 +14,12 @@ define(['jquery'], function ($) {
         CKEDITOR.tools.callFunction(Number(m[1]), e.currentTarget);
         $iframe.scrollTop(s);
     });
-
+    
     // Buttons
     var $a = $('.cke_toolbox_main').find('.cke_button, .cke_combo_button');
     $a.each(function (i, el) {
         var $el = $(el);
+        $el.attr('tabindex', '0');
         var $icon = $el.find('span.cke_button_icon');
         if ($icon.length) {
             try {
@@ -30,7 +31,7 @@ define(['jquery'], function ($) {
             } catch (e) { console.error(e); }
         }
         $el.on('keydown blur focus click dragstart', function (e) {
-            e.preventDefault();
+            //e.preventDefault();
             var attr = $(el).attr('oon'+e.type);
             if (!attr) { return; }
             if (['blur', 'dragstart'].indexOf(e.type) !== -1) { return false; }