From 1999ff9263ecbe0fac2d180b7e37dff2fb66d863 Mon Sep 17 00:00:00 2001
From: Saurabh Sharma <saurabh.sharma@brightscout.com>
Date: Tue, 28 Jan 2025 21:43:38 +0530
Subject: [PATCH] [MA-50]: Provide fieldsets for groups of form controls
 (#29905)

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../channel_notifications_modal.test.tsx.snap | 902 ++++++++++--------
 .../channel_notifications_modal.tsx           |  23 +-
 .../modals/components/base_setting_item.scss  |   4 +
 .../components/checkbox_setting_item.tsx      |  26 +-
 4 files changed, 535 insertions(+), 420 deletions(-)

diff --git a/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap b/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
index 9c6c41ca74..3379dbf451 100644
--- a/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
@@ -63,83 +63,96 @@ Object {
             <main
               class="channel-notifications-settings-modal__body"
             >
-              <section
-                class="mm-modal-generic-section"
+              <fieldset
+                aria-labelledby="channel-notifications-settings-modal-legend"
               >
-                <div
-                  class="modalSectionHeader"
-                >
-                  <h4
-                    class="modalSectionTitle"
-                  >
-                    Mute or ignore
-                  </h4>
-                </div>
-                <div
-                  class="modalSectionContent"
+                <section
+                  class="mm-modal-generic-section"
                 >
                   <div
-                    class="mm-modal-generic-section-item"
+                    class="modalSectionHeader"
+                  >
+                    <h4
+                      class="modalSectionTitle"
+                    >
+                      <legend
+                        id="channel-notifications-settings-modal-legend"
+                        style="all: unset;"
+                      >
+                        Mute or ignore
+                      </legend>
+                    </h4>
+                  </div>
+                  <div
+                    class="modalSectionContent"
                   >
                     <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
+                      class="mm-modal-generic-section-item"
                     >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="muteChannel"
+                            id="mute-channel"
                             name="mute channel"
                             type="checkbox"
                           />
-                          Mute channel
-                        </label>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      Turns off notifications for this channel. You'll still see badges if you're mentioned.
-                    </p>
-                  </div>
-                  <div
-                    class="mm-modal-generic-section-item"
-                  >
-                    <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
-                    >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="mute-channel"
+                          >
+                            Mute channel
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        Turns off notifications for this channel. You'll still see badges if you're mentioned.
+                      </p>
+                    </div>
+                    <div
+                      class="mm-modal-generic-section-item"
+                    >
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
+                      >
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="ignoreMentions"
+                            id="ignore-mentions"
                             name="ignore mentions"
                             type="checkbox"
                           />
-                          Ignore mentions for @channel, @here and @all
-                        </label>
-                      </fieldset>
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="ignore-mentions"
+                          >
+                            Ignore mentions for @channel, @here and @all
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
+                      >
+                        When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
+                      </p>
                     </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
-                    </p>
                   </div>
-                </div>
-              </section>
+                </section>
+              </fieldset>
               <div
                 class="channel-notifications-settings-modal__divider"
               />
@@ -270,22 +283,24 @@ Object {
                       class="mm-modal-generic-section-item__content"
                       data-testid="mm-modal-generic-section-item__content"
                     >
-                      <fieldset
+                      <div
                         class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                       >
+                        <input
+                          checked=""
+                          class="mm-modal-generic-section-item__input-checkbox"
+                          data-testid="sameMobileSettingsDesktop"
+                          id="same-mobile-settings-as-Desktop"
+                          name="same mobile settings as Desktop"
+                          type="checkbox"
+                        />
                         <label
                           class="mm-modal-generic-section-item__fieldset-checkbox"
+                          for="same-mobile-settings-as-Desktop"
                         >
-                          <input
-                            checked=""
-                            class="mm-modal-generic-section-item__input-checkbox"
-                            data-testid="sameMobileSettingsDesktop"
-                            name="same mobile settings as Desktop"
-                            type="checkbox"
-                          />
                           Use the same notification settings as desktop
                         </label>
-                      </fieldset>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -320,21 +335,23 @@ Object {
                       class="mm-modal-generic-section-item__content"
                       data-testid="mm-modal-generic-section-item__content"
                     >
-                      <fieldset
+                      <div
                         class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                       >
+                        <input
+                          class="mm-modal-generic-section-item__input-checkbox"
+                          data-testid="autoFollowThreads"
+                          id="auto-follow-threads"
+                          name="auto follow threads"
+                          type="checkbox"
+                        />
                         <label
                           class="mm-modal-generic-section-item__fieldset-checkbox"
+                          for="auto-follow-threads"
                         >
-                          <input
-                            class="mm-modal-generic-section-item__input-checkbox"
-                            data-testid="autoFollowThreads"
-                            name="auto follow threads"
-                            type="checkbox"
-                          />
                           Automatically follow threads in this channel
                         </label>
-                      </fieldset>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -482,83 +499,96 @@ Object {
             <main
               class="channel-notifications-settings-modal__body"
             >
-              <section
-                class="mm-modal-generic-section"
+              <fieldset
+                aria-labelledby="channel-notifications-settings-modal-legend"
               >
-                <div
-                  class="modalSectionHeader"
-                >
-                  <h4
-                    class="modalSectionTitle"
-                  >
-                    Mute or ignore
-                  </h4>
-                </div>
-                <div
-                  class="modalSectionContent"
+                <section
+                  class="mm-modal-generic-section"
                 >
                   <div
-                    class="mm-modal-generic-section-item"
+                    class="modalSectionHeader"
+                  >
+                    <h4
+                      class="modalSectionTitle"
+                    >
+                      <legend
+                        id="channel-notifications-settings-modal-legend"
+                        style="all: unset;"
+                      >
+                        Mute or ignore
+                      </legend>
+                    </h4>
+                  </div>
+                  <div
+                    class="modalSectionContent"
                   >
                     <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
+                      class="mm-modal-generic-section-item"
                     >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="muteChannel"
+                            id="mute-channel"
                             name="mute channel"
                             type="checkbox"
                           />
-                          Mute channel
-                        </label>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      Turns off notifications for this channel. You'll still see badges if you're mentioned.
-                    </p>
-                  </div>
-                  <div
-                    class="mm-modal-generic-section-item"
-                  >
-                    <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
-                    >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="mute-channel"
+                          >
+                            Mute channel
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        Turns off notifications for this channel. You'll still see badges if you're mentioned.
+                      </p>
+                    </div>
+                    <div
+                      class="mm-modal-generic-section-item"
+                    >
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
+                      >
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="ignoreMentions"
+                            id="ignore-mentions"
                             name="ignore mentions"
                             type="checkbox"
                           />
-                          Ignore mentions for @channel, @here and @all
-                        </label>
-                      </fieldset>
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="ignore-mentions"
+                          >
+                            Ignore mentions for @channel, @here and @all
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
+                      >
+                        When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
+                      </p>
                     </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
-                    </p>
                   </div>
-                </div>
-              </section>
+                </section>
+              </fieldset>
               <div
                 class="channel-notifications-settings-modal__divider"
               />
@@ -770,21 +800,23 @@ Object {
                       class="mm-modal-generic-section-item__content"
                       data-testid="mm-modal-generic-section-item__content"
                     >
-                      <fieldset
+                      <div
                         class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                       >
+                        <input
+                          class="mm-modal-generic-section-item__input-checkbox"
+                          data-testid="sameMobileSettingsDesktop"
+                          id="same-mobile-settings-as-Desktop"
+                          name="same mobile settings as Desktop"
+                          type="checkbox"
+                        />
                         <label
                           class="mm-modal-generic-section-item__fieldset-checkbox"
+                          for="same-mobile-settings-as-Desktop"
                         >
-                          <input
-                            class="mm-modal-generic-section-item__input-checkbox"
-                            data-testid="sameMobileSettingsDesktop"
-                            name="same mobile settings as Desktop"
-                            type="checkbox"
-                          />
                           Use the same notification settings as desktop
                         </label>
-                      </fieldset>
+                      </div>
                     </div>
                   </div>
                   <div
@@ -877,21 +909,23 @@ Object {
                       class="mm-modal-generic-section-item__content"
                       data-testid="mm-modal-generic-section-item__content"
                     >
-                      <fieldset
+                      <div
                         class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                       >
+                        <input
+                          class="mm-modal-generic-section-item__input-checkbox"
+                          data-testid="autoFollowThreads"
+                          id="auto-follow-threads"
+                          name="auto follow threads"
+                          type="checkbox"
+                        />
                         <label
                           class="mm-modal-generic-section-item__fieldset-checkbox"
+                          for="auto-follow-threads"
                         >
-                          <input
-                            class="mm-modal-generic-section-item__input-checkbox"
-                            data-testid="autoFollowThreads"
-                            name="auto follow threads"
-                            type="checkbox"
-                          />
                           Automatically follow threads in this channel
                         </label>
-                      </fieldset>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -1039,83 +1073,96 @@ Object {
             <main
               class="channel-notifications-settings-modal__body"
             >
-              <section
-                class="mm-modal-generic-section"
+              <fieldset
+                aria-labelledby="channel-notifications-settings-modal-legend"
               >
-                <div
-                  class="modalSectionHeader"
-                >
-                  <h4
-                    class="modalSectionTitle"
-                  >
-                    Mute or ignore
-                  </h4>
-                </div>
-                <div
-                  class="modalSectionContent"
+                <section
+                  class="mm-modal-generic-section"
                 >
                   <div
-                    class="mm-modal-generic-section-item"
+                    class="modalSectionHeader"
+                  >
+                    <h4
+                      class="modalSectionTitle"
+                    >
+                      <legend
+                        id="channel-notifications-settings-modal-legend"
+                        style="all: unset;"
+                      >
+                        Mute or ignore
+                      </legend>
+                    </h4>
+                  </div>
+                  <div
+                    class="modalSectionContent"
                   >
                     <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
+                      class="mm-modal-generic-section-item"
                     >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="muteChannel"
+                            id="mute-channel"
                             name="mute channel"
                             type="checkbox"
                           />
-                          Mute channel
-                        </label>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      Turns off notifications for this channel. You'll still see badges if you're mentioned.
-                    </p>
-                  </div>
-                  <div
-                    class="mm-modal-generic-section-item"
-                  >
-                    <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
-                    >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="mute-channel"
+                          >
+                            Mute channel
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        Turns off notifications for this channel. You'll still see badges if you're mentioned.
+                      </p>
+                    </div>
+                    <div
+                      class="mm-modal-generic-section-item"
+                    >
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
+                      >
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="ignoreMentions"
+                            id="ignore-mentions"
                             name="ignore mentions"
                             type="checkbox"
                           />
-                          Ignore mentions for @channel, @here and @all
-                        </label>
-                      </fieldset>
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="ignore-mentions"
+                          >
+                            Ignore mentions for @channel, @here and @all
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
+                      >
+                        When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
+                      </p>
                     </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
-                    </p>
                   </div>
-                </div>
-              </section>
+                </section>
+              </fieldset>
               <div
                 class="AlertBanner info AlertBanner--app"
                 data-testid="channelNotificationsMutedBanner"
@@ -1181,21 +1228,23 @@ Object {
                       class="mm-modal-generic-section-item__content"
                       data-testid="mm-modal-generic-section-item__content"
                     >
-                      <fieldset
+                      <div
                         class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                       >
+                        <input
+                          class="mm-modal-generic-section-item__input-checkbox"
+                          data-testid="autoFollowThreads"
+                          id="auto-follow-threads"
+                          name="auto follow threads"
+                          type="checkbox"
+                        />
                         <label
                           class="mm-modal-generic-section-item__fieldset-checkbox"
+                          for="auto-follow-threads"
                         >
-                          <input
-                            class="mm-modal-generic-section-item__input-checkbox"
-                            data-testid="autoFollowThreads"
-                            name="auto follow threads"
-                            type="checkbox"
-                          />
                           Automatically follow threads in this channel
                         </label>
-                      </fieldset>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -1343,83 +1392,96 @@ Object {
             <main
               class="channel-notifications-settings-modal__body"
             >
-              <section
-                class="mm-modal-generic-section"
+              <fieldset
+                aria-labelledby="channel-notifications-settings-modal-legend"
               >
-                <div
-                  class="modalSectionHeader"
-                >
-                  <h4
-                    class="modalSectionTitle"
-                  >
-                    Mute or ignore
-                  </h4>
-                </div>
-                <div
-                  class="modalSectionContent"
+                <section
+                  class="mm-modal-generic-section"
                 >
                   <div
-                    class="mm-modal-generic-section-item"
+                    class="modalSectionHeader"
+                  >
+                    <h4
+                      class="modalSectionTitle"
+                    >
+                      <legend
+                        id="channel-notifications-settings-modal-legend"
+                        style="all: unset;"
+                      >
+                        Mute or ignore
+                      </legend>
+                    </h4>
+                  </div>
+                  <div
+                    class="modalSectionContent"
                   >
                     <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
+                      class="mm-modal-generic-section-item"
                     >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="muteChannel"
+                            id="mute-channel"
                             name="mute channel"
                             type="checkbox"
                           />
-                          Mute channel
-                        </label>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      Turns off notifications for this channel. You'll still see badges if you're mentioned.
-                    </p>
-                  </div>
-                  <div
-                    class="mm-modal-generic-section-item"
-                  >
-                    <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
-                    >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="mute-channel"
+                          >
+                            Mute channel
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        Turns off notifications for this channel. You'll still see badges if you're mentioned.
+                      </p>
+                    </div>
+                    <div
+                      class="mm-modal-generic-section-item"
+                    >
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
+                      >
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="ignoreMentions"
+                            id="ignore-mentions"
                             name="ignore mentions"
                             type="checkbox"
                           />
-                          Ignore mentions for @channel, @here and @all
-                        </label>
-                      </fieldset>
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="ignore-mentions"
+                          >
+                            Ignore mentions for @channel, @here and @all
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
+                      >
+                        When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
+                      </p>
                     </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
-                    </p>
                   </div>
-                </div>
-              </section>
+                </section>
+              </fieldset>
               <div
                 class="channel-notifications-settings-modal__divider"
               />
@@ -1631,22 +1693,24 @@ Object {
                       class="mm-modal-generic-section-item__content"
                       data-testid="mm-modal-generic-section-item__content"
                     >
-                      <fieldset
+                      <div
                         class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                       >
+                        <input
+                          checked=""
+                          class="mm-modal-generic-section-item__input-checkbox"
+                          data-testid="sameMobileSettingsDesktop"
+                          id="same-mobile-settings-as-Desktop"
+                          name="same mobile settings as Desktop"
+                          type="checkbox"
+                        />
                         <label
                           class="mm-modal-generic-section-item__fieldset-checkbox"
+                          for="same-mobile-settings-as-Desktop"
                         >
-                          <input
-                            checked=""
-                            class="mm-modal-generic-section-item__input-checkbox"
-                            data-testid="sameMobileSettingsDesktop"
-                            name="same mobile settings as Desktop"
-                            type="checkbox"
-                          />
                           Use the same notification settings as desktop
                         </label>
-                      </fieldset>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -1681,21 +1745,23 @@ Object {
                       class="mm-modal-generic-section-item__content"
                       data-testid="mm-modal-generic-section-item__content"
                     >
-                      <fieldset
+                      <div
                         class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                       >
+                        <input
+                          class="mm-modal-generic-section-item__input-checkbox"
+                          data-testid="autoFollowThreads"
+                          id="auto-follow-threads"
+                          name="auto follow threads"
+                          type="checkbox"
+                        />
                         <label
                           class="mm-modal-generic-section-item__fieldset-checkbox"
+                          for="auto-follow-threads"
                         >
-                          <input
-                            class="mm-modal-generic-section-item__input-checkbox"
-                            data-testid="autoFollowThreads"
-                            name="auto follow threads"
-                            type="checkbox"
-                          />
                           Automatically follow threads in this channel
                         </label>
-                      </fieldset>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -1843,83 +1909,96 @@ Object {
             <main
               class="channel-notifications-settings-modal__body"
             >
-              <section
-                class="mm-modal-generic-section"
+              <fieldset
+                aria-labelledby="channel-notifications-settings-modal-legend"
               >
-                <div
-                  class="modalSectionHeader"
-                >
-                  <h4
-                    class="modalSectionTitle"
-                  >
-                    Mute or ignore
-                  </h4>
-                </div>
-                <div
-                  class="modalSectionContent"
+                <section
+                  class="mm-modal-generic-section"
                 >
                   <div
-                    class="mm-modal-generic-section-item"
+                    class="modalSectionHeader"
+                  >
+                    <h4
+                      class="modalSectionTitle"
+                    >
+                      <legend
+                        id="channel-notifications-settings-modal-legend"
+                        style="all: unset;"
+                      >
+                        Mute or ignore
+                      </legend>
+                    </h4>
+                  </div>
+                  <div
+                    class="modalSectionContent"
                   >
                     <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
+                      class="mm-modal-generic-section-item"
                     >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="muteChannel"
+                            id="mute-channel"
                             name="mute channel"
                             type="checkbox"
                           />
-                          Mute channel
-                        </label>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      Turns off notifications for this channel. You'll still see badges if you're mentioned.
-                    </p>
-                  </div>
-                  <div
-                    class="mm-modal-generic-section-item"
-                  >
-                    <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
-                    >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="mute-channel"
+                          >
+                            Mute channel
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        Turns off notifications for this channel. You'll still see badges if you're mentioned.
+                      </p>
+                    </div>
+                    <div
+                      class="mm-modal-generic-section-item"
+                    >
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
+                      >
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="ignoreMentions"
+                            id="ignore-mentions"
                             name="ignore mentions"
                             type="checkbox"
                           />
-                          Ignore mentions for @channel, @here and @all
-                        </label>
-                      </fieldset>
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="ignore-mentions"
+                          >
+                            Ignore mentions for @channel, @here and @all
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
+                      >
+                        When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
+                      </p>
                     </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
-                    </p>
                   </div>
-                </div>
-              </section>
+                </section>
+              </fieldset>
               <div
                 class="channel-notifications-settings-modal__divider"
               />
@@ -2131,22 +2210,24 @@ Object {
                       class="mm-modal-generic-section-item__content"
                       data-testid="mm-modal-generic-section-item__content"
                     >
-                      <fieldset
+                      <div
                         class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                       >
+                        <input
+                          checked=""
+                          class="mm-modal-generic-section-item__input-checkbox"
+                          data-testid="sameMobileSettingsDesktop"
+                          id="same-mobile-settings-as-Desktop"
+                          name="same mobile settings as Desktop"
+                          type="checkbox"
+                        />
                         <label
                           class="mm-modal-generic-section-item__fieldset-checkbox"
+                          for="same-mobile-settings-as-Desktop"
                         >
-                          <input
-                            checked=""
-                            class="mm-modal-generic-section-item__input-checkbox"
-                            data-testid="sameMobileSettingsDesktop"
-                            name="same mobile settings as Desktop"
-                            type="checkbox"
-                          />
                           Use the same notification settings as desktop
                         </label>
-                      </fieldset>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -2181,21 +2262,23 @@ Object {
                       class="mm-modal-generic-section-item__content"
                       data-testid="mm-modal-generic-section-item__content"
                     >
-                      <fieldset
+                      <div
                         class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                       >
+                        <input
+                          class="mm-modal-generic-section-item__input-checkbox"
+                          data-testid="autoFollowThreads"
+                          id="auto-follow-threads"
+                          name="auto follow threads"
+                          type="checkbox"
+                        />
                         <label
                           class="mm-modal-generic-section-item__fieldset-checkbox"
+                          for="auto-follow-threads"
                         >
-                          <input
-                            class="mm-modal-generic-section-item__input-checkbox"
-                            data-testid="autoFollowThreads"
-                            name="auto follow threads"
-                            type="checkbox"
-                          />
                           Automatically follow threads in this channel
                         </label>
-                      </fieldset>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -2343,83 +2426,96 @@ Object {
             <main
               class="channel-notifications-settings-modal__body"
             >
-              <section
-                class="mm-modal-generic-section"
+              <fieldset
+                aria-labelledby="channel-notifications-settings-modal-legend"
               >
-                <div
-                  class="modalSectionHeader"
-                >
-                  <h4
-                    class="modalSectionTitle"
-                  >
-                    Mute or ignore
-                  </h4>
-                </div>
-                <div
-                  class="modalSectionContent"
+                <section
+                  class="mm-modal-generic-section"
                 >
                   <div
-                    class="mm-modal-generic-section-item"
+                    class="modalSectionHeader"
+                  >
+                    <h4
+                      class="modalSectionTitle"
+                    >
+                      <legend
+                        id="channel-notifications-settings-modal-legend"
+                        style="all: unset;"
+                      >
+                        Mute or ignore
+                      </legend>
+                    </h4>
+                  </div>
+                  <div
+                    class="modalSectionContent"
                   >
                     <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
+                      class="mm-modal-generic-section-item"
                     >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="muteChannel"
+                            id="mute-channel"
                             name="mute channel"
                             type="checkbox"
                           />
-                          Mute channel
-                        </label>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      Turns off notifications for this channel. You'll still see badges if you're mentioned.
-                    </p>
-                  </div>
-                  <div
-                    class="mm-modal-generic-section-item"
-                  >
-                    <div
-                      class="mm-modal-generic-section-item__content"
-                      data-testid="mm-modal-generic-section-item__content"
-                    >
-                      <fieldset
-                        class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="mute-channel"
+                          >
+                            Mute channel
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
                       >
-                        <label
-                          class="mm-modal-generic-section-item__fieldset-checkbox"
+                        Turns off notifications for this channel. You'll still see badges if you're mentioned.
+                      </p>
+                    </div>
+                    <div
+                      class="mm-modal-generic-section-item"
+                    >
+                      <div
+                        class="mm-modal-generic-section-item__content"
+                        data-testid="mm-modal-generic-section-item__content"
+                      >
+                        <div
+                          class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                         >
                           <input
                             class="mm-modal-generic-section-item__input-checkbox"
                             data-testid="ignoreMentions"
+                            id="ignore-mentions"
                             name="ignore mentions"
                             type="checkbox"
                           />
-                          Ignore mentions for @channel, @here and @all
-                        </label>
-                      </fieldset>
+                          <label
+                            class="mm-modal-generic-section-item__fieldset-checkbox"
+                            for="ignore-mentions"
+                          >
+                            Ignore mentions for @channel, @here and @all
+                          </label>
+                        </div>
+                      </div>
+                      <p
+                        class="mm-modal-generic-section-item__description"
+                        data-testid="mm-modal-generic-section-item__description"
+                      >
+                        When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
+                      </p>
                     </div>
-                    <p
-                      class="mm-modal-generic-section-item__description"
-                      data-testid="mm-modal-generic-section-item__description"
-                    >
-                      When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel
-                    </p>
                   </div>
-                </div>
-              </section>
+                </section>
+              </fieldset>
               <div
                 class="channel-notifications-settings-modal__divider"
               />
@@ -2631,22 +2727,24 @@ Object {
                       class="mm-modal-generic-section-item__content"
                       data-testid="mm-modal-generic-section-item__content"
                     >
-                      <fieldset
+                      <div
                         class="mm-modal-generic-section-item__fieldset-checkbox-ctr"
                       >
+                        <input
+                          checked=""
+                          class="mm-modal-generic-section-item__input-checkbox"
+                          data-testid="sameMobileSettingsDesktop"
+                          id="same-mobile-settings-as-Desktop"
+                          name="same mobile settings as Desktop"
+                          type="checkbox"
+                        />
                         <label
                           class="mm-modal-generic-section-item__fieldset-checkbox"
+                          for="same-mobile-settings-as-Desktop"
                         >
-                          <input
-                            checked=""
-                            class="mm-modal-generic-section-item__input-checkbox"
-                            data-testid="sameMobileSettingsDesktop"
-                            name="same mobile settings as Desktop"
-                            type="checkbox"
-                          />
                           Use the same notification settings as desktop
                         </label>
-                      </fieldset>
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.tsx b/webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.tsx
index 6779e1021e..b184d50b8b 100644
--- a/webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.tsx
+++ b/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
-                    title={formatMessage({
-                        id: 'channel_notifications.muteAndIgnore',
-                        defaultMessage: 'Mute or ignore',
-                    })}
-                    content={muteOrIgnoreSectionContent}
-                />
+                <fieldset aria-labelledby='channel-notifications-settings-modal-legend'>
+                    <ModalSection
+                        title={
+                            <legend
+                                style={{all: 'unset'}}
+                                id='channel-notifications-settings-modal-legend'
+                            >
+                                {formatMessage({
+                                    id: 'channel_notifications.muteAndIgnore',
+                                    defaultMessage: 'Mute or ignore',
+                                })}
+                            </legend>
+                        }
+                        content={muteOrIgnoreSectionContent}
+                    />
+                </fieldset>
                 {desktopAndMobileNotificationSectionContent}
                 {props.collapsedReplyThreads &&
                     <>
diff --git a/webapp/channels/src/components/widgets/modals/components/base_setting_item.scss b/webapp/channels/src/components/widgets/modals/components/base_setting_item.scss
index bc9f3111f9..cfc485892d 100644
--- a/webapp/channels/src/components/widgets/modals/components/base_setting_item.scss
+++ b/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;
diff --git a/webapp/channels/src/components/widgets/modals/components/checkbox_setting_item.tsx b/webapp/channels/src/components/widgets/modals/components/checkbox_setting_item.tsx
index c6d11589be..515f33d0b8 100644
--- a/webapp/channels/src/components/widgets/modals/components/checkbox_setting_item.tsx
+++ b/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
-                    className='mm-modal-generic-section-item__input-checkbox'
-                    data-testid={inputFieldData.dataTestId}
-                    type='checkbox'
-                    name={inputFieldData.name}
-                    checked={inputFieldValue}
-                    onChange={(e) => handleChange(e.target.checked)}
-                />
+            <input
+                className='mm-modal-generic-section-item__input-checkbox'
+                data-testid={inputFieldData.dataTestId}
+                type='checkbox'
+                name={inputFieldData.name}
+                id={inputFieldData.name.replaceAll(' ', '-')}
+                checked={inputFieldValue}
+                onChange={(e) => handleChange(e.target.checked)}
+            />
+            <label
+                htmlFor={inputFieldData.name.replaceAll(' ', '-')}
+                className='mm-modal-generic-section-item__fieldset-checkbox'
+            >
                 {inputFieldTitle}
             </label>
-        </fieldset>
+        </div>
     );
 
     return (