[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/cypress/tests/integration/channels/archived_channel/archive_channel_reaction_spec.ts

@@ -65,7 +65,7 @@ describe('Archived channels', () => {
             // # Search for "Test archive reaction"
             cy.get('body').type('{esc}');
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().should('be.visible').first().type(messageText).type('{enter}');
+            cy.uiGetSearchBox().should('be.visible').type(messageText).type('{enter}');
 
             // # Click on post dot menu so we can check for reaction icon
             cy.clickPostDotMenu(postId, 'SEARCH');

e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_search_spec.ts

@@ -61,7 +61,7 @@ describe('archive tests while preventing viewing archived channels', () => {
 
                 // # Search for the post from step 1')
                 cy.uiGetSearchContainer().click();
-                cy.uiGetSearchBox().first().clear().type(`${messageText}{enter}`);
+                cy.uiGetSearchBox().clear().type(`${messageText}{enter}`);
 
                 // * Post is returned by search, since it's not archived anymore
                 cy.get('#searchContainer').should('be.visible');
@@ -96,7 +96,7 @@ describe('archive tests while preventing viewing archived channels', () => {
 
         // # Archive dialogue message reads "This will archive the channel from the team and make its contents inaccessible for all users" (Mobile dialogue makes no mention of the data will be accessible)
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().first().clear().type(`${testArchivedMessage}{enter}`);
+        cy.uiGetSearchBox().clear().type(`${testArchivedMessage}{enter}`);
 
         // * Post is not returned by search
         cy.get('#searchContainer').should('be.visible');
@@ -112,7 +112,7 @@ describe('archive tests while preventing viewing archived channels', () => {
 
             // # Search for the string of text from step 1
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().first().clear().type(`${messageText}{enter}`);
+            cy.uiGetSearchBox().clear().type(`${messageText}{enter}`);
 
             // * Post is returned by search, since it's not archived anymore
             cy.get('#searchContainer').should('be.visible');
@@ -131,7 +131,7 @@ describe('archive tests while preventing viewing archived channels', () => {
         // # Archive a channel and make a mental note of the channel name
         // # Type "in:" and note the list of channels that appear
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().first().clear().type(`in:${testChannel.name}`);
+        cy.uiGetSearchBox().clear().type(`in:${testChannel.name}`);
         cy.findByTestId(testChannel.name).should('not.exist');
     });
 });

e2e-tests/cypress/tests/integration/channels/archived_channel/archived_channel_spec.ts

@@ -42,7 +42,7 @@ describe('Leave an archived channel', () => {
 
             // # Search for a post in an archived channel
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().first().clear().type(`${testArchivedMessage}{enter}`);
+            cy.uiGetSearchBox().clear().type(`${testArchivedMessage}{enter}`);
 
             // # Open the archived channel by selecting Jump from search results and then selecting the link to move to the most recent posts in the channel
             cy.uiGetSearchContainer().should('be.visible');
@@ -113,7 +113,7 @@ describe('Leave an archived channel', () => {
         createArchivedChannel({prefix: 'archived-search-for'}, messageList).then(({name}) => {
             // # Locate the post in a search
             cy.uiGetSearchContainer().click();
-            cy.uiGetSearchBox().first().clear().type(`${messageList[1]}{enter}`);
+            cy.uiGetSearchBox().clear().type(`${messageList[1]}{enter}`);
 
             // # Click jump to open an archive post in permalink view
             cy.uiGetSearchContainer().should('be.visible');

e2e-tests/cypress/tests/integration/channels/archived_channel/archived_leave_channel_spec.ts

@@ -97,7 +97,7 @@ describe('Leave an archived channel', () => {
 
                 // # Search for content from an archived channel
                 cy.uiGetSearchContainer().click();
-                cy.uiGetSearchBox().first().clear().type(`${messageD}{enter}`);
+                cy.uiGetSearchBox().clear().type(`${messageD}{enter}`);
 
                 // # Open the channel from search results
                 cy.get('#searchContainer').should('be.visible');
@@ -109,7 +109,7 @@ describe('Leave an archived channel', () => {
 
                 // # Search for content from a different archived channel
                 cy.uiGetSearchContainer().click();
-                cy.uiGetSearchBox().first().clear().type(`${messageC}{enter}`);
+                cy.uiGetSearchBox().clear().type(`${messageC}{enter}`);
 
                 // # Open the channel from search result by clicking Jump
                 cy.get('#searchContainer').should('be.visible').findByText('Jump').click().wait(TIMEOUTS.ONE_SEC);