From 0e806bf8e862e710dff389153cb2686107fb896d Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Thu, 8 May 2025 10:43:52 -0400
Subject: [PATCH] [MM-62971][MM-63017] Search box accessibility fixes (#30910)

* [MM-62971] Add role='button' and focusability to the file suggestion list items

* [MM-63017] Add aria-label to Close button in Search
---
 .../new_search/extension_suggestions.tsx      | 19 +++++++++++++++++++
 .../src/components/new_search/search_box.tsx  |  4 ++++
 webapp/channels/src/i18n/en.json              |  2 ++
 3 files changed, 25 insertions(+)

diff --git a/webapp/channels/src/components/new_search/extension_suggestions.tsx b/webapp/channels/src/components/new_search/extension_suggestions.tsx
index 09d0d41345..e1c0e4e947 100644
--- a/webapp/channels/src/components/new_search/extension_suggestions.tsx
+++ b/webapp/channels/src/components/new_search/extension_suggestions.tsx
@@ -110,15 +110,34 @@ SuggestionProps<ExtensionItem>
         onClick(item.value, matchedPretext);
     }, [onClick, item.value, matchedPretext]);
 
+    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            optionClicked();
+        }
+    }, [optionClicked]);
+
     const labelName = messages[item.type] ?
         intl.formatMessage(messages[item.type]) :
         item.type;
 
+    const ariaLabel = intl.formatMessage({
+        id: 'search_file_extension_suggestion.aria_label',
+        defaultMessage: '{fileType} (.{extension})',
+    }, {
+        fileType: labelName,
+        extension: item.value,
+    });
+
     return (
         <SearchFileExtensionSuggestionContainer
             ref={ref}
             className={classNames({selected: isSelection})}
             onClick={optionClicked}
+            onKeyDown={handleKeyDown}
+            role='button'
+            tabIndex={0}
+            aria-label={ariaLabel}
         >
             <div className={classNames('file-icon', getCompassIconClassName(item.type))}/>
             {labelName}
diff --git a/webapp/channels/src/components/new_search/search_box.tsx b/webapp/channels/src/components/new_search/search_box.tsx
index 1b1cec64bb..77d98cc0fe 100644
--- a/webapp/channels/src/components/new_search/search_box.tsx
+++ b/webapp/channels/src/components/new_search/search_box.tsx
@@ -279,6 +279,10 @@ const SearchBox = forwardRef(
                     data-testid='searchBoxClose'
                     className='btn btn-icon btn-m'
                     onClick={closeHandler}
+                    aria-label={intl.formatMessage({
+                        id: 'search_bar.close',
+                        defaultMessage: 'Close',
+                    })}
                 >
                     <i className='icon icon-close'/>
                 </CloseIcon>
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index f7a1c6360c..63d6243855 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -5037,6 +5037,7 @@
   "scheduledPosts.title": "{prefix}Scheduled - {displayName} {siteName}",
   "search_bar.channels": "Channels",
   "search_bar.clear": "Clear",
+  "search_bar.close": "Close",
   "search_bar.file_types": "File types",
   "search_bar.files_tab": "Files",
   "search_bar.messages_tab": "Messages",
@@ -5054,6 +5055,7 @@
   "search_bar.usage.title_files": "File search options",
   "search_bar.usage.title_messages": "Message search options",
   "search_bar.users": "Users",
+  "search_file_extension_suggestion.aria_label": "{fileType} (.{extension})",
   "search_files_list_option.after": "Files after a date",
   "search_files_list_option.before": "Files before a date",
   "search_files_list_option.exclude": "Exclude search terms",