[RTE] Disable keyboard navigation for rich text toolbar dividers (#4469)

change/@azure-communication-react-59b33420-ac00-49a6-8e82-f68968388e3c.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "fix",
+  "workstream": "RTE",
+  "comment": "Disable keyboard navigation for rich text toolbar dividers",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/react-components/src/components/RichTextEditor/Buttons/RichTextRibbonButtons.tsx

@@ -1,10 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ContextualMenuItemType, Theme } from '@fluentui/react';
+import { ContextualMenuItemType, Icon, Theme } from '@fluentui/react';
 import { KnownRibbonButtonKey, RibbonButton, getButtons } from 'roosterjs-react';
 import { ribbonButtonStyle, ribbonDividerStyle } from '../../styles/RichTextEditor.styles';
 import { insertTableButton } from './Table/RichTextInsertTableButton';
+import React from 'react';
 
 const MaxRowsNumber = 5;
 const MaxColumnsNumber = 5;
@@ -12,16 +13,19 @@ const MaxColumnsNumber = 5;
 const dividerRibbonButton = (theme: Theme, key: string): RibbonButton<string> => {
   return {
     key: key,
-    iconName: 'RichTextDividerIcon',
+    // the icon will be set in `onRender` callback
+    // this is needed to make the divider unavailable for keyboard navigation
+    iconName: '',
+    // no text is needed here as we don't want to show a tooltip for the divider
     unlocalizedText: '',
     onClick: () => {},
     isDisabled: () => true,
     commandBarProperties: {
       // show the item correctly for the overflow menu
       itemType: ContextualMenuItemType.Divider,
-      buttonStyles: ribbonDividerStyle(theme),
       // this is still needed to remove checkmark icon space even though it is a divider
-      canCheck: false
+      canCheck: false,
+      onRender: () => <Icon iconName="RichTextDividerIcon" className={ribbonDividerStyle(theme)} />
     }
   };
 };

packages/react-components/src/components/styles/RichTextEditor.styles.ts

@@ -187,14 +187,14 @@ const ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle
       '.ribbon-table-button-regular-icon': {
         width: '1.25rem',
         height: '1.25rem',
-        marginTop: '-0.25rem',
+        margin: '-0.25rem 0.25rem 0 0.25rem',
         color: theme.palette.neutralPrimary,
         display: isSelected ? 'none' : 'inline-block'
       },
       '.ribbon-table-button-filled-icon': {
         width: '1.25rem',
         height: '1.25rem',
-        marginTop: '-0.25rem',
+        margin: '-0.25rem 0.25rem 0 0.25rem',
         color: theme.palette.themePrimary,
         display: isSelected ? 'inline-block' : 'none'
       }
@@ -205,23 +205,12 @@ const ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle
 /**
  * @private
  */
-export const ribbonDividerStyle = (theme: Theme): Partial<IButtonStyles> => {
-  return {
-    icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },
-    root: { margin: '0', padding: '0', minWidth: 'auto' },
-    rootHovered: {
-      backgroundColor: 'transparent',
-      selectors: {
-        // Icon's color doesn't work here because of the specificity
-        '.ms-Button-icon': {
-          color: theme.palette.neutralQuaternaryAlt
-        },
-        '.ms-Button-menuIcon': {
-          color: theme.palette.neutralQuaternaryAlt
-        }
-      }
-    }
-  };
+export const ribbonDividerStyle = (theme: Theme): string => {
+  return mergeStyles({
+    color: theme.palette.neutralQuaternaryAlt,
+    margin: '0 -0.5rem',
+    paddingTop: '0.5rem'
+  });
 };
 
 /**