From ec6170544136107ebb5d469529cc6f46fb1a881c Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <alec@alec.pl>
Date: Sat, 6 Oct 2018 19:27:46 +0200
Subject: [PATCH] Elastic: Improve keyboard navigation on html editor mode
 switch

---
 skins/elastic/styles/widgets/editor.less | 3 +--
 skins/elastic/ui.js                      | 8 +++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/skins/elastic/styles/widgets/editor.less b/skins/elastic/styles/widgets/editor.less
index d4ad6b96c..6046cf934 100644
--- a/skins/elastic/styles/widgets/editor.less
+++ b/skins/elastic/styles/widgets/editor.less
@@ -842,7 +842,6 @@ html.touch .mce-grid td {
         border-color: transparent;
         z-index: 1;
         position: absolute;
-        top: 1px;
         right: 1rem;
 
         a.active {
@@ -858,7 +857,7 @@ html.touch .mce-grid td {
             }
         }
 
-        a:hover {
+        a:hover, a:focus {
             border-bottom-color: transparent;
         }
     }
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index 96a1b38b4..d28ba791f 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -3400,6 +3400,7 @@ function rcube_elastic_ui()
         var sw, is_table = false,
             editor = $(obj),
             parent = editor.parent(),
+            tabindex = editor.attr('tabindex'),
             mode = function() {
                 if (is_table) {
                     return sw.is(':checked') ? 'html' : 'plain';
@@ -3431,20 +3432,21 @@ function rcube_elastic_ui()
         parent.addClass('html-editor');
         editor.before(tabs);
 
-        $('a', tabs).attr('tabindex', editor.attr('tabindex'))
+        $('a', tabs).attr('tabindex', tabindex)
             .on('click', function(e) {
                 var id = editor.attr('id'), is_html = $(this).is('.mode-html');
 
                 e.preventDefault();
                 if (rcmail.command('toggle-editor', {id: id, html: is_html}, '', e.originalEvent)) {
-                    $(this).tab('show');
+                    $(this).tab('show').prop('tabindex', -1);
+                    $('.mode-' + (is_html ? 'plain' : 'html'), tabs).prop('tabindex', tabindex);
 
                     if (is_table) {
                         sw.prop('checked', is_html);
                     }
                 }
             })
-            .filter('.mode-' + mode()).tab('show');
+            .filter('.mode-' + mode()).tab('show').prop('tabindex', -1);
 
         if (is_table) {
             // Hide unwanted table cells