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

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}