Add context and comments to button text, label and title in email verification dialog (#8810)

* add context and comment for translators to button text in email verification dialog

* shorten comment

* add comment for other string

* tweak comment

* tweak again

1 files changed, 15 insertions, 3 deletions

diff --git a/src/components/dialogs/EmailDialog/screens/Verify.tsx b/src/components/dialogs/EmailDialog/screens/Verify.tsx
index dabd0d2f2..07aef6145 100644
--- a/src/components/dialogs/EmailDialog/screens/Verify.tsx
+++ b/src/components/dialogs/EmailDialog/screens/Verify.tsx
@@ -211,7 +211,9 @@ export function Verify({config, showScreen}: ScreenProps<ScreenID.Verify>) {
               <Trans>Verify your email</Trans>
             )
           ) : (
-            <Trans>Verify email code</Trans>
+            <Trans comment="Dialog title when a user is verifying their email address by entering a code they have been sent">
+              Verify email code
+            </Trans>
           )}
         </Text>
 
@@ -345,7 +347,13 @@ export function Verify({config, showScreen}: ScreenProps<ScreenID.Verify>) {
           {state.error && <Admonition type="error">{state.error}</Admonition>}
 
           <Button
-            label={_(msg`Verify code`)}
+            label={_(
+              msg({
+                message: `Verify code`,
+                context: `action`,
+                comment: `Button text and accessibility label for action to verify the user's email address using the code entered`,
+              }),
+            )}
             size="large"
             variant="solid"
             color="primary"
@@ -356,7 +364,11 @@ export function Verify({config, showScreen}: ScreenProps<ScreenID.Verify>) {
               state.mutationStatus === 'pending'
             }>
             <ButtonText>
-              <Trans>Verify code</Trans>
+              <Trans
+                context="action"
+                comment="Button text and accessibility label for action to verify the user's email address using the code entered">
+                Verify code
+              </Trans>
             </ButtonText>
             {state.mutationStatus === 'pending' && <ButtonIcon icon={Loader} />}
           </Button>