From a70f8b15e6fddc1b0a9d9dab2fda18f911faee81 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Tue, 3 Dec 2024 10:36:05 -0500
Subject: [PATCH] Toolbar Button: Handle `click` instead of `mousedown`

Revert [c4b9d5b][]

Requiring mouse events to trigger `<button>` element event listeners
poses accessibility issues for keyboard users.

The context in the original commit ([c4b9d5b][]) is fairly light, and
there doesn't appear to be a link to a GitHub pull request with more
information. The provided context is:

> Prevents flickering of the placeholder text when clicking block
> formatting buttons on an empty document.

Since the commit is from 2014, there is hope that the underlying flicker
might have been resolved through the natural course of browser
improvements and device enhancements.

The benefit of responding to keyboard events when the `<button>` element
has focus outweighs the potential downsides.

[c4b9d5b]: https://github.com/basecamp/trix/commit/c4b9d5b5f18bc41b6cedcc0ffbadf33db2ab240e
---
 src/test/test_helpers/toolbar_helpers.js   | 2 +-
 src/trix/controllers/toolbar_controller.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/test/test_helpers/toolbar_helpers.js b/src/test/test_helpers/toolbar_helpers.js
index 1a6159be5..c4dd7745a 100644
--- a/src/test/test_helpers/toolbar_helpers.js
+++ b/src/test/test_helpers/toolbar_helpers.js
@@ -5,7 +5,7 @@ import { delay, nextFrame } from "./timing_helpers"
 export const clickToolbarButton = async (selector) => {
   selectionChangeObserver.update()
   const button = getToolbarButton(selector)
-  triggerEvent(button, "mousedown")
+  triggerEvent(button, "click")
   await delay(5)
 }
 
diff --git a/src/trix/controllers/toolbar_controller.js b/src/trix/controllers/toolbar_controller.js
index a1178fea7..b179e7849 100644
--- a/src/trix/controllers/toolbar_controller.js
+++ b/src/trix/controllers/toolbar_controller.js
@@ -31,12 +31,12 @@ export default class ToolbarController extends BasicObject {
     this.actions = {}
     this.resetDialogInputs()
 
-    handleEvent("mousedown", {
+    handleEvent("click", {
       onElement: this.element,
       matchingSelector: actionButtonSelector,
       withCallback: this.didClickActionButton,
     })
-    handleEvent("mousedown", {
+    handleEvent("click", {
       onElement: this.element,
       matchingSelector: attributeButtonSelector,
       withCallback: this.didClickAttributeButton,