fix: Fix clicking inside chart popovers when rendered inside tabs (#1839

)

pages/mixed-line-bar-chart/in-tabs.page.tsx

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+
+import { barChartInstructions, commonProps, data3 } from './common';
+import { BarChart, Tabs } from '~components';
+
+export default function () {
+  return (
+    <Box margin="m">
+      <h1>Mixed chart integration test</h1>
+      <Tabs
+        tabs={[{ id: 'chart', label: 'Chart', content: <Chart /> }]}
+        i18nStrings={{ scrollLeftAriaLabel: 'Scroll left', scrollRightAriaLabel: 'Scroll right' }}
+      />
+    </Box>
+  );
+}
+
+function Chart() {
+  return (
+    <BarChart
+      {...commonProps}
+      id="chart"
+      height={250}
+      series={[{ title: 'Calories', type: 'bar', data: data3 }]}
+      xDomain={['Potatoes', 'Tangerines', 'Chocolate', 'Apples', 'Oranges']}
+      yDomain={[0, 700]}
+      xTitle="Food"
+      yTitle="Calories (kcal)"
+      xScaleType="categorical"
+      ariaLabel="Bar chart"
+      ariaDescription={barChartInstructions}
+    />
+  );
+}

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

@@ -106,6 +106,9 @@ function ChartPopover(
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       onBlur={onBlur}
+      // The tabIndex makes it so that clicking inside popover assigns this element as blur target.
+      // That is necessary in charts to ensure the blur target is within the chart and no cleanup is needed.
+      tabIndex={-1}
     >
       <PopoverContainer
         size={size}

src/mixed-line-bar-chart/__integ__/mixed-line-bar-chart.test.ts

@@ -356,6 +356,33 @@ describe('Details popover', () => {
     })
   );
 
+  test(
+    'can be pinned and unpinned in a chart with mouse when rendered inside tabs',
+    setupTest('#/light/mixed-line-bar-chart/in-tabs', async page => {
+      // Hover over third group in the first chart
+      await page.hoverElement(chartWrapper.findBarGroups().get(3).toSelector());
+      await expect(page.getText(popoverHeaderSelector())).resolves.toContain('Chocolate');
+      await expect(page.isDisplayed(popoverDismissSelector())).resolves.toBe(false);
+
+      // Click on it to reveal the dismiss button
+      await page.click(chartWrapper.toSelector());
+      await expect(page.isDisplayed(popoverDismissSelector())).resolves.toBe(true);
+      await page.waitForAssertion(() => expect(page.isFocused(popoverDismissSelector())).resolves.toBe(true));
+
+      // Click inside popover to ensure it remains visible.
+      await page.click(popoverContentSelector());
+      await expect(page.isDisplayed(popoverDismissSelector())).resolves.toBe(true);
+
+      // Ensure the next focus target is the dismiss button.
+      await page.keys(['Tab']);
+      await page.waitForAssertion(() => expect(page.isFocused(popoverDismissSelector())).resolves.toBe(true));
+
+      // Click dismiss to unpin
+      await page.click(popoverDismissSelector());
+      await expect(page.isDisplayed(popoverDismissSelector())).resolves.toBe(false);
+    })
+  );
+
   test(
     'can be hidden after hover by pressing Escape',
     setupTest('#/light/mixed-line-bar-chart/test', async page => {