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