From 6d7a8c6d72b2fe46712803fbbe2b0b46949786f1 Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Thu, 12 Jun 2025 10:44:47 -0400
Subject: [PATCH] [MM-63027] Add status region for the channel filter dropdown
 (#31390)

Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>
---
 .../searchable_channel_list.test.tsx.snap     | 10 ++++-
 .../components/searchable_channel_list.tsx    | 39 +++++++++++++------
 webapp/channels/src/i18n/en.json              |  2 +
 3 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap b/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap
index d920d319dc..5d5090377f 100644
--- a/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap
@@ -37,15 +37,23 @@ exports[`components/SearchableChannelList should match init snapshot 1`] = `
     <div
       id="modalPreferenceContainer"
     >
+      <div
+        aria-atomic="true"
+        className="sr-only"
+        role="status"
+      >
+        Channel type filter set to {filterType}
+      </div>
       <Menu
         menu={
           Object {
-            "aria-label": "Browse channels",
+            "aria-label": "Channel type filter",
             "id": "browseChannelsDropdown",
           }
         }
         menuButton={
           Object {
+            "aria-label": "Channel type filter",
             "children": <React.Fragment>
               <Memo(MemoizedFormattedMessage)
                 defaultMessage="Channel Type: All"
diff --git a/webapp/channels/src/components/searchable_channel_list.tsx b/webapp/channels/src/components/searchable_channel_list.tsx
index d084036dbd..21c54271be 100644
--- a/webapp/channels/src/components/searchable_channel_list.tsx
+++ b/webapp/channels/src/components/searchable_channel_list.tsx
@@ -525,18 +525,33 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
             </>
         );
         const channelDropdown = (
-            <Menu.Container
-                menuButton={{
-                    id: 'menuWrapper',
-                    children: menuButton,
-                }}
-                menu={{
-                    id: 'browseChannelsDropdown',
-                    'aria-label': this.props.intl.formatMessage({id: 'more_channels.title', defaultMessage: 'Browse channels'}),
-                }}
-            >
-                {channelDropdownItems.map((item) => item)}
-            </Menu.Container >
+            <>
+                <div
+                    role='status'
+                    aria-atomic='true'
+                    className='sr-only'
+                >
+                    {this.props.intl.formatMessage({
+                        id: 'more_channels.channel_type_filter.filter_type_set',
+                        defaultMessage: 'Channel type filter set to {filterType}',
+                    }, {
+                        filterType: this.props.filter,
+                    })}
+                </div>
+                <Menu.Container
+                    menuButton={{
+                        id: 'menuWrapper',
+                        children: menuButton,
+                        'aria-label': this.props.intl.formatMessage({id: 'more_channels.channel_type_filter', defaultMessage: 'Channel type filter'}),
+                    }}
+                    menu={{
+                        id: 'browseChannelsDropdown',
+                        'aria-label': this.props.intl.formatMessage({id: 'more_channels.channel_type_filter', defaultMessage: 'Channel type filter'}),
+                    }}
+                >
+                    {channelDropdownItems.map((item) => item)}
+                </Menu.Container>
+            </>
         );
 
         const hideJoinedButtonClass = classNames('get-app__checkbox', {checked: this.props.rememberHideJoinedChannelsChecked});
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 6cf2283aef..342e6b4266 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4639,6 +4639,8 @@
   "modal.manual_status.title_offline": "Your status is set to \"Offline\"",
   "modal.manual_status.title_ooo": "Your status is set to \"Out of office\"",
   "more_channels.channel_purpose": "Channel Information: Membership Indicator: Joined, Member count {memberCount} , Purpose: {channelPurpose}",
+  "more_channels.channel_type_filter": "Channel type filter",
+  "more_channels.channel_type_filter.filter_type_set": "Channel type filter set to {filterType}",
   "more_channels.count": "{count} Results",
   "more_channels.count_one": "1 Result",
   "more_channels.count_zero": "0 Results",