[A11Y] Status icon should not be keyboard tab navigable (#4634)

* Status icon should not be keyboard tab navigable, only by voiceover navigation.

* Change files

Author: palatter

change-beta/@azure-communication-react-4c8568e0-1bc5-449e-a6ef-11a7f6f2f336.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Status icon should not be keyboard tab navigable, only by voiceover navigation.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-4c8568e0-1bc5-449e-a6ef-11a7f6f2f336.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Status icon should not be keyboard tab navigable, only by voiceover navigation.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/MessageStatusIcon.tsx

@@ -29,10 +29,7 @@ export const MessageStatusIcon = (props: MessageStatusIconProps): JSX.Element =>
     <>
       {/* live message is used here so that aria labels are announced on mobile */}
       {ariaLabel && shouldAnnounce && <LiveMessage message={ariaLabel} ariaLive="polite" />}
-      <div
-        // make icon accessible
-        tabIndex={0}
-      >
+      <div>
         <Icon
           role={'status'}
           // Role `status` is one of the live region roles and is used to notify screen readers of changes to the status of the message