[MM-63027] Add status region for the channel filter dropdown (#31390)

Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>

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"

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={{
+                <div
-                    id: 'menuWrapper',
+                    role='status'
-                    children: menuButton,
+                    aria-atomic='true'
-                }}
+                    className='sr-only'
-                menu={{
+                >
-                    id: 'browseChannelsDropdown',
+                    {this.props.intl.formatMessage({
-                    'aria-label': this.props.intl.formatMessage({id: 'more_channels.title', defaultMessage: 'Browse channels'}),
+                        id: 'more_channels.channel_type_filter.filter_type_set',
-                }}
+                        defaultMessage: 'Channel type filter set to {filterType}',
-            >
+                    }, {
-                {channelDropdownItems.map((item) => item)}
+                        filterType: this.props.filter,
-            </Menu.Container >
+                    })}
+                </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});

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",