Merge branch 'rich-text-small-screen' into staging

customize.dist/ckeditor-config.js

@@ -8,13 +8,12 @@ CKEDITOR.editorConfig = function( config ) {
     // https://dev.ckeditor.com/ticket/10907
     config.needsBrFiller= fixThings;
     config.needsNbspFiller= fixThings;
-
     config.disableObjectResizing = true;
 
     config.removeButtons= 'Source,Maximize';
     // magicline plugin inserts html crap into the document which is not part of the
     // document itself and causes problems when it's sent across the wire and reflected back
-    config.removePlugins= 'resize,elementspath';
+    config.removePlugins= 'resize,elementspath,contextmenu,liststyle,tabletools,tableselection';
     config.resize_enabled= false; //bottom-bar
     config.extraPlugins= 'autolink,colorbutton,colordialog,font,indentblock,justify,mediatag,print,blockbase64,mathjax,wordcount,comments';
     config.toolbarGroups= [
@@ -35,7 +34,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' ],
@@ -53,7 +52,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/app-pad.less

@@ -28,6 +28,15 @@ body.cp-app-pad {
         flex-flow: row;
         height: 100%;
         overflow: hidden;
+       .cp-toolbar-chat-drawer, .cp-toolbar-userlist-drawer{
+        @media screen and (max-width: @browser_media-medium-screen){
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            top: 74px;
+
+        }
+       }
     }
 
     @media screen and (max-height: @browser_media-medium-screen),
@@ -78,6 +87,7 @@ body.cp-app-pad {
                 border-color: @cryptpad_color_red;
             }
         }
+
         .cp-pad-show {
             line-height: 0px;
         }
@@ -139,7 +149,7 @@ body.cp-app-pad {
         }
         h2 {
             font-size: 1.5rem;
-            text-align: right;
+            text-align: center;
         }
         .comments_main();
     }
@@ -150,6 +160,13 @@ body.cp-app-pad {
         h2 {
             text-align: left;
         }
+        p.msg{
+            align-self: center;
+            padding: 0;
+        }
+        .dialog.nav{
+            padding: 10px;
+        }
     }
 
     .cke_toolbox_main {
@@ -158,6 +175,7 @@ body.cp-app-pad {
         .cke_toolbar {
             height: 28px;
             padding: 2px 0;
+            display: flex;
         }
         .cp-app-pad-wordCount {
             float: right;
@@ -175,6 +193,15 @@ body.cp-app-pad {
             border-color: @toolbar-bg-active;
         }
         .cke_button, .cke_combo_button {
+            .cke_combo_open{
+                display: flex;
+                flex-flow: row;
+                .cke_combo_arrow{
+                    @media (max-width: 360px){
+                        display:none;
+                    }
+                }
+            }
             .tools_unselectable();
             &.cke_button_on, &.cke_combo_button:hover, &.cke_button_off:hover {
                 background-color: @toolbar-bg-active;

www/pad/csp.js

@@ -18,11 +18,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 {
@@ -34,7 +35,16 @@ define(['jquery'], function ($) {
             } catch (e) { console.error(e); }
         }
         $el.on('keydown blur focus click dragstart', function (e) {
-            e.preventDefault();
+            if (e.key !== 'Tab') { e.preventDefault(); }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                var focusedButton = document.activeElement;
+        
+                // Simulate a click event on the focused button
+                if (focusedButton) {
+                    focusedButton.click();
+                }
+            }
             var attr = $(el).attr('oon'+e.type);
             if (!attr) { return; }
             if (['blur', 'dragstart'].indexOf(e.type) !== -1) { return false; }
@@ -48,7 +58,7 @@ define(['jquery'], function ($) {
             $iframe.scrollTop(s);
         });
     });
-
+    
 
     // Dropdown menus