[MM-63007][MM-63004][MM-63020][MM-63009][MM-63008] More accessibility fixes around Search (#31409)

* [MM-63008] Make collapse button on search bar an actual button

* [MM-63004][MM-63020] Convert search box to floating-ui, fix some of the roles and labels that were incorrect

* [MM-63009] Add radiogroup and radio roles to the search box types

* [MM-63007] Ensure search box reads out number of results with suggestion items

* Fix playwright tests

* PR feedback

* Remove floating ui overlay

* Remove unnecessary .first() by being more specific about the search box

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/playwright/specs/functional/channels/search/search_box_clear_button.spec.ts

@@ -19,14 +19,14 @@ test('MM-64155 search box clear button should not leave type badge after closing
 
     // # Type something in the search box
     const searchText = 'abcdef';
-    const {searchInput} = channelsPage.searchPopover;
+    const {searchInput} = channelsPage.searchBox;
     await searchInput.pressSequentially(searchText);
 
     // * Verify text was entered
     await expect(searchInput).toHaveValue(searchText);
 
     // # Click the clear button
-    await channelsPage.searchPopover.clearIfPossible();
+    await channelsPage.searchBox.clearIfPossible();
 
     // * Verify the input is cleared
     await expect(searchInput).toHaveValue('');
@@ -35,7 +35,7 @@ test('MM-64155 search box clear button should not leave type badge after closing
     await channelsPage.page.click('body', {position: {x: 0, y: 0}});
 
     // * Verify the search box is closed
-    await expect(channelsPage.searchPopover.container).not.toBeVisible();
+    await expect(channelsPage.searchBox.container).not.toBeVisible();
 
     // * Verify there is no search type badge/chip in the search bar
     // The search type badge is rendered when searchType is either 'messages' or 'files'

e2e-tests/playwright/specs/functional/channels/search/search_box_suggestions.spec.ts

@@ -22,12 +22,12 @@ test('Search box suggestion must be case insensitive', async ({pw}) => {
 
     // Should work as expected when using lowercase
     // # Type in lowercase "off" to search for the "Off-Topic" channel
-    const {searchInput} = channelsPage.searchPopover;
+    const {searchInput} = channelsPage.searchBox;
     await searchInput.pressSequentially(`In:${searchWord}`);
 
     // * The suggestion should be visible
-    await expect(channelsPage.searchPopover.selectedSuggestion).toBeVisible();
-    await expect(channelsPage.searchPopover.selectedSuggestion).toHaveText(channelName);
+    await expect(channelsPage.searchBox.selectedSuggestion).toBeVisible();
+    await expect(channelsPage.searchBox.selectedSuggestion).toHaveText(channelName);
 
     // # Press Enter to select the suggestion and another Enter to search
     await searchInput.press('Enter');
@@ -41,14 +41,14 @@ test('Search box suggestion must be case insensitive', async ({pw}) => {
     await channelsPage.globalHeader.openSearch();
 
     // # Clear its content
-    await channelsPage.searchPopover.clearIfPossible();
+    await channelsPage.searchBox.clearIfPossible();
 
     // # Type in uppercase "OFF" to search for the "Off-Topic" channel
-    await searchInput.pressSequentially(`In:${searchWord.toUpperCase()}`);
+    await searchInput.type(`In:${searchWord.toUpperCase()}`);
 
     // * The suggestion should be visible
-    await expect(channelsPage.searchPopover.selectedSuggestion).toBeVisible();
-    await expect(channelsPage.searchPopover.selectedSuggestion).toHaveText(channelName);
+    await expect(channelsPage.searchBox.selectedSuggestion).toBeVisible();
+    await expect(channelsPage.searchBox.selectedSuggestion).toHaveText(channelName);
 
     // # Press Enter to select the suggestion and another Enter to search
     await searchInput.press('Enter');
@@ -73,12 +73,12 @@ test('remove extra whitespace when selecting a user', async ({pw}) => {
     await channelsPage.globalHeader.openSearch();
 
     // # Type "from:" followed by multiple spaces
-    const {searchInput} = channelsPage.searchPopover;
+    const {searchInput} = channelsPage.searchBox;
     await searchInput.pressSequentially(`from:    ${admin.username}`);
 
     // * The suggestion should be visible
-    await expect(channelsPage.searchPopover.selectedSuggestion).toBeVisible();
-    await expect(channelsPage.searchPopover.selectedSuggestion).toHaveText(`@` + admin.username);
+    await expect(channelsPage.searchBox.selectedSuggestion).toBeVisible();
+    await expect(channelsPage.searchBox.selectedSuggestion).toHaveText(`@` + admin.username);
 
     // # Press enter to validate the selection
     await searchInput.press('Enter');