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 e91e4a28414..d211feda861 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
@@ -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 b5aacb39e45..0b1d4b7fe0b 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>> = {