[MA-50]: Provide fieldsets for groups of form controls (#29905)

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.tsx

@@ -364,13 +364,22 @@ export default function ChannelNotificationsModal(props: Props) {
                 handleClose={handleHide}
             />
             <main className='channel-notifications-settings-modal__body'>
-                <ModalSection
+                <fieldset aria-labelledby='channel-notifications-settings-modal-legend'>
-                    title={formatMessage({
+                    <ModalSection
-                        id: 'channel_notifications.muteAndIgnore',
+                        title={
-                        defaultMessage: 'Mute or ignore',
+                            <legend
-                    })}
+                                style={{all: 'unset'}}
-                    content={muteOrIgnoreSectionContent}
+                                id='channel-notifications-settings-modal-legend'
-                />
+                            >
+                                {formatMessage({
+                                    id: 'channel_notifications.muteAndIgnore',
+                                    defaultMessage: 'Mute or ignore',
+                                })}
+                            </legend>
+                        }
+                        content={muteOrIgnoreSectionContent}
+                    />
+                </fieldset>
                 {desktopAndMobileNotificationSectionContent}
                 {props.collapsedReplyThreads &&
                     <>

webapp/channels/src/components/widgets/modals/components/base_setting_item.scss

@@ -60,12 +60,16 @@
     &__fieldset-checkbox-ctr {
         display: flex;
         flex-direction: row;
+        align-items: center;
+        margin-bottom: 5px;
+        gap: 8px;
     }
 
     &__fieldset-checkbox {
         display: flex;
         flex-direction: row;
         align-items: center;
+        margin-bottom: 0;
         cursor: pointer;
         font-size: 14px;
         gap: 8px;

webapp/channels/src/components/widgets/modals/components/checkbox_setting_item.tsx

@@ -37,22 +37,26 @@ export default function CheckboxSettingItem({
     descriptionAboveContent = false,
 }: Props) {
     const content = (
-        <fieldset
+        <div
             key={inputFieldData.name}
             className='mm-modal-generic-section-item__fieldset-checkbox-ctr'
         >
-            <label className='mm-modal-generic-section-item__fieldset-checkbox'>
+            <input
-                <input
+                className='mm-modal-generic-section-item__input-checkbox'
-                    className='mm-modal-generic-section-item__input-checkbox'
+                data-testid={inputFieldData.dataTestId}
-                    data-testid={inputFieldData.dataTestId}
+                type='checkbox'
-                    type='checkbox'
+                name={inputFieldData.name}
-                    name={inputFieldData.name}
+                id={inputFieldData.name.replaceAll(' ', '-')}
-                    checked={inputFieldValue}
+                checked={inputFieldValue}
-                    onChange={(e) => handleChange(e.target.checked)}
+                onChange={(e) => handleChange(e.target.checked)}
-                />
+            />
+            <label
+                htmlFor={inputFieldData.name.replaceAll(' ', '-')}
+                className='mm-modal-generic-section-item__fieldset-checkbox'
+            >
                 {inputFieldTitle}
             </label>
-        </fieldset>
+        </div>
     );
 
     return (