From 0cde13d51f4978f3ae7f97b3b3584d6e5af2c42b Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Tue, 30 Nov 2021 16:26:50 +0100
Subject: [PATCH] ColorPickerPopover: apply react-aria for a11y support
 (#42444)

* add focus trapping to colorPickerPopover

* make popover exit using esc key

* fix colorPickerPopover to be tabbable

* fix focus escape in colorPickerPopover

* revert to focus trap fix
---
 .../ColorPicker/ColorPickerPopover.tsx        | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
index 249517eead8..9e3fb5f61a7 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
@@ -7,6 +7,7 @@ import { warnAboutColorPickerPropsDeprecation } from './warnAboutColorPickerProp
 import { css } from '@emotion/css';
 import { GrafanaTheme2, colorManipulator } from '@grafana/data';
 import { stylesFactory, withTheme2 } from '../../themes';
+import { FocusScope } from '@react-aria/focus';
 
 export type ColorPickerChangeHandler = (color: string) => void;
 
@@ -116,18 +117,20 @@ class UnThemedColorPickerPopover<T extends CustomPickersDescriptor> extends Reac
     const { theme } = this.props;
     const styles = getStyles(theme);
     return (
-      <div className={styles.colorPickerPopover}>
-        <div className={styles.colorPickerPopoverTabs}>
-          <div className={this.getTabClassName('palette')} onClick={this.onTabChange('palette')}>
-            Colors
+      <FocusScope contain restoreFocus autoFocus>
+        <div className={styles.colorPickerPopover}>
+          <div className={styles.colorPickerPopoverTabs}>
+            <div tabIndex={0} className={this.getTabClassName('palette')} onClick={this.onTabChange('palette')}>
+              Colors
+            </div>
+            <div tabIndex={0} className={this.getTabClassName('spectrum')} onClick={this.onTabChange('spectrum')}>
+              Custom
+            </div>
+            {this.renderCustomPickerTabs()}
           </div>
-          <div className={this.getTabClassName('spectrum')} onClick={this.onTabChange('spectrum')}>
-            Custom
-          </div>
-          {this.renderCustomPickerTabs()}
+          <div className={styles.colorPickerPopoverContent}>{this.renderPicker()}</div>
         </div>
-        <div className={styles.colorPickerPopoverContent}>{this.renderPicker()}</div>
-      </div>
+      </FocusScope>
     );
   }
 }