[RTE][A11Y] Use white border selected items for table size selection

change-beta/@azure-communication-react-e17e9b10-0f7c-4803-944a-b55463f6e86a.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Update rich text editor border table size selection color for A11y",
+  "packageName": "@azure/communication-react",
+  "email": "73612854+palatter@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-e17e9b10-0f7c-4803-944a-b55463f6e86a.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Update rich text editor border table size selection color for A11y",
+  "packageName": "@azure/communication-react",
+  "email": "73612854+palatter@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -267,7 +267,7 @@ export const insertTableMenuCellButtonStyles = (theme: Theme): IStyle => {
   return {
     width: '24px',
     height: '24px',
-    border: `solid 0.5px ${theme.palette.neutralSecondary}`,
+    border: `solid 0.5px ${theme.palette.neutralSecondaryAlt}`,
     cursor: 'pointer',
     background: 'transparent'
   };
@@ -278,7 +278,8 @@ export const insertTableMenuCellButtonStyles = (theme: Theme): IStyle => {
  */
 export const insertTableMenuCellButtonSelectedStyles = (theme: Theme): IStyle => {
   return {
-    background: theme.palette.themePrimary
+    background: theme.palette.themePrimary,
+    border: `solid 0.5px ${theme.palette.themeLighterAlt}`
   };
 };
 
@@ -298,7 +299,7 @@ export const insertTableMenuFocusZone = (theme: Theme): string => {
   return mergeStyles({
     display: 'inline-grid',
     gridTemplateColumns: 'auto auto auto auto auto',
-    border: `solid 0.5px ${theme.palette.neutralSecondary}`
+    border: `solid 0.5px ${theme.palette.neutralSecondaryAlt}`
   });
 };