From fb01aa955825696b2a5dfe8b69973d9fdb608526 Mon Sep 17 00:00:00 2001
From: Ayush Chauhan <ayush.chauhan@brightscout.com>
Date: Mon, 23 Dec 2024 02:46:13 +0530
Subject: [PATCH 1/2] MM-45724: Fix accessibility on ATE unexpectedly able to
 tab on hidden formatting controls/buttons

---
 .../advanced_text_editor/formatting_bar/formatting_bar.tsx   | 5 ++++-
 .../advanced_text_editor/formatting_bar/formatting_icon.tsx  | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

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 e91e4a284143..e03bb306ac14 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
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {useFloating, offset, useClick, useDismiss, useInteractions} from '@floating-ui/react';
+import {useFloating, offset, useClick, useDismiss, useInteractions, useFocus} from '@floating-ui/react';
 import classNames from 'classnames';
 import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
@@ -278,6 +278,9 @@ const FormattingBar = (props: FormattingBarProps): JSX.Element => {
                                 className='control'
                                 onClick={makeFormattingHandler(mode)}
                                 disabled={disableControls}
+                                {...!showHiddenControls && {
+                                    tabIndex: -1
+                                }}
                             />
                         );
                     })}
diff --git a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx b/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx
index b5aacb39e453..0b1d4b7fe0b1 100644
--- a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx
+++ b/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx
@@ -76,6 +76,7 @@ interface FormattingIconProps {
     onClick?: () => void;
     className?: string;
     disabled?: boolean;
+    tabIndex?: number;
 }
 
 const MAP_MARKDOWN_MODE_TO_ICON: Record<FormattingIconProps['mode'], React.FC<IconProps>> = {

From 6ba7d4a5a635715b931e484d35aa672b8a1ed11d Mon Sep 17 00:00:00 2001
From: Ayush Chauhan <ayush.chauhan@brightscout.com>
Date: Tue, 24 Dec 2024 16:56:02 +0530
Subject: [PATCH 2/2] MM-45724: Fix lint

---
 .../advanced_text_editor/formatting_bar/formatting_bar.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 e03bb306ac14..d211feda861d 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
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {useFloating, offset, useClick, useDismiss, useInteractions, useFocus} from '@floating-ui/react';
+import {useFloating, offset, useClick, useDismiss, useInteractions} from '@floating-ui/react';
 import classNames from 'classnames';
 import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
@@ -279,7 +279,7 @@ const FormattingBar = (props: FormattingBarProps): JSX.Element => {
                                 onClick={makeFormattingHandler(mode)}
                                 disabled={disableControls}
                                 {...!showHiddenControls && {
-                                    tabIndex: -1
+                                    tabIndex: -1,
                                 }}
                             />
                         );