From 4830ea567352c484be09f3d59d2bc8338b71fc07 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Thu, 21 May 2026 22:26:50 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20fix=20reaction=20toolb?= =?UTF-8?q?ar=20refocusing=20first=20button=20on=20click?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The toolbar's onFocus handler called focusManager.focusFirst() whenever focus arrived from outside the toolbar, which included clicks on reaction buttons. This caused focus (and the scroll viewport) to snap back to the first button on every click. Use :focus-visible to distinguish keyboard focus from pointer focus. Only redirect to the first button when focus arrives via keyboard, leaving click-induced focus untouched. Co-authored-by: Cyril --- .../reactions/components/toolbar/ReactionsKeyboardNavigation.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/frontend/src/features/reactions/components/toolbar/ReactionsKeyboardNavigation.tsx b/src/frontend/src/features/reactions/components/toolbar/ReactionsKeyboardNavigation.tsx index 57d301af..bbb4d256 100644 --- a/src/frontend/src/features/reactions/components/toolbar/ReactionsKeyboardNavigation.tsx +++ b/src/frontend/src/features/reactions/components/toolbar/ReactionsKeyboardNavigation.tsx @@ -20,6 +20,7 @@ export const ReactionsKeyboardNavigation = ({ const { close } = useReactionsToolbar() const onFocus = (e: React.FocusEvent) => { + if (!e.target.matches(':focus-visible')) return const comingFromOutside = !e.currentTarget.contains(e.relatedTarget) if (comingFromOutside) { focusManager?.focusFirst()