feat(client): remove extra form elements in the settings (#50996)

client/src/components/settings/email.tsx

@@ -227,16 +227,14 @@ function EmailSettings({
       </FullWidthRow>
       <Spacer size='medium' />
       <FullWidthRow>
-        <form id='form-quincy-email' onSubmit={e => e.preventDefault()}>
-          <ToggleButtonSetting
-            action={t('settings.email.weekly')}
-            flag={sendQuincyEmail}
-            flagName='sendQuincyEmail'
-            offLabel={t('buttons.no-thanks')}
-            onLabel={t('buttons.yes-please')}
-            toggleFlag={() => updateQuincyEmail(!sendQuincyEmail)}
-          />
-        </form>
+        <ToggleButtonSetting
+          action={t('settings.email.weekly')}
+          flag={sendQuincyEmail}
+          flagName='sendQuincyEmail'
+          offLabel={t('buttons.no-thanks')}
+          onLabel={t('buttons.yes-please')}
+          toggleFlag={() => updateQuincyEmail(!sendQuincyEmail)}
+        />
       </FullWidthRow>
     </div>
   );

client/src/components/settings/keyboard-shortcuts.tsx

@@ -16,10 +16,7 @@ export default function KeyboardShortcutsSettings({
   const { t } = useTranslation();
 
   return (
-    <form
-      onSubmit={(e: React.FormEvent) => e.preventDefault()}
-      data-testid='fcc-enable-shortcuts-setting'
-    >
+    <>
       <ToggleButtonSetting
         action={t('settings.labels.keyboard-shortcuts')}
         flag={keyboardShortcuts}
@@ -31,7 +28,7 @@ export default function KeyboardShortcutsSettings({
         }}
       />
       <Spacer size='medium'></Spacer>
-    </form>
+    </>
   );
 }
 

client/src/components/settings/scrollbar-width.tsx

@@ -34,7 +34,7 @@ export default function ScrollbarWidthSettings(): JSX.Element {
   /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
 
   return (
-    <form onSubmit={(e: React.FormEvent) => e.preventDefault()}>
+    <>
       <label htmlFor='scrollbar-width-slider'>
         {t('settings.scrollbar-width')}:
         <span
@@ -79,7 +79,7 @@ export default function ScrollbarWidthSettings(): JSX.Element {
         </div>
       </div>
       <Spacer size='medium'></Spacer>
-    </form>
+    </>
   );
 }
 

client/src/components/settings/sound.tsx

@@ -39,7 +39,7 @@ export default function SoundSettings({
   }
 
   return (
-    <form onSubmit={(e: React.FormEvent) => e.preventDefault()}>
+    <>
       <ToggleButtonSetting
         action={t('settings.labels.sound-mode')}
         explain={t('settings.sound-mode')}
@@ -65,7 +65,7 @@ export default function SoundSettings({
         onInput={handleVolumeChange}
       />
       <Spacer size='medium'></Spacer>
-    </form>
+    </>
   );
 }
 

client/src/components/settings/theme.tsx

@@ -21,20 +21,18 @@ export default function ThemeSettings({
   const { t } = useTranslation();
 
   return (
-    <form onSubmit={(e: React.FormEvent): void => e.preventDefault()}>
-      <ToggleButtonSetting
-        action={t('settings.labels.night-mode')}
-        flag={currentTheme === Themes.Night}
-        flagName='currentTheme'
-        offLabel={t('buttons.off')}
-        onLabel={t('buttons.on')}
-        toggleFlag={() => {
-          toggleNightMode(
-            currentTheme === Themes.Night ? Themes.Default : Themes.Night
-          );
-        }}
-      />
-    </form>
+    <ToggleButtonSetting
+      action={t('settings.labels.night-mode')}
+      flag={currentTheme === Themes.Night}
+      flagName='currentTheme'
+      offLabel={t('buttons.off')}
+      onLabel={t('buttons.on')}
+      toggleFlag={() => {
+        toggleNightMode(
+          currentTheme === Themes.Night ? Themes.Default : Themes.Night
+        );
+      }}
+    />
   );
 }
 

client/src/components/settings/toggle-button-setting.tsx

@@ -10,51 +10,48 @@ export default function ToggleButtonSetting({
   flag,
   flagName,
   toggleFlag,
-  ...restProps
+  offLabel,
+  onLabel
 }: ToggleSettingProps): JSX.Element {
   return (
-    <div className='toggle-setting-container'>
-      <fieldset
-        {...(explain && {
-          'aria-labelledby': `legend${flagName} desc${flagName}`
-        })}
-      >
-        <legend
-          className='sr-only'
-          {...(explain && { id: `legend${flagName}` })}
+    <fieldset
+      className='toggle-setting-container'
+      {...(explain && {
+        'aria-labelledby': `legend${flagName} desc${flagName}`
+      })}
+    >
+      <legend className='sr-only' {...(explain && { id: `legend${flagName}` })}>
+        {action}
+      </legend>
+      <div className='toggle-description'>
+        <p aria-hidden={true}>{action}</p>
+        {explain ? <p id={`desc${flagName}`}>{explain}</p> : null}
+      </div>
+      <div className='toggle-button-group'>
+        <button
+          aria-pressed={flag}
+          {...(!flag && { onClick: toggleFlag })}
+          value='1'
+          className='toggle-button-right'
         >
-          {action}
-        </legend>
-        <div className='toggle-description'>
-          <p aria-hidden={true}>{action}</p>
-          {explain ? <p id={`desc${flagName}`}>{explain}</p> : null}
-        </div>
-        <div className='toggle-button-group'>
-          <button
-            aria-pressed={flag}
-            {...(!flag && { onClick: toggleFlag })}
-            value='1'
-            className='toggle-button-right'
-          >
-            <span>
-              {restProps.onLabel}
-              {flag ? <ToggleCheck className='checkIcon' /> : null}
-            </span>
-          </button>
-          <button
-            aria-pressed={!flag}
-            {...(flag && { onClick: toggleFlag })}
-            value='2'
-            className='toggle-button-left'
-          >
-            <span>
-              {restProps.offLabel}
-              {!flag ? <ToggleCheck className='checkIcon' /> : null}
-            </span>
-          </button>
-        </div>
-      </fieldset>
-    </div>
+          <span>
+            {onLabel}
+            {flag ? <ToggleCheck className='checkIcon' /> : null}
+          </span>
+        </button>
+        <button
+          aria-pressed={!flag}
+          {...(flag && { onClick: toggleFlag })}
+          value='2'
+          className='toggle-button-left'
+        >
+          <span>
+            {offLabel}
+            {!flag ? <ToggleCheck className='checkIcon' /> : null}
+          </span>
+        </button>
+      </div>
+    </fieldset>
   );
 }
 

client/src/components/settings/toggle-radio-setting.tsx

@@ -18,56 +18,53 @@ export default function ToggleRadioSetting({
   flag,
   flagName,
   toggleFlag,
-  ...restProps
+  offLabel,
+  onLabel
 }: ToggleSettingProps): JSX.Element {
   const firstRadioId = `radioA${flagName}`;
   const secondRadioId = `radioB${flagName}`;
 
   return (
-    <div className='toggle-setting-container'>
-      <fieldset
-        {...(explain && {
-          'aria-labelledby': `legend${flagName} desc${flagName}`
-        })}
-      >
-        <legend
-          className='sr-only'
-          {...(explain && { id: `legend${flagName}` })}
-        >
-          {action}
-        </legend>
-        <div className='toggle-description'>
-          <p aria-hidden={true}>{action}</p>
-          {explain ? <p id={`desc${flagName}`}>{explain}</p> : null}
-        </div>
-        <div className='toggle-radio-group'>
-          <label htmlFor={firstRadioId}>
-            <input
-              id={firstRadioId}
-              type='radio'
-              {...(flag && { defaultChecked: true })}
-              {...(!flag && { onChange: toggleFlag })}
-              name={flagName}
-              value='1'
-            />
-            <span className='custom-circle'></span>
-            <span>{restProps.onLabel}</span>
-          </label>
-          <label htmlFor={secondRadioId}>
-            <input
-              id={secondRadioId}
-              type='radio'
-              {...(!flag && { defaultChecked: true })}
-              {...(flag && { onChange: toggleFlag })}
-              name={flagName}
-              value='2'
-            />
-            <span className='custom-circle' />
-            <span>{restProps.offLabel}</span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
+    <fieldset
+      className='toggle-setting-container'
+      {...(explain && {
+        'aria-labelledby': `legend${flagName} desc${flagName}`
+      })}
+    >
+      <legend className='sr-only' {...(explain && { id: `legend${flagName}` })}>
+        {action}
+      </legend>
+      <div className='toggle-description'>
+        <p aria-hidden={true}>{action}</p>
+        {explain ? <p id={`desc${flagName}`}>{explain}</p> : null}
+      </div>
+      <div className='toggle-radio-group'>
+        <label htmlFor={firstRadioId}>
+          <input
+            id={firstRadioId}
+            type='radio'
+            {...(flag && { defaultChecked: true })}
+            {...(!flag && { onChange: toggleFlag })}
+            name={flagName}
+            value='1'
+          />
+          <span className='custom-circle'></span>
+          <span>{onLabel}</span>
+        </label>
+        <label htmlFor={secondRadioId}>
+          <input
+            id={secondRadioId}
+            type='radio'
+            {...(!flag && { defaultChecked: true })}
+            {...(flag && { onChange: toggleFlag })}
+            name={flagName}
+            value='2'
+          />
+          <span className='custom-circle' />
+          <span>{offLabel}</span>
+        </label>
+      </div>
+    </fieldset>
   );
 }
 

client/src/components/settings/toggle-setting.css

@@ -1,5 +1,7 @@
 .toggle-setting-container {
   margin-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
 }
 
 .toggle-description {
@@ -16,11 +18,6 @@
   font-size: 0.8rem;
 }
 
-.toggle-setting-container fieldset {
-  display: flex;
-  justify-content: space-between;
-}
-
 .toggle-button-group {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -122,7 +119,7 @@
 }
 
 @media (max-width: 35rem) {
-  .toggle-setting-container fieldset {
+  .toggle-setting-container {
     flex-direction: column;
     margin-bottom: 1rem;
   }