From a51e97f3189c2ade6b79df181d692453cf55981b Mon Sep 17 00:00:00 2001
From: Joshua Irmer <irmer@gonicus.de>
Date: Wed, 12 Mar 2025 14:06:55 +0100
Subject: [PATCH] fix(settings): notification tab restructure

Signed-off-by: Joshua Irmer <irmer@gonicus.de>
---
 .../components/web/NotificationsTab.tsx       | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/react/features/settings/components/web/NotificationsTab.tsx b/react/features/settings/components/web/NotificationsTab.tsx
index a4b829035f..2456539356 100644
--- a/react/features/settings/components/web/NotificationsTab.tsx
+++ b/react/features/settings/components/web/NotificationsTab.tsx
@@ -190,14 +190,14 @@ class NotificationsTab extends AbstractDialogTab<IProps, any> {
         const classes = withStyles.getClasses(this.props);
 
         return (
-            <div
+            <form
                 className = { classes.container }
                 key = 'sounds'>
                 {showSoundsSettings && (
-                    <div className = { classes.column }>
-                        <h2 className = { classes.title }>
+                    <fieldset className = { classes.column }>
+                        <legend className = { classes.title }>
                             {t('settings.playSounds')}
-                        </h2>
+                        </legend>
                         {enableReactions && <Checkbox
                             checked = { soundsReactions && !disabledSounds.includes('REACTION_SOUND') }
                             className = { classes.checkbox }
@@ -244,13 +244,13 @@ class NotificationsTab extends AbstractDialogTab<IProps, any> {
                             label = { t('settings.participantKnocking') }
                             name = 'soundsParticipantKnocking'
                             onChange = { this._onChange } />
-                    </div>
+                    </fieldset>
                 )}
                 {showNotificationsSettings && (
-                    <div className = { classes.column }>
-                        <h2 className = { classes.title }>
+                    <fieldset className = { classes.column }>
+                        <legend className = { classes.title }>
                             {t('notify.displayNotifications')}
-                        </h2>
+                        </legend>
                         {
                             Object.keys(enabledNotifications).map(key => (
                                 <Checkbox
@@ -264,9 +264,9 @@ class NotificationsTab extends AbstractDialogTab<IProps, any> {
                                     onChange = { e => this._onEnabledNotificationsChanged(e, key) } />
                             ))
                         }
-                    </div>
+                    </fieldset>
                 )}
-            </div>
+            </form>
         );
     }
 }