[MM-61647][MM-61651]: Upgraded react-select to v5 (#30070)

* [MM-61647]: Upgraded react-select to v5
- Updated old type definitions with new v5 packaged type definitions.
- Removed some unused props
- Updated onBlur, onFocus and handleInputChange methods in user_input_email component

* Fix incorrect usage of handleInputChange in ChannelsInput

* Remove type assertions from dropdown_input_hybrid.tsx

* Simplify typing of users_emails_input.tsx

* [MM-61647][MM-61651]: Fixed some type definitions and e2e failing test case

* [MM-61647][MM-61651]: Fixed type error in dropdown_input_hybrid

* [MM-61647][MM-61651]: Fixed failing CI type error and e2e test cases

* [MM-61647][MM-61651]: Fixed failing e2e test case

* [MM-61647][MM-61651]: Updated the styles and reverted the test case changes
- Fixed the theme not getting correctly inherited
- Fixed the timezone and language settings getting saved on enter

---------

Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_account_settings_spec.js

@@ -169,36 +169,43 @@ describe('Verify Accessibility Support in different sections in Settings and Pro
 
         cy.get('#displayButton').click();
         cy.get('#languagesEdit').click();
-        cy.get('#displayLanguage').within(() => {
-            cy.get('input').should('have.attr', 'aria-autocomplete', 'list').and('have.attr', 'aria-labelledby', 'changeInterfaceLanguageLabel').as('inputEl');
-        });
+        cy.findByRole('combobox', {name: 'Dropdown selector to change the interface language'}).should('have.attr', 'aria-autocomplete', 'list').and('have.attr', 'aria-labelledby', 'changeInterfaceLanguageLabel').as('inputEl');
         cy.get('#changeInterfaceLanguageLabel').should('be.visible').and('have.text', 'Change interface language');
 
-        // # When enter key is pressed on dropdown, it should expand and collapse
-        cy.get('@inputEl').typeWithForce('{enter}');
-        cy.get('#displayLanguage>div').should('have.class', 'react-select__control--menu-is-open');
-        cy.get('@inputEl').typeWithForce('{enter}');
-        cy.get('#displayLanguage>div').should('not.have.class', 'react-select__control--menu-is-open');
+        // # When space key is pressed on dropdown, it should expand and should collapse when esc key is pressed
+        cy.get('@inputEl').typeWithForce(' ');
+        cy.findByRole('listbox').should('have.class', 'react-select__menu-list').as('listBox');
+        cy.get('@inputEl').typeWithForce('{esc}');
+        cy.get('@listBox').should('not.exist');
 
         // # Press down arrow twice and check aria label
-        cy.get('@inputEl').typeWithForce('{enter}');
+        cy.get('@inputEl').typeWithForce(' ');
         cy.get('@inputEl').typeWithForce('{downarrow}{downarrow}');
-        cy.get('#displayLanguage>span').as('ariaEl').within(($el) => {
-            cy.wrap($el).should('have.attr', 'aria-live', 'assertive');
-            cy.get('#aria-context').should('contain', 'option English (Australia) focused').and('contain', 'Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.');
+        cy.get('#displayLanguage').within(($el) => {
+            cy.wrap($el).findByRole('log').should('have.attr', 'aria-live', 'assertive').as('ariaEl');
+        });
+        cy.get('@ariaEl').within(($el) => {
+            cy.wrap($el).get('#aria-focused').should('contain', 'option English (Australia) focused');
+            cy.wrap($el).get('#aria-guidance').should('contain', 'Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.');
         });
 
-        // # Check if language setting gets changed after user presses enter
-        cy.get('@inputEl').typeWithForce('{enter}');
+        // # Check if language setting gets changed after user presses space
+        cy.get('@inputEl').typeWithForce(' ');
         cy.get('#displayLanguage').should('contain', 'English (Australia)');
-        cy.get('@ariaEl').get('#aria-selection-event').should('contain', 'option English (Australia), selected');
+        cy.get('@ariaEl').within(($el) => {
+            cy.wrap($el).get('#aria-selection').should('contain', 'option English (Australia) selected');
+        });
 
-        // # Press down arrow, then up arrow and press enter
+        // # Press down arrow, then up arrow and press space
         cy.get('@inputEl').typeWithForce('{downarrow}{downarrow}{downarrow}{uparrow}');
-        cy.get('@ariaEl').get('#aria-context').should('contain', 'option English (US) focused');
-        cy.get('@inputEl').typeWithForce('{enter}');
+        cy.get('@ariaEl').within(($el) => {
+            cy.wrap($el).get('#aria-focused').should('contain', 'option English (US) focused');
+        });
+        cy.get('@inputEl').typeWithForce(' ');
         cy.get('#displayLanguage').should('contain', 'English (US)');
-        cy.get('@ariaEl').get('#aria-selection-event').should('contain', 'option English (US), selected');
+        cy.get('@ariaEl').within(($el) => {
+            cy.wrap($el).get('#aria-selection').should('contain', 'option English (US) selected');
+        });
     });
 
     it('MM-T1488 Profile Picture should read labels', () => {