fix(a11y): restore focus after popover close with color picker (#1272)

Fixes #1266 and #935
elastic · Aug 31, 2021 · 0c6f945 · 0c6f945
1 parent cc37247
commit 0c6f945
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/packages/charts/src/components/legend/legend_item.tsx b/packages/charts/src/components/legend/legend_item.tsx
@@ -145,6 +145,7 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
     const handleClose = () => {
       setPersistedColorAction(seriesKeys, this.shouldClearPersistedColor ? null : color);
       clearTemporaryColorsAction();
+      requestAnimationFrame(() => this.colorRef?.current?.focus());
       this.toggleIsOpen();
     };
     const handleChange = (c: Color | null) => {

diff --git a/storybook/stories/legend/9_color_picker.tsx b/storybook/stories/legend/9_color_picker.tsx
@@ -27,15 +27,14 @@ import { BARCHART_1Y1G } from '@elastic/charts/src/utils/data_samples/test_datas
 import { useBaseTheme } from '../../use_base_theme';
 
 const onChangeAction = action('onChange');
-const onCloseAction = action('onClose');
 
 export const Example = () => {
   const [colors, setColors] = useState<Record<SeriesKey, Color | null>>({});
+
   const CustomColorPicker: LegendColorPicker = useMemo(
     () => ({ anchor, color, onClose, seriesIdentifiers, onChange }) => {
       const handleClose = () => {
         onClose();
-        onCloseAction();
         setColors((prevColors) => ({
           ...prevColors,
           ...toEntries(seriesIdentifiers, 'key', color),
@@ -52,7 +51,7 @@ export const Example = () => {
 
       return (
         <>
-          <EuiWrappingPopover isOpen button={anchor} closePopover={handleClose} anchorPosition="leftCenter" ownFocus>
+          <EuiWrappingPopover isOpen button={anchor} closePopover={handleClose} anchorPosition="leftCenter">
             <EuiColorPicker display="inline" color={color} onChange={handleChange} />
             <EuiSpacer size="m" />
             <EuiFlexItem grow={false}>