From 268b92191362115c42156aa945b2a3cd451ff937 Mon Sep 17 00:00:00 2001
From: Saurabh Sharma <saurabh.sharma@brightscout.com>
Date: Mon, 10 Mar 2025 22:22:47 +0530
Subject: [PATCH] [MM-61685]: Add described by prop to notifications settings
 (#29813)

* MM-61685: Add described by prop to notifications settings

* MM-61685: Fixed issue related to aria-described being overritten internally

* MM-61685: Moved Input component outside NotificationTab class component

* MM-61685: Fixed failing CI

---------

Co-authored-by: ayush-chauhan233 <ankur@brightscout.com>
Co-authored-by: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../user_settings_notifications.tsx            | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
index f7da46257c..191d631c4c 100644
--- a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
+++ b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
@@ -7,7 +7,8 @@ import React from 'react';
 import type {ChangeEvent} from 'react';
 import type {WrappedComponentProps} from 'react-intl';
 import {FormattedMessage, injectIntl} from 'react-intl';
-import type {OnChangeValue, StylesConfig} from 'react-select';
+import type {InputProps, OnChangeValue, StylesConfig} from 'react-select';
+import {components} from 'react-select';
 import CreatableReactSelect from 'react-select/creatable';
 
 import {LightbulbOutlineIcon} from '@mattermost/compass-icons/components';
@@ -227,6 +228,19 @@ function getDefaultStateFromProps(props: Props): State {
     };
 }
 
+const Input = (props: InputProps<MultiInputValue, true>) => {
+    const ariaProps = {
+        'aria-labelledby': 'settingTitle',
+        'aria-describedby': 'extraInfo',
+    };
+
+    return (
+        <components.Input
+            {...props}
+            {...ariaProps}
+        />);
+};
+
 class NotificationsTab extends React.PureComponent<Props, State> {
     static defaultProps = {
         activeSection: '',
@@ -596,8 +610,8 @@ class NotificationsTab extends React.PureComponent<Props, State> {
                             DropdownIndicator: () => null,
                             Menu: () => null,
                             MenuList: () => null,
+                            Input,
                         }}
-                        aria-labelledby='notificationTriggerCustom'
                         onChange={this.handleChangeForCustomKeysWithNotificationInput}
                         value={this.state.customKeysWithNotification}
                         inputValue={this.state.customKeysWithNotificationInputValue}