tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Allow keyboard modal form submission

Browse Source 
Port 03045425b7323e8ce4e6ce81942d798a500c655a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Echo 2026-04-28 14:37:58 +02:00 committed by Claire
parent b08e2b8e60
commit f37da7d231
4 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/flavours/glitch/components/form_fields/text_input.module.scss
View File

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

20
app/javascript/flavours/glitch/components/modal_shell/index.tsx
View File

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

2
app/javascript/flavours/glitch/features/account_timeline/modals/join_modal.tsx
View File

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

3
app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx
View File

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