add option to exit description editor on the calendar modal

www/calendar/app-calendar.less

@@ -157,6 +157,11 @@
             border-radius: @variables_radius_L;
         }
         .tui-full-calendar-popup-container {
+            .tui-full-calendar-section-allday{
+                &:focus {
+                    outline: @cryptpad_color_brand solid 2px;
+                }
+            }
             min-width: 100%;
             background: @cp_flatpickr-bg;
             color: @cryptpad_text_col;
@@ -208,6 +213,9 @@
                     text-overflow: ellipsis;
                     font: @colortheme_app-font;
                     padding: 0 10px;
+                    &:focus{
+                        outline: @cryptpad_color_brand solid 2px;
+                    }
                 }
                 input { flex: 1; }
             }
@@ -403,6 +411,11 @@
                     & > input {
                         height: 40px;
                     }
+                    .tui-full-calendar-content{
+                        &:focus{
+                            outline: @cryptpad_color_brand solid 2px;
+                        }
+                    }
                 }
                 // margin-bottom: 20px;
                 input {

www/calendar/inner.js

@@ -2063,6 +2063,15 @@ APP.recurrenceRule = {
         editor.setOption('readOnly', false);
         editor.setOption('autoRefresh', true);
         editor.setOption('gutters', []);
+        editor.on('keydown', function (editor, e) {
+            if (e.which === 27) {
+                let $next = $(e.target).closest('.tui-full-calendar-popup-section').next();
+                if ($next.length) {
+                    $next.find('#tui-full-calendar-schedule-start-date').focus();
+                }
+                e.stopPropagation();
+            }
+        });
         cm.configureTheme(common, function () {});
         editor.setValue(oldEventBody);
 
@@ -2147,6 +2156,13 @@ APP.recurrenceRule = {
             $el.find('input').attr('autocomplete', 'off');
             $el.find('.tui-full-calendar-dropdown-button').addClass('btn btn-secondary');
             $el.find('.tui-full-calendar-popup-close').addClass('btn btn-cancel fa fa-times cp-calendar-close').empty();
+            $el.find('.tui-full-calendar-section-allday').attr('tabindex', 0);
+            $el.find('.cp-calendar-close').attr('tabindex',-1);
+            $el.find('.tui-full-calendar-section-allday').keydown(function (e) {
+                if (e.which === 13) {
+                    $(this).click();
+                }
+            });
 
             var $container = $el.closest('.tui-full-calendar-floating-layer');
             $container.addClass('cp-calendar-popup-flex');
@@ -2209,6 +2225,7 @@ APP.recurrenceRule = {
                     setFormat(allDay);
                 });
             });
+            UI.addTabListener(el);
         };
         var onCalendarEditPopup = function (el) {
             var $el = $(el);
@@ -2244,6 +2261,7 @@ APP.recurrenceRule = {
             var data = ev.schedule || {};
             var id = data.id;
 
+            UI.addTabListener(el);
             if (!id) { return; }
             if (id.indexOf('|') === -1) { return; } // Original event ID doesn't contain |
 

www/common/common-interface.js

@@ -164,12 +164,12 @@ define([
 
     dialog.okButton = function (content, classString) {
         var sel = typeof(classString) === 'string'? 'button.ok.' + classString:'button.btn.ok.primary';
-        return h(sel, { tabindex: '2', }, content || Messages.okButton);
+        return h(sel, content || Messages.okButton);
     };
 
     dialog.cancelButton = function (content, classString) {
         var sel = typeof(classString) === 'string'? 'button.' + classString:'button.btn.cancel';
-        return h(sel, { tabindex: '1'}, content || Messages.cancelButton);
+        return h(sel, content || Messages.cancelButton);
     };
 
     dialog.message = function (text) {
@@ -577,7 +577,7 @@ define([
         return frame;
     };
 
-    let addTabListener = frame => {
+    let addTabListener = UI.addTabListener = frame => {
         // find focusable elements
         let modalElements = $(frame).find('a, button, input, [tabindex]:not([tabindex="-1"]), textarea').filter(':visible').filter(':not(:disabled)');
 
@@ -719,6 +719,7 @@ define([
             Notifier.notify();
         });
 
+        addTabListener(frame);
         return {
             element: frame,
             delete: close
@@ -770,7 +771,7 @@ define([
 
         document.body.appendChild(frame);
         setTimeout(function () {
-            $(input).select().focus();
+            addTabListener(frame);
             Notifier.notify();
         });
     };