[Lens] fix focus on legend action popovers (#115066) (#118231)

elastic · Nov 10, 2021 · ad9f62f · ad9f62f
1 parent f59fc87
commit ad9f62f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/src/plugins/vis_types/pie/public/utils/get_legend_actions.tsx b/src/plugins/vis_types/pie/public/utils/get_legend_actions.tsx
@@ -10,7 +10,7 @@ import React, { useState, useEffect, useMemo } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
-import { LegendAction, SeriesIdentifier } from '@elastic/charts';
+import { LegendAction, SeriesIdentifier, useLegendAction } from '@elastic/charts';
 import { DataPublicPluginStart } from '../../../../data/public';
 import { PieVisParams } from '../types';
 import { ClickTriggerEvent } from '../../../../charts/public';
@@ -30,6 +30,7 @@ export const getLegendActions = (
     const [popoverOpen, setPopoverOpen] = useState(false);
     const [isfilterable, setIsfilterable] = useState(true);
     const filterData = useMemo(() => getFilterEventData(pieSeries), [pieSeries]);
+    const [ref, onClose] = useLegendAction<HTMLDivElement>();
 
     useEffect(() => {
       (async () => setIsfilterable(await canFilter(filterData, actions)))();
@@ -82,6 +83,7 @@ export const getLegendActions = (
     const Button = (
       <div
         tabIndex={0}
+        ref={ref}
         role="button"
         aria-pressed="false"
         style={{
@@ -105,7 +107,10 @@ export const getLegendActions = (
         id="contextMenuNormal"
         button={Button}
         isOpen={popoverOpen}
-        closePopover={() => setPopoverOpen(false)}
+        closePopover={() => {
+          setPopoverOpen(false);
+          onClose();
+        }}
         panelPaddingSize="none"
         anchorPosition="upLeft"
         title={i18n.translate('visTypePie.legend.filterOptionsLegend', {

diff --git a/src/plugins/vis_types/xy/public/utils/get_legend_actions.tsx b/src/plugins/vis_types/xy/public/utils/get_legend_actions.tsx
@@ -10,7 +10,12 @@ import React, { useState, useEffect, useMemo } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
-import { LegendAction, XYChartSeriesIdentifier, SeriesName } from '@elastic/charts';
+import {
+  LegendAction,
+  XYChartSeriesIdentifier,
+  SeriesName,
+  useLegendAction,
+} from '@elastic/charts';
 
 import { ClickTriggerEvent } from '../../../../charts/public';
 
@@ -25,6 +30,7 @@ export const getLegendActions = (
     const [isfilterable, setIsfilterable] = useState(false);
     const series = xySeries as XYChartSeriesIdentifier;
     const filterData = useMemo(() => getFilterEventData(series), [series]);
+    const [ref, onClose] = useLegendAction<HTMLDivElement>();
 
     useEffect(() => {
       (async () => setIsfilterable(await canFilter(filterData)))();
@@ -69,6 +75,7 @@ export const getLegendActions = (
     const Button = (
       <div
         tabIndex={0}
+        ref={ref}
         role="button"
         aria-pressed="false"
         style={{
@@ -92,7 +99,10 @@ export const getLegendActions = (
         id="contextMenuNormal"
         button={Button}
         isOpen={popoverOpen}
-        closePopover={() => setPopoverOpen(false)}
+        closePopover={() => {
+          setPopoverOpen(false);
+          onClose();
+        }}
         panelPaddingSize="none"
         anchorPosition="upLeft"
         title={i18n.translate('visTypeXy.legend.filterOptionsLegend', {

diff --git a/x-pack/plugins/lens/public/shared_components/legend_action_popover.tsx b/x-pack/plugins/lens/public/shared_components/legend_action_popover.tsx
@@ -8,6 +8,7 @@
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
+import { useLegendAction } from '@elastic/charts';
 import type { LensFilterEvent } from '../types';
 
 export interface LegendActionPopoverProps {
@@ -31,6 +32,7 @@ export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverPro
   context,
 }) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
+  const [ref, onClose] = useLegendAction<HTMLDivElement>();
   const panels: EuiContextMenuPanelDescriptor[] = [
     {
       id: 'main',
@@ -65,6 +67,7 @@ export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverPro
   const Button = (
     <div
       tabIndex={0}
+      ref={ref}
       role="button"
       aria-pressed="false"
       style={{
@@ -87,7 +90,10 @@ export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverPro
       id="contextMenuNormal"
       button={Button}
       isOpen={popoverOpen}
-      closePopover={() => setPopoverOpen(false)}
+      closePopover={() => {
+        setPopoverOpen(false);
+        onClose();
+      }}
       panelPaddingSize="none"
       anchorPosition="upLeft"
       title={i18n.translate('xpack.lens.shared.legend.filterOptionsLegend', {