fix: only show toolbar button tooltip on keyboard focus (#10040)

Author: web-padawan

packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js

@@ -9,6 +9,7 @@
  * license.
  */
 import '../vendor/vaadin-quill.js';
+import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
@@ -425,13 +426,16 @@ export const RichTextEditorMixin = (superClass) =>
     }
 
     /** @private */
-    __showTooltip(event) {
-      const target = event.target;
+    __showTooltip({ type, target }) {
+      // Only show tooltip when focused with keyboard
+      if (type === 'focusin' && !isKeyboardActive()) {
+        return;
+      }
       this._tooltip.target = target;
       this._tooltip.text = target.ariaLabel;
       this._tooltip._stateController.open({
-        focus: event.type === 'focusin',
-        hover: event.type === 'mouseenter',
+        focus: type === 'focusin',
+        hover: type === 'mouseenter',
       });
     }
 

packages/rich-text-editor/test/toolbar.test.js

@@ -7,6 +7,7 @@ import {
   focusout,
   isDesktopSafari,
   isFirefox,
+  mousedown,
   nextRender,
   nextUpdate,
   oneEvent,
@@ -640,7 +641,10 @@ describe('toolbar controls', () => {
       expect(overlay.opened).to.be.false;
     });
 
-    it('should open tooltip when focusing toolbar button', () => {
+    it('should open tooltip when focusing toolbar button with keyboard', () => {
+      // Mimic keyboard focus
+      esc(rte);
+
       const undo = getButton('undo');
       undo.focus();
 
@@ -649,7 +653,18 @@ describe('toolbar controls', () => {
       expect(overlay.opened).to.be.true;
     });
 
+    it('should not open tooltip when focusing toolbar button with mouse', () => {
+      const undo = getButton('undo');
+      mousedown(undo);
+      undo.focus();
+
+      expect(overlay.opened).to.be.false;
+    });
+
     it('should move tooltip when focusing other toolbar button', () => {
+      // Mimic keyboard focus
+      esc(rte);
+
       const undo = getButton('undo');
       undo.focus();
 
@@ -662,6 +677,9 @@ describe('toolbar controls', () => {
     });
 
     it('should close tooltip when focus is moved away from toolbar button', () => {
+      // Mimic keyboard focus
+      esc(rte);
+
       const undo = getButton('undo');
       undo.focus();