[C] Change show/hide to expand/collapse in annotation drawer

Author: jen-castiron

client/src/config/app/locale/en-US/json/shared/actions.json

@@ -96,6 +96,8 @@
     "view_resource": "$t(actions.view) $t(glossary.resource_one)",
     "visit": "Visit",
     "zoom": "Zoom",
+    "expand_passage": "Expand <0>passage</0>",
+    "collapse_passage": "Collapse <0>passage</0>",
     "dnd": {
       "move_up_position": "Move up one position",
       "move_down_position": "Move down one position",

client/src/global/components/Annotation/Annotation/TextContent/FromNodes/Wrapper.js

@@ -1,20 +1,29 @@
 import React from "react";
 import Collapse from "global/components/Collapse";
 import * as Styled from "./styles";
-import { useTranslation } from "react-i18next";
+import { Trans } from "react-i18next";
 import IconComposer from "global/components/utility/IconComposer";
 
 export default function FromNodesWrapper({ children, overlayLight }) {
-  const { t } = useTranslation();
   return (
     <Collapse stubHeight={200}>
       <Styled.Content focusOnVisible>
         <blockquote>{children}</blockquote>
         <Styled.Overlay $light={overlayLight} />
       </Styled.Content>
       <Styled.Toggle>
-        <span className="toggle-show-label">{t("actions.show")}</span>
-        <span className="toggle-hide-label">{t("actions.hide")}</span>
+        <span className="toggle-show-label">
+          <Trans
+            i18nKey={"actions.expand_passage"}
+            components={[<span className="screen-reader-text" />]}
+          />
+        </span>
+        <span className="toggle-hide-label">
+          <Trans
+            i18nKey={"actions.collapse_passage"}
+            components={[<span className="screen-reader-text" />]}
+          />
+        </span>
         <IconComposer icon="disclosureDown16" size={16} />
       </Styled.Toggle>
     </Collapse>