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) => { + const ariaProps = { + 'aria-labelledby': 'settingTitle', + 'aria-describedby': 'extraInfo', + }; + + return ( + ); +}; + class NotificationsTab extends React.PureComponent { static defaultProps = { activeSection: '', @@ -596,8 +610,8 @@ class NotificationsTab extends React.PureComponent { DropdownIndicator: () => null, Menu: () => null, MenuList: () => null, + Input, }} - aria-labelledby='notificationTriggerCustom' onChange={this.handleChangeForCustomKeysWithNotificationInput} value={this.state.customKeysWithNotification} inputValue={this.state.customKeysWithNotificationInputValue}