From 9aaa52136c08bf64940bc9e7e7826a3a5270da07 Mon Sep 17 00:00:00 2001
From: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Date: Tue, 11 Feb 2025 21:16:06 +0530
Subject: [PATCH] [MM-61683]: Ensure radio button groups are properly formed
 (#30013)

* MM-61683: Ensure radio button groups are properly formed

* MM-61683: Fix the failing i18 CI

* MM-61683: Fix desktop notification translation IDs

* MM-61683: Fix lint-style

* MM-61683: Update name attribute inside channel notification modal
Add aria-label inside RadioSettingItem
Update snapshot

* MM-61683: Revert creating a constant for default messages and id

* MM-61683: Add legend tag inside radio setting item component

* MM-61683: Update snapshot

---------

Co-authored-by: Saurabh Sharma <saurabh.sharma@brightscout.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../channel_notifications_modal.test.tsx.snap |  66 +++--
 .../channel_notifications_modal.tsx           |  32 +--
 .../channel_notifications_modal/utils.tsx     | 252 +++++++++---------
 .../modals/components/radio_setting_item.tsx  |   7 +-
 4 files changed, 195 insertions(+), 162 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 3379dbf451..e9cef16198 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
@@ -201,6 +201,11 @@ Object {
                       <fieldset
                         class="mm-modal-generic-section-item__fieldset-radio"
                       >
+                        <legend
+                          class="hidden-label"
+                        >
+                          Notify me about…
+                        </legend>
                         <label
                           class="mm-modal-generic-section-item__label-radio"
                         >
@@ -208,7 +213,7 @@ Object {
                             checked=""
                             data-testid="desktopNotification-all"
                             id="desktopNotification-all"
-                            name="desktopNotification-all"
+                            name="desktop"
                             type="radio"
                             value="all"
                           />
@@ -221,7 +226,7 @@ Object {
                           <input
                             data-testid="desktopNotification-mention"
                             id="desktopNotification-mention"
-                            name="desktopNotification-mention"
+                            name="desktop"
                             type="radio"
                             value="mention"
                           />
@@ -233,7 +238,7 @@ Object {
                           <input
                             data-testid="desktopNotification-none"
                             id="desktopNotification-none"
-                            name="desktopNotification-none"
+                            name="desktop"
                             type="radio"
                             value="none"
                           />
@@ -637,6 +642,11 @@ Object {
                       <fieldset
                         class="mm-modal-generic-section-item__fieldset-radio"
                       >
+                        <legend
+                          class="hidden-label"
+                        >
+                          Notify me about…
+                        </legend>
                         <label
                           class="mm-modal-generic-section-item__label-radio"
                         >
@@ -644,7 +654,7 @@ Object {
                             checked=""
                             data-testid="desktopNotification-all"
                             id="desktopNotification-all"
-                            name="desktopNotification-all"
+                            name="desktop"
                             type="radio"
                             value="all"
                           />
@@ -657,7 +667,7 @@ Object {
                           <input
                             data-testid="desktopNotification-mention"
                             id="desktopNotification-mention"
-                            name="desktopNotification-mention"
+                            name="desktop"
                             type="radio"
                             value="mention"
                           />
@@ -669,7 +679,7 @@ Object {
                           <input
                             data-testid="desktopNotification-none"
                             id="desktopNotification-none"
-                            name="desktopNotification-none"
+                            name="desktop"
                             type="radio"
                             value="none"
                           />
@@ -836,13 +846,18 @@ Object {
                       <fieldset
                         class="mm-modal-generic-section-item__fieldset-radio"
                       >
+                        <legend
+                          class="hidden-label"
+                        >
+                          Notify me about…
+                        </legend>
                         <label
                           class="mm-modal-generic-section-item__label-radio"
                         >
                           <input
                             data-testid="MobileNotification-all"
                             id="MobileNotification-all"
-                            name="MobileNotification-all"
+                            name="push"
                             type="radio"
                             value="all"
                           />
@@ -855,7 +870,7 @@ Object {
                             checked=""
                             data-testid="MobileNotification-mention"
                             id="MobileNotification-mention"
-                            name="MobileNotification-mention"
+                            name="push"
                             type="radio"
                             value="mention"
                           />
@@ -868,7 +883,7 @@ Object {
                           <input
                             data-testid="MobileNotification-none"
                             id="MobileNotification-none"
-                            name="MobileNotification-none"
+                            name="push"
                             type="radio"
                             value="none"
                           />
@@ -1530,6 +1545,11 @@ Object {
                       <fieldset
                         class="mm-modal-generic-section-item__fieldset-radio"
                       >
+                        <legend
+                          class="hidden-label"
+                        >
+                          Notify me about…
+                        </legend>
                         <label
                           class="mm-modal-generic-section-item__label-radio"
                         >
@@ -1537,7 +1557,7 @@ Object {
                             checked=""
                             data-testid="desktopNotification-all"
                             id="desktopNotification-all"
-                            name="desktopNotification-all"
+                            name="desktop"
                             type="radio"
                             value="all"
                           />
@@ -1550,7 +1570,7 @@ Object {
                           <input
                             data-testid="desktopNotification-mention"
                             id="desktopNotification-mention"
-                            name="desktopNotification-mention"
+                            name="desktop"
                             type="radio"
                             value="mention"
                           />
@@ -1562,7 +1582,7 @@ Object {
                           <input
                             data-testid="desktopNotification-none"
                             id="desktopNotification-none"
-                            name="desktopNotification-none"
+                            name="desktop"
                             type="radio"
                             value="none"
                           />
@@ -2047,6 +2067,11 @@ Object {
                       <fieldset
                         class="mm-modal-generic-section-item__fieldset-radio"
                       >
+                        <legend
+                          class="hidden-label"
+                        >
+                          Notify me about…
+                        </legend>
                         <label
                           class="mm-modal-generic-section-item__label-radio"
                         >
@@ -2054,7 +2079,7 @@ Object {
                             checked=""
                             data-testid="desktopNotification-all"
                             id="desktopNotification-all"
-                            name="desktopNotification-all"
+                            name="desktop"
                             type="radio"
                             value="all"
                           />
@@ -2067,7 +2092,7 @@ Object {
                           <input
                             data-testid="desktopNotification-mention"
                             id="desktopNotification-mention"
-                            name="desktopNotification-mention"
+                            name="desktop"
                             type="radio"
                             value="mention"
                           />
@@ -2079,7 +2104,7 @@ Object {
                           <input
                             data-testid="desktopNotification-none"
                             id="desktopNotification-none"
-                            name="desktopNotification-none"
+                            name="desktop"
                             type="radio"
                             value="none"
                           />
@@ -2564,6 +2589,11 @@ Object {
                       <fieldset
                         class="mm-modal-generic-section-item__fieldset-radio"
                       >
+                        <legend
+                          class="hidden-label"
+                        >
+                          Notify me about…
+                        </legend>
                         <label
                           class="mm-modal-generic-section-item__label-radio"
                         >
@@ -2571,7 +2601,7 @@ Object {
                             checked=""
                             data-testid="desktopNotification-all"
                             id="desktopNotification-all"
-                            name="desktopNotification-all"
+                            name="desktop"
                             type="radio"
                             value="all"
                           />
@@ -2584,7 +2614,7 @@ Object {
                           <input
                             data-testid="desktopNotification-mention"
                             id="desktopNotification-mention"
-                            name="desktopNotification-mention"
+                            name="desktop"
                             type="radio"
                             value="mention"
                           />
@@ -2596,7 +2626,7 @@ Object {
                           <input
                             data-testid="desktopNotification-none"
                             id="desktopNotification-none"
-                            name="desktopNotification-none"
+                            name="desktop"
                             type="radio"
                             value="none"
                           />
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 b184d50b8b..48fb56f2cc 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
@@ -240,22 +240,22 @@ export default function ChannelNotificationsModal(props: Props) {
                         handleChange={(e) => handleChange({push: e.target.value})}
                     />
                     {props.collapsedReplyThreads && settings.push === 'mention' &&
-                    <CheckboxSettingItem
-                        dataTestId='mobile-reply-threads-checkbox-section'
-                        title={formatMessage({
-                            id: 'channel_notifications.ThreadsReplyTitle',
-                            defaultMessage: 'Thread reply notifications',
-                        })}
-                        inputFieldTitle={
-                            <FormattedMessage
-                                id='channel_notifications.checkbox.threadsReplyTitle'
-                                defaultMessage="Notify me about replies to threads I\'m following"
-                            />
-                        }
-                        inputFieldValue={settings.push_threads === 'all'}
-                        inputFieldData={utils.MobileReplyThreadsInputFieldData}
-                        handleChange={(e) => handleChange({push_threads: e ? 'all' : 'mention'})}
-                    />}
+                        <CheckboxSettingItem
+                            dataTestId='mobile-reply-threads-checkbox-section'
+                            title={formatMessage({
+                                id: 'channel_notifications.ThreadsReplyTitle',
+                                defaultMessage: 'Thread reply notifications',
+                            })}
+                            inputFieldTitle={
+                                <FormattedMessage
+                                    id='channel_notifications.checkbox.threadsReplyTitle'
+                                    defaultMessage="Notify me about replies to threads I\'m following"
+                                />
+                            }
+                            inputFieldValue={settings.push_threads === 'all'}
+                            inputFieldData={utils.MobileReplyThreadsInputFieldData}
+                            handleChange={(e) => handleChange({push_threads: e ? 'all' : 'mention'})}
+                        />}
                 </>
             )}
         </>
diff --git a/webapp/channels/src/components/channel_notifications_modal/utils.tsx b/webapp/channels/src/components/channel_notifications_modal/utils.tsx
index efb8606d68..8fdd14e0b5 100644
--- a/webapp/channels/src/components/channel_notifications_modal/utils.tsx
+++ b/webapp/channels/src/components/channel_notifications_modal/utils.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {defineMessage, FormattedMessage} from 'react-intl';
 
 import type {FieldsetCheckbox} from 'components/widgets/modals/components/checkbox_setting_item';
 import type {FieldsetRadio} from 'components/widgets/modals/components/radio_setting_item';
@@ -41,69 +41,70 @@ export const AutoFollowThreadsInputFieldData: FieldsetCheckbox = {
     dataTestId: 'autoFollowThreads',
 };
 
-export const desktopNotificationInputFieldData = (defaultOption: string): FieldsetRadio => {
-    return {
-        options: [
-            {
-                dataTestId: `desktopNotification-${NotificationLevels.ALL}`,
-                title: (
-                    <FormattedMessage
-                        id='channelNotifications.desktopNotification.allMessages'
-                        defaultMessage='All new messages {optionalDefault}'
-                        values={{
-                            optionalDefault: defaultOption === NotificationLevels.ALL ? (
-                                <FormattedMessage
-                                    id='channel_notifications.default'
-                                    defaultMessage='(default)'
-                                />) : undefined,
-                        }}
-                    />
-                ),
-                name: `desktopNotification-${NotificationLevels.ALL}`,
-                key: `desktopNotification-${NotificationLevels.ALL}`,
-                value: NotificationLevels.ALL,
-            },
-            {
-                dataTestId: `desktopNotification-${NotificationLevels.MENTION}`,
-                title: (
-                    <FormattedMessage
-                        id='channelNotifications.desktopNotification.mention'
-                        defaultMessage='Mentions, direct messages, and keywords only {optionalDefault}'
-                        values={{
-                            optionalDefault: defaultOption === NotificationLevels.MENTION ? (
-                                <FormattedMessage
-                                    id='channel_notifications.default'
-                                    defaultMessage='(default)'
-                                />) : undefined,
-                        }}
-                    />
-                ),
-                name: `desktopNotification-${NotificationLevels.MENTION}`,
-                key: `desktopNotification-${NotificationLevels.MENTION}`,
-                value: NotificationLevels.MENTION,
-            },
-            {
-                dataTestId: `desktopNotification-${NotificationLevels.NONE}`,
-                title: (
-                    <FormattedMessage
-                        id='channelNotifications.desktopNotification.nothing'
-                        defaultMessage='Nothing {optionalDefault}'
-                        values={{
-                            optionalDefault: defaultOption === NotificationLevels.NONE ? (
-                                <FormattedMessage
-                                    id='channel_notifications.default'
-                                    defaultMessage='(default)'
-                                />) : undefined,
-                        }}
-                    />
-                ),
-                name: `desktopNotification-${NotificationLevels.NONE}`,
-                key: `desktopNotification-${NotificationLevels.NONE}`,
-                value: NotificationLevels.NONE,
-            },
-        ],
-    };
-};
+const defaultMessage = defineMessage({
+    id: 'channel_notifications.default',
+    defaultMessage: '(default)',
+});
+
+export const desktopNotificationInputFieldData = (defaultOption: string): FieldsetRadio => ({
+    options: [
+        {
+            dataTestId: `desktopNotification-${NotificationLevels.ALL}`,
+            title: (
+                <FormattedMessage
+                    id='channelNotifications.desktopNotification.allMessages'
+                    defaultMessage='All new messages {optionalDefault}'
+                    values={{
+                        optionalDefault: defaultOption === NotificationLevels.ALL ? (
+                            <FormattedMessage
+                                {...defaultMessage}
+                            />) : undefined,
+                    }}
+                />
+            ),
+            name: 'desktop',
+            key: `desktopNotification-${NotificationLevels.ALL}`,
+            value: NotificationLevels.ALL,
+        },
+        {
+            dataTestId: `desktopNotification-${NotificationLevels.MENTION}`,
+            title: (
+                <FormattedMessage
+                    id='channelNotifications.desktopNotification.mention'
+                    defaultMessage='Mentions, direct messages, and keywords only {optionalDefault}'
+                    values={{
+                        optionalDefault: defaultOption === NotificationLevels.MENTION ? (
+                            <FormattedMessage
+                                {...defaultMessage}
+                            />) : undefined,
+                    }}
+                />
+            ),
+            name: 'desktop',
+            key: `desktopNotification-${NotificationLevels.MENTION}`,
+            value: NotificationLevels.MENTION,
+        },
+        {
+            dataTestId: `desktopNotification-${NotificationLevels.NONE}`,
+            title: (
+                <FormattedMessage
+                    id='channelNotifications.desktopNotification.nothing'
+                    defaultMessage='Nothing {optionalDefault}'
+                    values={{
+                        optionalDefault: defaultOption === NotificationLevels.NONE ? (
+                            <FormattedMessage
+                                {...defaultMessage}
+                            />) : undefined,
+                    }}
+                />
+            ),
+            name: 'desktop',
+            key: `desktopNotification-${NotificationLevels.NONE}`,
+            value: NotificationLevels.NONE,
+        },
+    ],
+}
+);
 
 export const desktopNotificationSoundsCheckboxFieldData: FieldsetCheckbox = {
     name: 'desktopNotificationSoundsCheckbox',
@@ -116,69 +117,66 @@ export const desktopNotificationSoundsSelectFieldData: FieldsetReactSelect = {
     options: optionsOfMessageNotificationSoundsSelect,
 };
 
-export const mobileNotificationInputFieldData = (defaultOption: string): FieldsetRadio => {
-    return {
-        options: [
-            {
-                dataTestId: `MobileNotification-${NotificationLevels.ALL}`,
-                title: (
-                    <FormattedMessage
-                        id='channelNotifications.mobileNotification.newMessages'
-                        defaultMessage='All new messages {optionalDefault}'
-                        values={{
-                            optionalDefault: defaultOption === NotificationLevels.ALL ? (
-                                <FormattedMessage
-                                    id='channel_notifications.default'
-                                    defaultMessage='(default)'
-                                />) : undefined,
-                        }}
-                    />
-                ),
-                name: `MobileNotification-${NotificationLevels.ALL}`,
-                key: `MobileNotification-${NotificationLevels.ALL}`,
-                value: NotificationLevels.ALL,
-            },
-            {
-                dataTestId: `MobileNotification-${NotificationLevels.MENTION}`,
-                title: (
-                    <FormattedMessage
-                        id='channelNotifications.mobileNotification.mention'
-                        defaultMessage='Mentions, direct messages, and keywords only {optionalDefault}'
-                        values={{
-                            optionalDefault: defaultOption === NotificationLevels.MENTION ? (
-                                <FormattedMessage
-                                    id='channel_notifications.default'
-                                    defaultMessage='(default)'
-                                />) : undefined,
-                        }}
-                    />
-                ),
-                name: `MobileNotification-${NotificationLevels.MENTION}`,
-                key: `MobileNotification-${NotificationLevels.MENTION}`,
-                value: NotificationLevels.MENTION,
-            },
-            {
-                dataTestId: `MobileNotification-${NotificationLevels.NONE}`,
-                title: (
-                    <FormattedMessage
-                        id='channelNotifications.mobileNotification.nothing'
-                        defaultMessage='Nothing {optionalDefault}'
-                        values={{
-                            optionalDefault: defaultOption === NotificationLevels.NONE ? (
-                                <FormattedMessage
-                                    id='channel_notifications.default'
-                                    defaultMessage='(default)'
-                                />) : undefined,
-                        }}
-                    />
-                ),
-                name: `MobileNotification-${NotificationLevels.NONE}`,
-                key: `MobileNotification-${NotificationLevels.NONE}`,
-                value: NotificationLevels.NONE,
-            },
-        ],
-    };
-};
+export const mobileNotificationInputFieldData = (defaultOption: string): FieldsetRadio => ({
+    options: [
+        {
+            dataTestId: `MobileNotification-${NotificationLevels.ALL}`,
+            title: (
+                <FormattedMessage
+                    id='channelNotifications.mobileNotification.newMessages'
+                    defaultMessage='All new messages {optionalDefault}'
+                    values={{
+                        optionalDefault: defaultOption === NotificationLevels.ALL ? (
+                            <FormattedMessage
+                                {...defaultMessage}
+                            />) : undefined,
+                    }}
+                />
+            ),
+            name: 'push',
+            key: `MobileNotification-${NotificationLevels.ALL}`,
+            value: NotificationLevels.ALL,
+        },
+        {
+            dataTestId: `MobileNotification-${NotificationLevels.MENTION}`,
+            title: (
+                <FormattedMessage
+
+                    id='channelNotifications.mobileNotification.mention'
+                    defaultMessage='Mentions, direct messages, and keywords only {optionalDefault}'
+                    values={{
+                        optionalDefault: defaultOption === NotificationLevels.MENTION ? (
+                            <FormattedMessage
+                                {...defaultMessage}
+                            />) : undefined,
+                    }}
+                />
+            ),
+            name: 'push',
+            key: `MobileNotification-${NotificationLevels.MENTION}`,
+            value: NotificationLevels.MENTION,
+        },
+        {
+            dataTestId: `MobileNotification-${NotificationLevels.NONE}`,
+            title: (
+                <FormattedMessage
+                    id='channelNotifications.mobileNotification.nothing'
+                    defaultMessage='Nothing {optionalDefault}'
+                    values={{
+                        optionalDefault: defaultOption === NotificationLevels.NONE ? (
+                            <FormattedMessage
+                                {...defaultMessage}
+                            />) : undefined,
+                    }}
+                />
+            ),
+            name: 'push',
+            key: `MobileNotification-${NotificationLevels.NONE}`,
+            value: NotificationLevels.NONE,
+        },
+    ],
+}
+);
 
 export default {
     desktopNotificationInputFieldData,
diff --git a/webapp/channels/src/components/widgets/modals/components/radio_setting_item.tsx b/webapp/channels/src/components/widgets/modals/components/radio_setting_item.tsx
index 6a2a728f77..9f578b1ff7 100644
--- a/webapp/channels/src/components/widgets/modals/components/radio_setting_item.tsx
+++ b/webapp/channels/src/components/widgets/modals/components/radio_setting_item.tsx
@@ -54,7 +54,12 @@ function RadioSettingItem({
     });
 
     const content = (
-        <fieldset className='mm-modal-generic-section-item__fieldset-radio'>
+        <fieldset
+            className='mm-modal-generic-section-item__fieldset-radio'
+        >
+            <legend className='hidden-label'>
+                {title}
+            </legend>
             {[...fields]}
         </fieldset>
     );