[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/lib/src/index.ts

@@ -22,7 +22,7 @@ export {
 export {
     components,
     GlobalHeader,
-    SearchPopover,
+    SearchBox,
     ChannelsCenterView,
     ChannelsSidebarLeft,
     ChannelsSidebarRight,

e2e-tests/playwright/lib/src/ui/components/channels/search_box.ts

@@ -3,7 +3,7 @@
 
 import {Locator, expect} from '@playwright/test';
 
-export default class SearchPopover {
+export default class SearchBox {
     readonly container: Locator;
 
     readonly messagesButton;
@@ -30,6 +30,7 @@ export default class SearchPopover {
     async clearIfPossible() {
         if (await this.clearButton.isVisible()) {
             await this.clearButton.click();
+            await expect(this.searchInput).toHaveValue('');
             return true;
         }
         return false;

e2e-tests/playwright/lib/src/ui/components/index.ts

@@ -13,7 +13,7 @@ import FindChannelsModal from './channels/find_channels_modal';
 import SettingsModal from './channels/settings/settings_modal';
 import Footer from './footer';
 import GlobalHeader from './global_header';
-import SearchPopover from './channels/search_popover';
+import SearchBox from './channels/search_box';
 import MainHeader from './main_header';
 import PostDotMenu from './channels/post_dot_menu';
 import PostReminderMenu from './channels/post_reminder_menu';
@@ -47,7 +47,7 @@ import DraftPost from './channels/draft_post';
 
 const components = {
     GlobalHeader,
-    SearchPopover,
+    SearchBox,
     ChannelsCenterView,
     ChannelsSidebarLeft,
     ChannelsSidebarRight,
@@ -94,7 +94,7 @@ const components = {
 export {
     components,
     GlobalHeader,
-    SearchPopover,
+    SearchBox,
     ChannelsCenterView,
     ChannelsSidebarLeft,
     ChannelsSidebarRight,

e2e-tests/playwright/lib/src/ui/pages/channels.ts

@@ -14,7 +14,7 @@ export default class ChannelsPage {
 
     readonly globalHeader;
     readonly userAccountMenuButton;
-    readonly searchPopover;
+    readonly searchBox;
     readonly centerView;
     readonly scheduledDraftModal;
     readonly sidebarLeft;
@@ -40,7 +40,7 @@ export default class ChannelsPage {
 
         // The main areas of the app
         this.globalHeader = new components.GlobalHeader(this, page.locator('#global-header'));
-        this.searchPopover = new components.SearchPopover(page.locator('#searchPopover'));
+        this.searchBox = new components.SearchBox(page.locator('#searchBox'));
         this.centerView = new components.ChannelsCenterView(page.getByTestId('channel_view'), page);
         this.sidebarLeft = new components.ChannelsSidebarLeft(page.locator('#SidebarContainer'));
         this.sidebarRight = new components.ChannelsSidebarRight(page.locator('#sidebar-right'));

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');