fix: Add role="tooltip" to non-modal chart popovers

Author: avinashbot

src/internal/components/chart-popover/__tests__/chart-popover.test.tsx

@@ -6,6 +6,44 @@ import { act, render } from '@testing-library/react';
 
 import ChartPopover from '../../../../../lib/components/internal/components/chart-popover';
 
+describe('accessibility', () => {
+  test('has role="tooltip" on the root element if dismissButton is false', () => {
+    const { container } = render(
+      <ChartPopover
+        trackRef={{ current: null }}
+        container={null}
+        onDismiss={() => {}}
+        dismissButton={false}
+        data-testid="chart-popover"
+      >
+        content
+      </ChartPopover>
+    );
+
+    const popoverRoot = container.querySelector('[data-testid="chart-popover"]');
+    expect(popoverRoot).toBeInTheDocument();
+    expect(popoverRoot).toHaveAttribute('role', 'tooltip');
+  });
+
+  test('does not have role="tooltip" on the root element if dismissButton is true', () => {
+    const { container } = render(
+      <ChartPopover
+        trackRef={{ current: null }}
+        container={null}
+        onDismiss={() => {}}
+        dismissButton={true}
+        data-testid="chart-popover"
+      >
+        content
+      </ChartPopover>
+    );
+
+    const popoverRoot = container.querySelector('[data-testid="chart-popover"]');
+    expect(popoverRoot).toBeInTheDocument();
+    expect(popoverRoot).not.toHaveAttribute('role', 'tooltip');
+  });
+});
+
 describe('click outside', () => {
   function TestComponent({ onDismiss }: { onDismiss: () => void }) {
     return (

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

@@ -119,6 +119,7 @@ function ChartPopover(
   return (
     <div
       {...baseProps}
+      role={!dismissButton ? 'tooltip' : undefined}
       className={clsx(popoverStyles.root, styles.root, baseProps.className)}
       ref={popoverRef}
       onMouseEnter={onMouseEnter}