[Discover] move focus on show chart

src/plugins/discover/public/application/apps/main/components/chart/discover_chart.tsx

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import moment from 'moment';
 import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
 import { IUiSettingsClient } from 'kibana/public';
@@ -47,8 +47,20 @@ export function DiscoverChart({
   stateContainer: GetStateReturn;
   timefield?: string;
 }) {
+  const chartRef = useRef<{ element: HTMLElement | null; moveFocus: boolean }>({
+    element: null,
+    moveFocus: false,
+  });
+
+  useEffect(() => {
+    if (chartRef.current.moveFocus && chartRef.current.element) {
+      chartRef.current.element.focus();
+    }
+  }, [state.hideChart]);
+
   const toggleHideChart = useCallback(() => {
     stateContainer.setAppState({ hideChart: !state.hideChart });
+    chartRef.current.moveFocus = true;
   }, [state, stateContainer]);
 
   const onChangeInterval = useCallback(
@@ -102,9 +114,7 @@ export function DiscoverChart({
               <EuiButtonEmpty
                 size="xs"
                 iconType={!state.hideChart ? 'eyeClosed' : 'eye'}
-                onClick={() => {
-                  toggleHideChart();
-                }}
+                onClick={toggleHideChart}
                 data-test-subj="discoverChartToggle"
               >
                 {!state.hideChart
@@ -122,6 +132,8 @@ export function DiscoverChart({
       {!state.hideChart && chartData && (
         <EuiFlexItem grow={false}>
           <section
+            ref={(element) => (chartRef.current.element = element)}
+            tabIndex={-1}
             aria-label={i18n.translate('discover.histogramOfFoundDocumentsAriaLabel', {
               defaultMessage: 'Histogram of found documents',
             })}