[MM-45724] Accessibility on ATE unexpectedly able to tab on hidden formatting controls/buttons (#29722)

e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts

@@ -246,7 +246,7 @@ describe('Verify Accessibility Support in different input fields', () => {
             cy.get('#FormattingControl_strike').should('be.focused').and('have.attr', 'aria-label', 'strike through').tab();
 
             // * Verify if the focus is on the hidden controls button
-            cy.get('#HiddenControlsButtonRHS_COMMENT').should('be.focused').and('have.attr', 'aria-label', 'show hidden formatting options').tab();
+            cy.get('#HiddenControlsButtonRHS_COMMENT').should('be.focused').and('have.attr', 'aria-label', 'show hidden formatting options').click().tab();
 
             // * Verify if the focus is on the hidden heading button
             cy.get('#FormattingControl_heading').should('be.focused').and('have.attr', 'aria-label', 'heading').tab();

webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_bar.test.tsx

@@ -74,7 +74,7 @@ describe('FormattingBar', () => {
             </form>,
         );
 
-        expect(screen.queryByLabelText('heading')).not.toBeVisible();
+        expect(screen.queryByLabelText('heading')).toBe(null);
 
         userEvent.click(screen.getByLabelText('show hidden formatting options'));
 

webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_bar.tsx

@@ -263,6 +263,7 @@ const FormattingBar = (props: FormattingBarProps): JSX.Element => {
                 timeout={250}
                 classNames='scale'
                 in={showHiddenControls}
+                unmountOnExit={true}
             >
                 <HiddenControlsContainer
                     ref={setFloating}