From dfa6092c72ce6d46e36b9c764a7ed603e2bce8af Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 27 Mar 2026 17:31:00 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20improve=20access?=
 =?UTF-8?q?ibility=20of=20the=20reaction=20toolbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add an aria-label to clearly describe the purpose of the toolbar.

Avoid redundant wording in reaction button labels to improve
clarity for screen reader users.
---
 .../features/reactions/components/ReactionsToggle.tsx    | 1 +
 .../reactions/components/toolbar/ReactionButton.tsx      | 3 +--
 .../reactions/components/toolbar/ReactionsToolbar.tsx    | 9 ++++++++-
 src/frontend/src/locales/de/rooms.json                   | 2 +-
 src/frontend/src/locales/en/rooms.json                   | 2 +-
 src/frontend/src/locales/fr/rooms.json                   | 2 +-
 src/frontend/src/locales/nl/rooms.json                   | 2 +-
 7 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/features/reactions/components/ReactionsToggle.tsx b/src/frontend/src/features/reactions/components/ReactionsToggle.tsx
index 002b7c1b..38d950a3 100644
--- a/src/frontend/src/features/reactions/components/ReactionsToggle.tsx
+++ b/src/frontend/src/features/reactions/components/ReactionsToggle.tsx
@@ -22,6 +22,7 @@ export const ReactionsToggle = () => {
       square
       variant="primaryDark"
       aria-label={t('button')}
+      aria-expanded={isOpen}
       tooltip={t('button')}
       isSelected={isOpen}
       onChange={toggle}
diff --git a/src/frontend/src/features/reactions/components/toolbar/ReactionButton.tsx b/src/frontend/src/features/reactions/components/toolbar/ReactionButton.tsx
index 9664a244..3dd04a96 100644
--- a/src/frontend/src/features/reactions/components/toolbar/ReactionButton.tsx
+++ b/src/frontend/src/features/reactions/components/toolbar/ReactionButton.tsx
@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next'
 import { css } from '@/styled-system/css'
-import { getEmojiLabel } from '../../utils'
 import { Emoji } from '../../types'
 import { useReactions } from '../../hooks/useReactions'
 import { Button } from '@/primitives'
@@ -11,7 +10,7 @@ export const ReactionButton = ({ emoji }: { emoji: Emoji }) => {
   return (
     <Button
       onPress={() => sendReaction(emoji)}
-      aria-label={t('send', { emoji: getEmojiLabel(emoji, t) })}
+      aria-label={t(`emojis.${emoji}`)}
       variant="primaryTextDark"
       size="sm"
       round
diff --git a/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx b/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx
index 21d38153..fa01ff77 100644
--- a/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx
+++ b/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx
@@ -8,6 +8,7 @@ import { getFirstControlBarFocusable } from '@/utils/dom'
 import { useIsMobile } from '@/utils/useIsMobile'
 import { useEffect, useRef, useState } from 'react'
 import { useDelayUnmount } from '@/hooks/useDelayUnmount'
+import { useTranslation } from 'react-i18next'
 
 const Container = styled('div', {
   base: {
@@ -85,6 +86,7 @@ const Strip = ({ children }: { children: React.ReactNode }) => {
 }
 
 const KeyboardNavigation = ({ children }: { children: React.ReactNode }) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
   const focusManager = useFocusManager()
 
   const onFocus = (e: React.FocusEvent<HTMLDivElement>) => {
@@ -117,7 +119,12 @@ const KeyboardNavigation = ({ children }: { children: React.ReactNode }) => {
   }
 
   return (
-    <div role="toolbar" onKeyDown={onKeyDown} onFocus={onFocus}>
+    <div
+      role="toolbar"
+      aria-label={t('toolbar')}
+      onKeyDown={onKeyDown}
+      onFocus={onFocus}
+    >
       {children}
     </div>
   )
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index d393e9b8..42f2bb69 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -215,7 +215,7 @@
     "moreOptions": "Weitere Optionen",
     "reactions": {
       "button": "Reaktion senden",
-      "send": "Reaktion {{emoji}} senden",
+      "toolbar": "Reaktion senden",
       "announce": "{{name}} : {{emoji}}",
       "you": "du",
       "emojis": {
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 24178269..e37ac5a2 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -215,7 +215,7 @@
     "moreOptions": "More options",
     "reactions": {
       "button": "Send reaction",
-      "send": "Send reaction {{emoji}}",
+      "toolbar": "Send reaction",
       "announce": "{{name}} : {{emoji}}",
       "you": "you",
       "emojis": {
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index bbde7e7b..fe49ec40 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -215,7 +215,7 @@
     "moreOptions": "Plus d'options",
     "reactions": {
       "button": "Envoyer une réaction",
-      "send": "Envoyer la réaction {{emoji}}",
+      "toolbar": "Envoyer une réaction",
       "announce": "{{name}} : {{emoji}}",
       "you": "vous",
       "emojis": {
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index a6ab507c..80b0e8f6 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -215,7 +215,7 @@
     "moreOptions": "Meer opties",
     "reactions": {
       "button": "Stuur reactie",
-      "send": "Stuur reactie {{emoji}}",
+      "toolbar": "Stuur reactie",
       "announce": "{{name}} : {{emoji}}",
       "you": "U",
       "emojis": {