fix tooltip callout keyboard focus order for accessibility (#2464)

microsoft · Dec 18, 2023 · 09a8e7a · 09a8e7a
1 parent 2a6ff82
commit 09a8e7a
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/InfoCallout/InfoCallout.tsx b/libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/InfoCallout/InfoCallout.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { Callout, FocusZone, IconButton } from "@fluentui/react";
+import { FocusTrapCallout, FocusZone, IconButton } from "@fluentui/react";
 import { FluentUIStyles } from "@responsible-ai/core-ui";
 import React from "react";
 
@@ -46,7 +46,7 @@ export class InfoCallout extends React.Component<
           }}
         />
         {this.state.isCalloutVisible && (
-          <Callout
+          <FocusTrapCallout
             target={`#${this.props.iconId}`}
             setInitialFocus
             onDismiss={this.onDismiss}
@@ -58,7 +58,7 @@ export class InfoCallout extends React.Component<
                 <span>{this.props.infoText}</span>
               </div>
             </FocusZone>
-          </Callout>
+          </FocusTrapCallout>
         )}
       </span>
     );