Allow keyboard modal form submission (#38826)

app/javascript/mastodon/components/form_fields/text_input.module.scss

@@ -1,7 +1,6 @@
 .input {
   box-sizing: border-box;
   display: block;
-  resize: vertical;
   width: 100%;
   padding: 10px 16px;
   font-family: inherit;
@@ -50,6 +49,10 @@
   }
 }
 
+textarea.input {
+  resize: vertical;
+}
+
 .iconWrapper {
   position: relative;
 }

app/javascript/mastodon/components/modal_shell/index.tsx

@@ -1,16 +1,17 @@
 import classNames from 'classnames';
 
+import { polymorphicForwardRef } from '@/types/polymorphic';
+
 interface ModalShellProps {
   className?: string;
   children?: React.ReactNode;
 }
 
-export const ModalShell: React.FC<ModalShellProps> = ({
+export const ModalShell = polymorphicForwardRef<'form', ModalShellProps>(
-  children,
+  ({ as: Comp = 'form', children, className, ...restProps }, ref) => (
-  className,
+    <Comp
-}) => {
+      {...restProps}
-  return (
+      ref={ref}
-    <div
       className={classNames(
         'modal-root__modal',
         'safety-action-modal',
@@ -18,9 +19,10 @@ export const ModalShell: React.FC<ModalShellProps> = ({
       )}
     >
       {children}
-    </div>
+    </Comp>
-  );
+  ),
-};
+);
+ModalShell.displayName = 'ModalShell';
 
 export const ModalShellBody: React.FC<ModalShellProps> = ({
   children,

app/javascript/mastodon/features/account_timeline/modals/join_modal.tsx

@@ -97,7 +97,7 @@ export const AccountJoinModal: FC<{
   }, [anniversary, handle, dispatch, isMe]);
 
   return (
-    <ModalShell className={classes.joinShell}>
+    <ModalShell as='div' className={classes.joinShell}>
       <ModalShellBody className={classes.joinWrapper}>
         <AccountAnniversaryImage anniversary={anniversary} />
 

app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx

@@ -65,7 +65,7 @@ export const ConfirmationModal: React.FC<
   }, [onClose, onSecondary]);
 
   return (
-    <ModalShell>
+    <ModalShell onSubmit={handleClick}>
       <ModalShellBody className={className}>
         <h1 id={titleId}>{title}</h1>
         {message && <p>{message}</p>}
@@ -99,6 +99,7 @@ export const ConfirmationModal: React.FC<
 
         {/* eslint-disable jsx-a11y/no-autofocus -- we are in a modal and thus autofocusing is justified */}
         <Button
+          type='submit'
           onClick={handleClick}
           loading={updating}
           disabled={disabled}