Relabel lower hand

public/locales/en-GB/app.json

@@ -9,9 +9,11 @@
     "edit": "Edit",
     "go": "Go",
     "invite": "Invite",
+    "lower_hand": "Lower hand",
     "no": "No",
     "open_search": "Open search",
     "pick_reaction": "Pick reaction",
+    "raise_hand": "Raise hand",
     "raise_hand_or_send_reaction": "Raise hand or send reaction",
     "register": "Register",
     "remove": "Remove",
@@ -53,14 +55,12 @@
     "error": "Error",
     "home": "Home",
     "loading": "Loading…",
-    "lower_hand": "Lower hand",
     "microphone": "Microphone",
     "next": "Next",
     "options": "Options",
     "password": "Password",
     "preferences": "Preferences",
     "profile": "Profile",
-    "raise_hand": "Raise hand",
     "search": "Search",
     "settings": "Settings",
     "something_went_wrong": "Something went wrong",

src/button/ReactionToggleButton.test.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { fireEvent, getByLabelText, render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import { act } from "react";
 import { expect, test } from "vitest";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
@@ -66,7 +66,7 @@ test("Can raise hand", async () => {
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
   await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
-  await user.click(getByLabelText("common.raise_hand"));
+  await user.click(getByLabelText("action.raise_hand"));
   expect(room.testSentEvents).toEqual([
     [
       undefined,
@@ -92,7 +92,7 @@ test("Can lower hand", async () => {
   );
   const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
   await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
-  await user.click(getByLabelText("common.lower_hand"));
+  await user.click(getByLabelText("action.lower_hand"));
   expect(room.testRedactedEvents).toEqual([[undefined, reactionEvent]]);
   expect(container).toMatchSnapshot();
 });

src/button/ReactionToggleButton.tsx

@@ -60,6 +60,7 @@ const InnerButton: FC<InnerButtonProps> = ({ raised, open, ...props }) => {
       <CpdButton
         className={classNames(raised && styles.raisedButton)}
         aria-expanded={open}
+        aria-haspopup
         aria-label={t("action.raise_hand_or_send_reaction")}
         kind={raised || open ? "primary" : "secondary"}
         iconOnly
@@ -122,7 +123,7 @@ export function ReactionPopupMenu({
     },
     [sendReaction, filteredReactionSet, canReact, setIsSearching],
   );
-  const label = isHandRaised ? t("common.lower_hand") : t("common.raise_hand");
+  const label = isHandRaised ? t("action.lower_hand") : t("action.raise_hand");
   return (
     <>
       {errorText && (

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`Can close search 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="true"
+    aria-haspopup="true"
     aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":rec:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
@@ -40,6 +41,7 @@ exports[`Can close search with the escape key 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
+    aria-haspopup="true"
     aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":rhh:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
@@ -72,6 +74,7 @@ exports[`Can lower hand 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
+    aria-haspopup="true"
     aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r3i:"
     class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
@@ -104,6 +107,7 @@ exports[`Can open menu 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="true"
+    aria-haspopup="true"
     aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r0:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
@@ -136,6 +140,7 @@ exports[`Can raise hand 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
+    aria-haspopup="true"
     aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r1p:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
@@ -171,6 +176,7 @@ exports[`Can search for and send emoji 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="true"
+    aria-haspopup="true"
     aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r74:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
@@ -206,6 +212,7 @@ exports[`Can search for and send emoji with the keyboard 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="true"
+    aria-haspopup="true"
     aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":ra3:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"

src/reactions/RaisedHandIndicator.tsx

@@ -16,6 +16,7 @@ import "@formatjs/intl-durationformat/polyfill";
 import { DurationFormat } from "@formatjs/intl-durationformat";
 
 import { ReactionIndicator } from "./ReactionIndicator";
+import { useTranslation } from "react-i18next";
 
 const durationFormatter = new DurationFormat(undefined, {
   minutesDisplay: "always",
@@ -35,6 +36,7 @@ export function RaisedHandIndicator({
   showTimer?: boolean;
   onClick?: () => void;
 }): ReactNode {
+  const { t } = useTranslation();
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
   const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
@@ -83,7 +85,7 @@ export function RaisedHandIndicator({
   if (onClick) {
     return (
       <button
-        aria-label="lower raised hand"
+        aria-label={t("action.lower_hand")}
         style={{
           display: "contents",
           background: "none",