Update fluentui/react version to 8.62.4

change/@internal-react-components-fb346bd0-cce4-494f-aa10-dd3815bb4367.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update fluentui/react version",
+  "packageName": "@internal/react-components",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@internal-react-composites-76f8df50-8fdb-4051-8f5d-8aab1ac268c2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update fluentui/react version",
+  "packageName": "@internal/react-composites",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@internal-storybook-41567f53-35ce-422a-b4e0-915624f3e285.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update fluentui/react version",
+  "packageName": "@internal/storybook",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/package.json

@@ -32,7 +32,7 @@
     "@fluentui/react-icons": "~1.1.137",
     "@fluentui/react-northstar": "0.61.0",
     "@fluentui/react-window-provider": "~2.2.0",
-    "@fluentui/react": "~8.17.2",
+    "@fluentui/react": "~8.62.4",
     "copy-to-clipboard": "~3.3.1",
     "events": "~3.3.0",
     "html-to-react": "~1.4.5",

packages/react-components/package.json

@@ -37,7 +37,7 @@
     "@fluentui/react-icons": "~1.1.137",
     "@fluentui/react-northstar": "0.61.0",
     "@fluentui/react-window-provider": "~2.2.0",
-    "@fluentui/react": "~8.17.2",
+    "@fluentui/react": "~8.62.4",
     "@internal/acs-ui-common": "1.2.2-beta.1",
     "copy-to-clipboard": "~3.3.1",
     "html-to-react": "~1.4.5",

packages/react-composites/package.json

@@ -51,7 +51,7 @@
     "@fluentui/react-file-type-icons": "~8.5.8",
     "@fluentui/react-hooks": "~8.3.8",
     "@fluentui/react-icons": "~1.1.137",
-    "@fluentui/react": "~8.17.2",
+    "@fluentui/react": "~8.62.4",
     "@internal/acs-ui-common": "1.2.2-beta.1",
     "@internal/calling-component-bindings": "1.2.2-beta.1",
     "@internal/calling-stateful-client": "1.2.2-beta.1",

packages/react-composites/tests/browser/common/utils.ts

@@ -240,7 +240,7 @@ export const stubMessageTimestamps = async (page: Page): Promise<void> => {
  * Stub out ReadReceipts tooltip content to avoid spurious diffs in snapshot tests.
  */
 export const stubReadReceiptsToolTip = async (page: Page): Promise<void> => {
-  const readReceiptsToolTipId: string = dataUiId(IDS.readReceiptTooltip) + ' > div > p';
+  const readReceiptsToolTipId: string = dataUiId(IDS.readReceiptTooltip) + ' > div > div > p';
 
   await page.evaluate((readReceiptsToolTipId) => {
     Array.from(document.querySelectorAll(readReceiptsToolTipId)).forEach((i) => (i.textContent = 'Read by stub/stub'));

packages/storybook/package.json

@@ -30,14 +30,15 @@
     "@fluentui/react-hooks": "~8.3.8",
     "@fluentui/react-icons": "~1.1.137",
     "@fluentui/react-northstar": "0.61.0",
-    "@fluentui/react": "~8.17.2",
+    "@fluentui/react": "~8.62.4",
     "@fluentui/theme-samples": "8.1.5",
     "@microsoft/applicationinsights-react-js": "~3.0.5",
     "@microsoft/applicationinsights-web": "~2.6.2",
     "copy-to-clipboard": "~3.3.1",
     "resize-observer-polyfill": "~1.5.1",
     "tslib": "~2.3.1",
-    "uuid": "^8.1.0"
+    "uuid": "^8.1.0",
+    "browserslist": "~4.20.4"
   },
   "devDependencies": {
     "@babel/core": "~7.16.0",

packages/storybook/stories/ControlBar/Buttons/ControlBarButton/__snapshots__/ControlBarButton.stories.storyshot

@@ -21,12 +21,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar/Buttons/D
       }
     >
       <div
-        className="ms-TooltipHost root-94"
+        className="ms-TooltipHost root-105"
         onBlurCapture={[Function]}
         onFocusCapture={[Function]}
         onKeyDown={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
+        role="none"
       >
         <button
           aria-label="airplane"

packages/storybook/stories/ControlBar/Buttons/Devices/__snapshots__/Devices.stories.storyshot

@@ -21,12 +21,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar/Buttons/D
       }
     >
       <div
-        className="ms-TooltipHost root-94"
+        className="ms-TooltipHost root-105"
         onBlurCapture={[Function]}
         onFocusCapture={[Function]}
         onKeyDown={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
+        role="none"
       >
         <button
           aria-controls={null}
@@ -72,7 +73,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar/Buttons/D
             </i>
             <i
               aria-hidden={true}
-              className="ms-Icon root-94 stub-classname ms-Button-menuIcon stub-classname"
+              className="ms-Icon root-105 stub-classname ms-Button-menuIcon stub-classname"
               data-icon-name="ChevronDown"
               hidden={true}
               style={

packages/storybook/stories/ControlBar/Buttons/EndCall/__snapshots__/EndCall.stories.storyshot

@@ -21,12 +21,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar/Buttons/E
       }
     >
       <div
-        className="ms-TooltipHost root-94"
+        className="ms-TooltipHost root-105"
         onBlurCapture={[Function]}
         onFocusCapture={[Function]}
         onKeyDown={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
+        role="none"
       >
         <button
           aria-label="Leave Call"
@@ -46,7 +47,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar/Buttons/E
           >
             <i
               aria-hidden={true}
-              className="root-94"
+              className="root-105"
               data-icon-name="ControlButtonEndCall"
             >
               <span

packages/storybook/stories/ControlBar/Buttons/Microphone/__snapshots__/Microphone.stories.storyshot

@@ -25,12 +25,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar/Buttons/M
         className="ms-Stack stub-classname"
       />
       <div
-        className="ms-TooltipHost root-94"
+        className="ms-TooltipHost root-105"
         onBlurCapture={[Function]}
         onFocusCapture={[Function]}
         onKeyDown={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
+        role="none"
       >
         <button
           aria-label="Unmute microphone"
@@ -79,7 +80,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar/Buttons/M
             </i>
             <i
               aria-hidden={true}
-              className="ms-Icon root-94 stub-classname ms-Button-menuIcon stub-classname"
+              className="ms-Icon root-105 stub-classname ms-Button-menuIcon stub-classname"
               data-icon-name="ChevronDown"
               hidden={true}
               style={

packages/storybook/stories/ControlBar/Buttons/Participants/__snapshots__/Participants.stories.storyshot

@@ -21,12 +21,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar/Buttons/P
       }
     >
       <div
-        className="ms-TooltipHost root-94"
+        className="ms-TooltipHost root-105"
         onBlurCapture={[Function]}
         onFocusCapture={[Function]}
         onKeyDown={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
+        role="none"
       >
         <button
           aria-controls={null}
@@ -72,7 +73,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar/Buttons/P
             </i>
             <i
               aria-hidden={true}
-              className="ms-Icon root-94 stub-classname ms-Button-menuIcon stub-classname"
+              className="ms-Icon root-105 stub-classname ms-Button-menuIcon stub-classname"
               data-icon-name="ChevronDown"
               hidden={true}
               style={

packages/storybook/stories/ControlBar/Buttons/ScreenShare/__snapshots__/ScreenShare.stories.storyshot

@@ -21,12 +21,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar/Buttons/S
       }
     >
       <div
-        className="ms-TooltipHost root-94"
+        className="ms-TooltipHost root-105"
         onBlurCapture={[Function]}
         onFocusCapture={[Function]}
         onKeyDown={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
+        role="none"
       >
         <button
           aria-label="Present your screen"

packages/storybook/stories/ControlBar/__snapshots__/ControlBar.stories.storyshot

@@ -43,12 +43,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
               className="ms-Stack stub-classname"
             />
             <div
-              className="ms-TooltipHost root-94"
+              className="ms-TooltipHost root-105"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
+              role="none"
             >
               <button
                 aria-label="Turn on camera"
@@ -97,7 +98,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
                   </i>
                   <i
                     aria-hidden={true}
-                    className="ms-Icon root-94 stub-classname ms-Button-menuIcon stub-classname"
+                    className="ms-Icon root-105 stub-classname ms-Button-menuIcon stub-classname"
                     data-icon-name="ChevronDown"
                     hidden={true}
                     style={
@@ -116,12 +117,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
               className="ms-Stack stub-classname"
             />
             <div
-              className="ms-TooltipHost root-94"
+              className="ms-TooltipHost root-105"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
+              role="none"
             >
               <button
                 aria-label="Unmute microphone"
@@ -170,7 +172,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
                   </i>
                   <i
                     aria-hidden={true}
-                    className="ms-Icon root-94 stub-classname ms-Button-menuIcon stub-classname"
+                    className="ms-Icon root-105 stub-classname ms-Button-menuIcon stub-classname"
                     data-icon-name="ChevronDown"
                     hidden={true}
                     style={
@@ -185,12 +187,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-94"
+              className="ms-TooltipHost root-105"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
+              role="none"
             >
               <button
                 aria-label="Present your screen"
@@ -235,12 +238,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-94"
+              className="ms-TooltipHost root-105"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
+              role="none"
             >
               <button
                 aria-controls={null}
@@ -286,7 +290,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
                   </i>
                   <i
                     aria-hidden={true}
-                    className="ms-Icon root-94 stub-classname ms-Button-menuIcon stub-classname"
+                    className="ms-Icon root-105 stub-classname ms-Button-menuIcon stub-classname"
                     data-icon-name="ChevronDown"
                     hidden={true}
                     style={
@@ -301,12 +305,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-94"
+              className="ms-TooltipHost root-105"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
+              role="none"
             >
               <button
                 aria-controls={null}
@@ -352,7 +357,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
                   </i>
                   <i
                     aria-hidden={true}
-                    className="ms-Icon root-94 stub-classname ms-Button-menuIcon stub-classname"
+                    className="ms-Icon root-105 stub-classname ms-Button-menuIcon stub-classname"
                     data-icon-name="ChevronDown"
                     hidden={true}
                     style={
@@ -367,12 +372,13 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
               </button>
             </div>
             <div
-              className="ms-TooltipHost root-94"
+              className="ms-TooltipHost root-105"
               onBlurCapture={[Function]}
               onFocusCapture={[Function]}
               onKeyDown={[Function]}
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
+              role="none"
             >
               <button
                 aria-label="Leave Call"
@@ -392,7 +398,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Control Bar Control B
                 >
                   <i
                     aria-hidden={true}
-                    className="root-94"
+                    className="root-105"
                     data-icon-name="ControlButtonEndCall"
                   >
                     <span

packages/storybook/stories/Dialpad/__snapshots__/Dialpad.stories.storyshot

@@ -54,7 +54,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Dialpad Dialpad 1`] =
           </div>
           <div
             className="ms-FocusZone stub-classname"
-            data-focuszone-id="FocusZone4"
+            data-focuszone-id="FocusZone6"
             onFocus={[Function]}
             onKeyDown={[Function]}
             onMouseDownCapture={[Function]}

packages/storybook/stories/ErrorBar/__snapshots__/ErrorBar.stories.storyshot

@@ -76,7 +76,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Error Bar Error Bar 1
                 >
                   <i
                     aria-hidden={true}
-                    className="ms-Icon root-94 stub-classname ms-Button-icon stub-classname"
+                    className="ms-Icon root-105 stub-classname ms-Button-icon stub-classname"
                     data-icon-name="Clear"
                     style={
                       Object {

packages/storybook/stories/Examples/DevicesDropdown/__snapshots__/DeviceSettingsDropDown.stories.storyshot

@@ -58,9 +58,7 @@ exports[`storybook snapshot tests Storyshots Examples/Device Settings Device Set
                 tabIndex={0}
               >
                 <span
-                  aria-atomic={true}
                   aria-invalid={false}
-                  aria-live="polite"
                   className="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder stub-classname"
                   id="Dropdown2-option"
                 >

packages/storybook/stories/Examples/IncomingCallAlerts/__snapshots__/IncomingCallModal.stories.storyshot

@@ -84,6 +84,7 @@ exports[`storybook snapshot tests Storyshots Examples/Incoming Call Alerts/Incom
               >
                 <div
                   aria-hidden={true}
+                  data-is-focus-trap-zone-bumper={true}
                   data-is-visible={true}
                   style={
                     Object {
@@ -124,7 +125,6 @@ exports[`storybook snapshot tests Storyshots Examples/Incoming Call Alerts/Incom
                           onKeyUp={[Function]}
                           onMouseDown={[Function]}
                           onMouseUp={[Function]}
-                          title="Close"
                           type="button"
                         >
                           <span
@@ -133,7 +133,7 @@ exports[`storybook snapshot tests Storyshots Examples/Incoming Call Alerts/Incom
                           >
                             <i
                               aria-hidden={true}
-                              className="ms-Icon root-94 stub-classname ms-Button-icon stub-classname"
+                              className="ms-Icon root-105 stub-classname ms-Button-icon stub-classname"
                               data-icon-name="Cancel"
                               style={
                                 Object {
@@ -374,6 +374,7 @@ exports[`storybook snapshot tests Storyshots Examples/Incoming Call Alerts/Incom
                 </div>
                 <div
                   aria-hidden={true}
+                  data-is-focus-trap-zone-bumper={true}
                   data-is-visible={true}
                   style={
                     Object {