refactor(forms): simplify form handling and button behavior (#10441)

Removed redundant handleSave and handleSubmit props in domain settings.
Integrated form submission logic directly into form components, ensuring
consistent behavior and reducing complexity. Updated button components
to explicitly support the "type" attribute for improved accessibility
and functionality.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx

@@ -15,6 +15,7 @@ export const SaveButton = ({ onSave, disabled }: SaveButtonProps) => {
       accent="blue"
       disabled={disabled}
       onClick={onSave}
+      type="submit"
       Icon={IconDeviceFloppy}
     />
   );

packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx

@@ -34,16 +34,18 @@ const StyledDescription = styled.div`
 
 type SettingsRadioCardProps = {
   value: string;
-  handleClick: (value: string) => void;
+  handleSelect: (value: string) => void;
   isSelected: boolean;
   title: string;
   description?: string;
   Icon?: IconComponent;
+  role?: string;
+  ariaChecked?: boolean;
 };
 
 export const SettingsRadioCard = ({
   value,
-  handleClick,
+  handleSelect,
   title,
   description,
   isSelected,
@@ -51,8 +53,10 @@ export const SettingsRadioCard = ({
 }: SettingsRadioCardProps) => {
   const theme = useTheme();
 
+  const onClick = () => handleSelect(value);
+
   return (
-    <StyledRadioCardContent onClick={() => handleClick(value)}>
+    <StyledRadioCardContent tabIndex={0} onClick={onClick}>
       {Icon && <Icon size={theme.icon.size.xl} color={theme.color.gray50} />}
       <span>
         {title && <StyledTitle>{title}</StyledTitle>}

packages/twenty-front/src/modules/settings/components/SettingsRadioCardContainer.tsx

@@ -25,16 +25,18 @@ export const SettingsRadioCardContainer = ({
   onChange,
 }: SettingsRadioCardContainerProps) => {
   return (
-    <StyledRadioCardContainer>
+    <StyledRadioCardContainer role="radiogroup">
       {options.map((option) => (
         <SettingsRadioCard
           key={option.value}
+          role="radio"
           value={option.value}
           isSelected={value === option.value}
-          handleClick={onChange}
+          handleSelect={onChange}
           title={option.title}
           description={option.description}
           Icon={option.Icon}
+          ariaChecked={value === option.value}
         />
       ))}
     </StyledRadioCardContainer>

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOOIDCForm.tsx

@@ -30,6 +30,7 @@ const StyledLinkContainer = styled.div`
 const StyledButtonCopy = styled.div`
   align-items: end;
   display: flex;
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
 `;
 
 export const SettingsSSOOIDCForm = () => {
@@ -70,6 +71,7 @@ export const SettingsSSOOIDCForm = () => {
                   });
                   navigator.clipboard.writeText(authorizedUrl);
                 }}
+                type="button"
               />
             </StyledButtonCopy>
           </StyledContainer>
@@ -94,6 +96,7 @@ export const SettingsSSOOIDCForm = () => {
                   });
                   navigator.clipboard.writeText(redirectionUrl);
                 }}
+                type="button"
               />
             </StyledButtonCopy>
           </StyledContainer>

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx

@@ -52,6 +52,7 @@ const StyledLinkContainer = styled.div`
 const StyledButtonCopy = styled.div`
   align-items: end;
   display: flex;
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
 `;
 
 export const SettingsSSOSAMLForm = () => {
@@ -136,6 +137,7 @@ export const SettingsSSOSAMLForm = () => {
             Icon={IconUpload}
             onClick={handleUploadFileClick}
             title={t`Upload file`}
+            type="button"
           ></Button>
           {isXMLMetadataValid() && (
             <IconCheck
@@ -157,7 +159,8 @@ export const SettingsSSOSAMLForm = () => {
               Icon={IconDownload}
               onClick={downloadMetadata}
               title={t`Download file`}
-            ></Button>
+              type="button"
+            />
           </StyledContainer>
           <HorizontalSeparator text={'Or'} />
           <StyledContainer>
@@ -181,6 +184,7 @@ export const SettingsSSOSAMLForm = () => {
                   });
                   navigator.clipboard.writeText(acsUrl);
                 }}
+                type="button"
               />
             </StyledButtonCopy>
           </StyledContainer>
@@ -205,6 +209,7 @@ export const SettingsSSOSAMLForm = () => {
                   });
                   navigator.clipboard.writeText(entityID);
                 }}
+                type="button"
               />
             </StyledButtonCopy>
           </StyledContainer>