From eb74feaa0d130954dce217500e8e34df6f668b47 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 18 May 2026 18:02:44 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20improve=20access?=
 =?UTF-8?q?ibility=20and=20navigation=20for=20reaction=20toolbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refine keyboard behavior so left and right arrow keys no longer
control toolbar navigation, allowing users to directly tab into
individual reaction buttons for faster and more intuitive access.

Remove the reaction toolbar from accessibility tree to avoid
unnecessary focus and announcements, keeping assistive technology
focused on the actual reaction controls.

This ensures the UX centers on reaction actions rather than
auxiliary navigation elements.

Also, not related to this topic, I've reworked the scroll viewport styles.
---
 .../toolbar/ReactionButtonsContainer.tsx      | 82 +++++++++++--------
 .../components/toolbar/ReactionsToolbar.tsx   | 17 ++--
 2 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx b/src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx
index 507ab2ff..19737d76 100644
--- a/src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx
+++ b/src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx
@@ -8,10 +8,11 @@ import {
 import { styled } from '@/styled-system/jsx'
 import { useReactionsToolbar } from '../../hooks/useReactionsToolbar'
 import { useIsMobile } from '@/utils/useIsMobile'
-import { css } from '@/styled-system/css'
 import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
 import { Button } from '@/primitives'
+import { ReactionsKeyboardNavigation } from './ReactionsKeyboardNavigation'
+import { FocusScope } from '@react-aria/focus'
 
 import { CONTROL_BAR_REGION_ID } from '@/features/layout/components/ControlBarRegion'
 import { REACTIONS_TOGGLE_ID } from '../ReactionsToggle'
@@ -42,18 +43,20 @@ const StyledContainer = styled('div', {
   },
 })
 
-const scrollViewport = css({
-  display: 'flex',
-  gap: '0.2rem',
-  overflowX: 'auto',
-  padding: '0.19rem',
-  scrollBehavior: 'smooth',
-  minWidth: 0,
-  flex: '1 1 auto',
-  scrollbarWidth: 'none',
-  '&::-webkit-scrollbar': { display: 'none' },
-  '& > *': {
-    flexShrink: 0,
+const StyledScrollViewport = styled('div', {
+  base: {
+    display: 'flex',
+    gap: '0.2rem',
+    overflowX: 'auto',
+    padding: '0.19rem',
+    scrollBehavior: 'smooth',
+    minWidth: 0,
+    flex: '1 1 auto',
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': { display: 'none' },
+    '& > *': {
+      flexShrink: 0,
+    },
   },
 })
 
@@ -182,29 +185,40 @@ export const ReactionButtonsContainer = ({
       }
     >
       {overflowing && (
-        <Button
-          onPress={() => scrollBy(-SCROLL_AMOUNT)}
-          variant="primaryTextDark"
-          size="sm"
-          isDisabled={atStart}
-          round
-        >
-          <RiArrowLeftSLine />
-        </Button>
+        <div aria-hidden="true">
+          <Button
+            onPress={() => scrollBy(-SCROLL_AMOUNT)}
+            variant="primaryTextDark"
+            size="sm"
+            isDisabled={atStart}
+            round
+            excludeFromTabOrder
+          >
+            <RiArrowLeftSLine />
+          </Button>
+        </div>
       )}
-      <div ref={scrollRef} className={scrollViewport} onScroll={updateArrows}>
-        {children}
-      </div>
+      {/* eslint-disable-next-line jsx-a11y/no-autofocus*/}
+      <FocusScope autoFocus>
+        <ReactionsKeyboardNavigation>
+          <StyledScrollViewport ref={scrollRef} onScroll={updateArrows}>
+            {children}
+          </StyledScrollViewport>
+        </ReactionsKeyboardNavigation>
+      </FocusScope>
       {overflowing && (
-        <Button
-          onPress={() => scrollBy(SCROLL_AMOUNT)}
-          variant="primaryTextDark"
-          size="sm"
-          isDisabled={atEnd}
-          round
-        >
-          <RiArrowRightSLine />
-        </Button>
+        <div aria-hidden="true">
+          <Button
+            onPress={() => scrollBy(SCROLL_AMOUNT)}
+            variant="primaryTextDark"
+            size="sm"
+            isDisabled={atEnd}
+            round
+            excludeFromTabOrder
+          >
+            <RiArrowRightSLine />
+          </Button>
+        </div>
       )}
     </StyledContainer>
   )
diff --git a/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx b/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx
index 23e23dbc..8b09b0c0 100644
--- a/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx
+++ b/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx
@@ -1,10 +1,8 @@
-import { FocusScope } from '@react-aria/focus'
 import { useReactionsToolbar } from '../../hooks/useReactionsToolbar'
 import { ReactionButton } from './ReactionButton'
 import { Emoji } from '../../types'
 import { styled } from '@/styled-system/jsx'
 import { useDelayUnmount } from '@/hooks/useDelayUnmount'
-import { ReactionsKeyboardNavigation } from './ReactionsKeyboardNavigation'
 import { ReactionButtonsContainer } from './ReactionButtonsContainer'
 
 const Container = styled('div', {
@@ -27,16 +25,11 @@ export const ReactionsToolbar = () => {
 
   return (
     <Container>
-      {/* eslint-disable-next-line jsx-a11y/no-autofocus*/}
-      <FocusScope autoFocus>
-        <ReactionsKeyboardNavigation>
-          <ReactionButtonsContainer>
-            {Object.values(Emoji).map((emoji) => (
-              <ReactionButton key={emoji} emoji={emoji} />
-            ))}
-          </ReactionButtonsContainer>
-        </ReactionsKeyboardNavigation>
-      </FocusScope>
+      <ReactionButtonsContainer>
+        {Object.values(Emoji).map((emoji) => (
+          <ReactionButton key={emoji} emoji={emoji} />
+        ))}
+      </ReactionButtonsContainer>
     </Container>
   )
 }