From 5b748c26ecca9bd6b23302033d46a28ef9bd5871 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Tue, 22 Apr 2025 19:30:26 +0300
Subject: [PATCH] Refactor of markdown toolbar buttons #1831

---
 customize.dist/src/less2/include/toolbar.less |  5 +-
 www/common/common-ui-elements.js              | 55 +++++++------------
 www/form/app-form.less                        |  1 +
 3 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index a56cba125..923604a0a 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -77,7 +77,10 @@
             border-radius: @variables_radius;
             color: @toolbar-color;
             .toolbar_button;
-            font: normal normal normal 14px/1 FontAwesome;
+            .fa {
+                font: normal normal normal 14px/1 FontAwesome;
+                font-family: FontAwesome;
+            }
             &:hover {
                 background-color: contrast(@cp_toolbar-bg, darken(@cp_toolbar-bg, 5%), lighten(@cp_toolbar-bg, 5%));
             }
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 13c8cacdc..c22f7dccf 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -905,7 +905,8 @@ define([
             case 'toggle':
                 button = $(h('button.cp-toolbar-tools', {
                     //title: data.title || '', // TODO display if the label text is collapsed
-                    'aria-label': data.text || Messages.toolbar_tools // Fallback
+                    'aria-label': data.text || Messages.toolbar_tools, // Fallback
+                    'aria-pressed': false
                 }, [
                     h('i.fa.' + (data.icon || 'fa-wrench')),
                     h('span.cp-toolbar-name', data.text || Messages.toolbar_tools)
@@ -923,6 +924,7 @@ define([
                 button.click(function (e) {
                     data.element.toggle();
                     var isVisible = data.element.is(':visible');
+                    button.attr('aria-pressed', isVisible ? 'true' : 'false');
                     if (callback) { callback(isVisible); }
                     if (isVisible) {
                         button.addClass('cp-toolbar-button-active');
@@ -1011,29 +1013,6 @@ define([
         return button;
     };
 
-    let hideTooltipsTimer;
-    const hideOtherTooltips = (except) => {
-        clearTimeout(hideTooltipsTimer);
-        hideTooltipsTimer = setTimeout(() => {
-            if (typeof tippy !== 'undefined' && typeof tippy.hideAll === 'function') {
-                tippy.hideAll({ exclude: except });
-            } else {
-                $('[aria-describedby]').each(function () {
-                    const tooltipId = this.getAttribute('aria-describedby');
-                    const tooltip = document.getElementById(tooltipId);
-                    if (
-                        tooltip &&
-                        tooltip._tippy &&
-                        tooltip._tippy.reference !== except
-                    ) {
-                        tooltip._tippy.hide();
-                    }
-                });
-            }
-        }, 60); // ~1 frame delay to buffer fast movement
-    };
-
-
     var createMdToolbar = function (common, editor, cfg) {
         cfg = cfg || {};
         var $toolbar = $('<div>', {
@@ -1180,20 +1159,28 @@ define([
         };
         for (var k in actions) {
             let $b = $('<button>', {
-                'data-type': k,
-                'class': 'pure-button fa ' + actions[k].icon,
-                title: Messages['mdToolbar_' + k] || k
-            }).click(onClick);
-            $b.on('mouseenter focus', function () {
-                hideOtherTooltips(this);
-            });
+                'data-notippy':1,
+                'class': 'pure-button cp-markdown-' + k,
+                'title': Messages['mdToolbar_' + k] || k,
+                'aria-label': Messages['mdToolbar_' + k] || k
+                }).append(
+                $('<i>', {
+                    'class': 'fa ' + actions[k].icon,
+                    'aria-hidden': 'true'
+                })).click(onClick);
             if (k === "embed") { $toolbar.prepend($b); }
             else { $toolbar.append($b); }
         }
         $('<button>', {
-            'class': 'pure-button fa fa-question cp-markdown-help',
-            title: Messages.mdToolbar_help
-        }).click(function () {
+            'data-notippy':1,
+            'class': 'pure-button cp-markdown-help',
+            'title': Messages.mdToolbar_help,
+            'aria-label': Messages.mdToolbar_help
+        }).append(
+            $('<i>', {
+                'class': 'fa fa-question',
+                'aria-hidden': 'true'
+            })).click(function () {
             var href = Messages.mdToolbar_tutorial;
             common.openUnsafeURL(href);
         }).appendTo($toolbar);
diff --git a/www/form/app-form.less b/www/form/app-form.less
index 1e9ae02a5..1319abd1e 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -834,6 +834,7 @@
                     }
                     .cp-markdown-toolbar {
                         display: block;
+                        background-color: transparent;
                     }
                 }
                 .cp-form-edit-block {