From a013797ed0e6539e29d7179ff174b9690eb6a481 Mon Sep 17 00:00:00 2001
From: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Date: Fri, 31 Jan 2025 21:55:40 +0530
Subject: [PATCH] [MM-45724] Accessibility on ATE unexpectedly able to tab on
 hidden formatting controls/buttons (#29722)

---
 .../enterprise/accessibility/accessibility_input_fields_spec.ts | 2 +-
 .../advanced_text_editor/formatting_bar/formatting_bar.test.tsx | 2 +-
 .../advanced_text_editor/formatting_bar/formatting_bar.tsx      | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts
index 7de7e50a58..0553be7b62 100644
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts
+++ b/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();
diff --git a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_bar.test.tsx b/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_bar.test.tsx
index d53b01c2b4..12b991415b 100644
--- a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_bar.test.tsx
+++ b/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'));
 
diff --git a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_bar.tsx b/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_bar.tsx
index e91e4a2841..2da334edda 100644
--- a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_bar.tsx
+++ b/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}