♿️(frontend) improve accessibility of the reaction toolbar

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.

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}

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

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>
   )

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": {

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": {

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": {

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": {