[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/search/clear_input_spec.js

@@ -26,7 +26,7 @@ describe('Search', () => {
         cy.uiGetSearchContainer().click();
 
         // # Write something on the input
-        cy.uiGetSearchBox().first().clear().wait(TIMEOUTS.HALF_SEC).type('abc').wait(TIMEOUTS.HALF_SEC).type('{enter}');
+        cy.uiGetSearchBox().clear().wait(TIMEOUTS.HALF_SEC).type('abc').wait(TIMEOUTS.HALF_SEC).type('{enter}');
 
         cy.uiGetSearchContainer().click();
 
@@ -55,7 +55,7 @@ describe('Search', () => {
         // * Verify search input field exists and not search button, as inputs contains placeholder not buttons/icons
         // and then type in a search text
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().first().clear().wait(TIMEOUTS.HALF_SEC).type(searchText + '{enter}').wait(TIMEOUTS.HALF_SEC);
+        cy.uiGetSearchBox().clear().wait(TIMEOUTS.HALF_SEC).type(searchText + '{enter}').wait(TIMEOUTS.HALF_SEC);
 
         // # Now click on the saved post button from the header
         cy.uiGetSavedPostButton().click();

e2e-tests/cypress/tests/integration/channels/search/post_search_display_spec.js

@@ -48,7 +48,7 @@ describe('Search', () => {
         // # Click on "x" displayed on searchbox
         cy.uiGetSearchBox().parent().siblings('.input-clear-x').wait(TIMEOUTS.ONE_SEC).click({force: true});
         cy.uiGetSearchBox().parents('[class*="SearchInputContainer"]').siblings('#searchHints').should('be.visible');
-        cy.uiGetSearchBox().first().focus().type('{esc}');
+        cy.uiGetSearchBox().focus().type('{esc}');
 
         // # RHS should be visible with search results
         cy.get('#search-items-container').should('be.visible');
@@ -134,7 +134,7 @@ describe('Search', () => {
         assertSearchHint();
 
         // # Clear search box
-        cy.uiGetSearchBox().get('.input-clear-x').first().click({force: true}).wait(TIMEOUTS.HALF_SEC);
+        cy.uiGetSearchBox().get('.input-clear-x').click({force: true}).wait(TIMEOUTS.HALF_SEC);
 
         // # Search for search term in:town-square{enter}
         cy.uiGetSearchBox().type('in:town-square').wait(TIMEOUTS.HALF_SEC);

e2e-tests/cypress/tests/integration/channels/search/results_post_spec.js

@@ -37,7 +37,7 @@ describe('Search', () => {
 
         // # Search for "apple"
         cy.uiGetSearchContainer().click();
-        cy.uiGetSearchBox().should('be.visible').first().type(apple).type('{enter}');
+        cy.uiGetSearchBox().should('be.visible').type(apple).type('{enter}');
 
         // # Get last postId
         cy.getLastPostId().as('lastPostId');
@@ -50,7 +50,7 @@ describe('Search', () => {
         cy.uiGetSearchContainer().click();
 
         // * Type banana on search box but don't hit search
-        cy.uiGetSearchBox().first().clear({force: true}).type(banana, {force: true});
+        cy.uiGetSearchBox().clear({force: true}).type(banana, {force: true});
 
         // * Search result should not change and remain as one result with highlight still on apple
         cy.get('@lastPostId').then((postId) => {

e2e-tests/cypress/tests/integration/channels/search/search_group_message_spec.js

@@ -68,7 +68,7 @@ describe('Search', () => {
 
             //# Search for the message
             cy.uiGetSearchContainer().should('be.visible').click();
-            cy.uiGetSearchBox().first().clear().type(`${message}{enter}`);
+            cy.uiGetSearchBox().clear().type(`${message}{enter}`);
 
             // * Should return exactly one result from the group channel and matches the message
             cy.findAllByTestId('search-item-container').should('be.visible').and('have.length', 1).within(() => {