Add a few <Dialog.Description> in dialogs

frontend/src/components/PasswordConfirmation.tsx

@@ -84,16 +84,18 @@ const PasswordConfirmationModal: React.FC<Props> = ({
     <Dialog.Dialog open={open} onOpenChange={onOpenChange}>
       <Dialog.Title>{title}</Dialog.Title>
 
-      <Form.Root onSubmit={onSubmit}>
-        <Form.Field name="password">
-          <Form.Label>{t("common.password")}</Form.Label>
-          <Form.PasswordControl autoFocus autoComplete="current-password" />
-        </Form.Field>
+      <Dialog.Description asChild>
+        <Form.Root onSubmit={onSubmit}>
+          <Form.Field name="password">
+            <Form.Label>{t("common.password")}</Form.Label>
+            <Form.PasswordControl autoFocus autoComplete="current-password" />
+          </Form.Field>
 
-        <Button type="submit" kind="primary" destructive={destructive}>
-          {t("action.confirm")}
-        </Button>
-      </Form.Root>
+          <Button type="submit" kind="primary" destructive={destructive}>
+            {t("action.confirm")}
+          </Button>
+        </Form.Root>
+      </Dialog.Description>
 
       <Dialog.Close asChild>
         <Button kind="tertiary">{t("action.cancel")}</Button>

frontend/src/components/Session/EndSessionButton.tsx

@@ -44,7 +44,7 @@ const EndSessionButton: React.FC<
         {t("frontend.end_session_button.confirmation_modal_title")}
       </Dialog.Title>
 
-      {children && <Dialog.Description>{children}</Dialog.Description>}
+      {children && <Dialog.Description asChild>{children}</Dialog.Description>}
 
       <Button
         type="button"

frontend/src/components/SessionDetail/EditSessionName.tsx

@@ -67,27 +67,31 @@ const EditSessionName: React.FC<Props> = ({ mutation, deviceName }) => {
     >
       <Dialog.Title>{t("frontend.session.set_device_name.title")}</Dialog.Title>
 
-      <Form.Root onSubmit={onSubmit}>
-        <Form.Field name="name">
-          <Form.Label>{t("frontend.session.set_device_name.label")}</Form.Label>
+      <Dialog.Description asChild>
+        <Form.Root onSubmit={onSubmit}>
+          <Form.Field name="name">
+            <Form.Label>
+              {t("frontend.session.set_device_name.label")}
+            </Form.Label>
 
-          <Form.TextControl
-            type="text"
-            required
-            defaultValue={deviceName}
-            ref={fieldRef}
-          />
+            <Form.TextControl
+              type="text"
+              required
+              defaultValue={deviceName}
+              ref={fieldRef}
+            />
 
-          <Form.HelpMessage>
-            {t("frontend.session.set_device_name.help")}
-          </Form.HelpMessage>
-        </Form.Field>
+            <Form.HelpMessage>
+              {t("frontend.session.set_device_name.help")}
+            </Form.HelpMessage>
+          </Form.Field>
 
-        <Form.Submit disabled={mutation.isPending}>
-          {mutation.isPending && <LoadingSpinner inline />}
-          {t("action.save")}
-        </Form.Submit>
-      </Form.Root>
+          <Form.Submit disabled={mutation.isPending}>
+            {mutation.isPending && <LoadingSpinner inline />}
+            {t("action.save")}
+          </Form.Submit>
+        </Form.Root>
+      </Dialog.Description>
 
       <Dialog.Close asChild>
         <Button kind="tertiary">{t("action.cancel")}</Button>

frontend/src/components/UserGreeting/UserGreeting.tsx

@@ -159,51 +159,53 @@ const UserGreeting: React.FC<Props> = ({ user, siteConfig }) => {
             name={data.matrix.displayName || data.matrix.mxid}
           />
 
-          <Form.Root onSubmit={onSubmit}>
-            <div className={styles.dialogForm}>
-              <Form.Field
-                name="displayname"
-                serverInvalid={
-                  setDisplayName.data?.setDisplayName.status === "INVALID"
-                }
-              >
-                <Form.Label>
-                  {t("frontend.account.edit_profile.display_name_label")}
-                </Form.Label>
+          <Dialog.Description asChild>
+            <Form.Root onSubmit={onSubmit}>
+              <div className={styles.dialogForm}>
+                <Form.Field
+                  name="displayname"
+                  serverInvalid={
+                    setDisplayName.data?.setDisplayName.status === "INVALID"
+                  }
+                >
+                  <Form.Label>
+                    {t("frontend.account.edit_profile.display_name_label")}
+                  </Form.Label>
 
-                <Form.ActionControl
-                  type="text"
-                  Icon={IconClose}
-                  autoComplete="name"
-                  defaultValue={data.matrix.displayName || undefined}
-                  actionLabel={t("action.clear")}
-                  ref={fieldRef}
-                  onActionClick={() => {
-                    if (fieldRef.current) {
-                      fieldRef.current.value = "";
-                      fieldRef.current.focus();
-                    }
-                  }}
-                />
+                  <Form.ActionControl
+                    type="text"
+                    Icon={IconClose}
+                    autoComplete="name"
+                    defaultValue={data.matrix.displayName || undefined}
+                    actionLabel={t("action.clear")}
+                    ref={fieldRef}
+                    onActionClick={() => {
+                      if (fieldRef.current) {
+                        fieldRef.current.value = "";
+                        fieldRef.current.focus();
+                      }
+                    }}
+                  />
 
-                <Form.HelpMessage>
-                  {t("frontend.account.edit_profile.display_name_help")}
-                </Form.HelpMessage>
-              </Form.Field>
+                  <Form.HelpMessage>
+                    {t("frontend.account.edit_profile.display_name_help")}
+                  </Form.HelpMessage>
+                </Form.Field>
 
-              <Form.Field name="mxid">
-                <Form.Label>
-                  {t("frontend.account.edit_profile.username_label")}
-                </Form.Label>
-                <Form.TextControl value={data.matrix.mxid} readOnly />
-              </Form.Field>
-            </div>
+                <Form.Field name="mxid">
+                  <Form.Label>
+                    {t("frontend.account.edit_profile.username_label")}
+                  </Form.Label>
+                  <Form.TextControl value={data.matrix.mxid} readOnly />
+                </Form.Field>
+              </div>
 
-            <Form.Submit disabled={setDisplayName.isPending}>
-              {setDisplayName.isPending && <LoadingSpinner inline />}
-              {t("action.save")}
-            </Form.Submit>
-          </Form.Root>
+              <Form.Submit disabled={setDisplayName.isPending}>
+                {setDisplayName.isPending && <LoadingSpinner inline />}
+                {t("action.save")}
+              </Form.Submit>
+            </Form.Root>
+          </Dialog.Description>
 
           <Dialog.Close asChild>
             <Button kind="tertiary">{t("action.cancel")}</Button>

frontend/src/routes/_account.index.tsx

@@ -156,17 +156,19 @@ const SignOutButton: React.FC<{ id: string }> = ({ id }) => {
     >
       <Dialog.Title>{t("frontend.account.sign_out.dialog")}</Dialog.Title>
 
-      <Button
-        type="button"
-        kind="primary"
-        destructive
-        onClick={() => mutation.mutate()}
-        disabled={mutation.isPending}
-        Icon={mutation.isPending ? undefined : IconSignOut}
-      >
-        {mutation.isPending && <LoadingSpinner inline />}
-        {t("action.sign_out")}
-      </Button>
+      <Dialog.Description asChild>
+        <Button
+          type="button"
+          kind="primary"
+          destructive
+          onClick={() => mutation.mutate()}
+          disabled={mutation.isPending}
+          Icon={mutation.isPending ? undefined : IconSignOut}
+        >
+          {mutation.isPending && <LoadingSpinner inline />}
+          {t("action.sign_out")}
+        </Button>
+      </Dialog.Description>
 
       <Dialog.Close asChild>
         <Button kind="tertiary">{t("action.cancel")}</Button>

frontend/tests/routes/account/__snapshots__/index.test.tsx.snap

@@ -29,6 +29,7 @@ exports[`Account home page > display name edit box > displays an error if the di
   </span>
   <form
     class="_root_19upo_16"
+    id="radix-_r_86_"
   >
     <div
       class="_dialogForm_0d9d49"
@@ -177,6 +178,7 @@ exports[`Account home page > display name edit box > lets edit the display name
   </span>
   <form
     class="_root_19upo_16"
+    id="radix-_r_1n_"
   >
     <div
       class="_dialogForm_0d9d49"