chore: Adds disable dismiss auto-focis for internal chart tooltip

src/internal/components/chart-popover/index.tsx

@@ -56,6 +56,9 @@ export interface ChartPopoverProps extends PopoverProps {
 
   /** Popover footer */
   footer?: React.ReactNode;
+
+  /** Prevents dismiss button auto-focus */
+  disableDismissAutoFocus?: boolean;
 }
 
 export default React.forwardRef(ChartPopover);
@@ -67,6 +70,7 @@ function ChartPopover(
     fixedWidth = false,
     dismissButton = false,
     dismissAriaLabel,
+    disableDismissAutoFocus,
 
     children,
     footer,
@@ -157,6 +161,7 @@ function ChartPopover(
         <PopoverBody
           dismissButton={dismissButton}
           dismissAriaLabel={dismissAriaLabel}
+          disableDismissAutoFocus={disableDismissAutoFocus}
           header={<span className={testClasses.header}>{title}</span>}
           onDismiss={() => onDismiss()}
           overflowVisible="content"

src/popover/__tests__/popover-body.test.tsx

@@ -0,0 +1,34 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import PopoverBody from '../../../lib/components/popover/body';
+
+function renderPopoverBody(disableDismissAutoFocus = false) {
+  return render(
+    <PopoverBody
+      dismissButton={true}
+      dismissAriaLabel="Close"
+      disableDismissAutoFocus={disableDismissAutoFocus}
+      onDismiss={() => {}}
+      header={undefined}
+    >
+      Content
+    </PopoverBody>
+  );
+}
+
+describe('disableDismissAutoFocus', () => {
+  it('focuses the dismiss button by default when dismissButton is true', () => {
+    const { container } = renderPopoverBody();
+    const dismissButton = container.querySelector('button[aria-label="Close"]');
+    expect(document.activeElement).toBe(dismissButton);
+  });
+
+  it('does not focus the dismiss button when disableDismissAutoFocus is true', () => {
+    const { container } = renderPopoverBody(true);
+    const dismissButton = container.querySelector('button[aria-label="Close"]');
+    expect(document.activeElement).not.toBe(dismissButton);
+  });
+});

src/popover/body.tsx

@@ -18,6 +18,7 @@ import styles from './styles.css.js';
 export interface PopoverBodyProps {
   dismissButton: boolean;
   dismissAriaLabel: string | undefined;
+  disableDismissAutoFocus?: boolean;
   onDismiss: ((method?: 'escape' | 'close-button') => void) | undefined;
   onBlur?: (event: React.FocusEvent) => void;
 
@@ -37,6 +38,7 @@ const PopoverBody = React.forwardRef(
     {
       dismissButton: showDismissButton,
       dismissAriaLabel,
+      disableDismissAutoFocus = false,
       header,
       children,
       onDismiss,
@@ -68,11 +70,11 @@ const PopoverBody = React.forwardRef(
     // because we also want to focus the dismiss button when it
     // is added dynamically (e.g. in chart popovers)
     useEffect(() => {
-      if (showDismissButton && !dismissButtonFocused.current) {
+      if (showDismissButton && !disableDismissAutoFocus && !dismissButtonFocused.current) {
         dismissButtonRef.current?.focus({ preventScroll: true });
       }
       dismissButtonFocused.current = showDismissButton;
-    }, [showDismissButton]);
+    }, [showDismissButton, disableDismissAutoFocus]);
 
     const dismissButton = (showDismissButton ?? null) && (
       <div