From ec6170544136107ebb5d469529cc6f46fb1a881c Mon Sep 17 00:00:00 2001 From: Aleksander Machniak 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