From fe7d91aa00befd5f18cad209b5b1ad527d7ddaa2 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Wed, 3 Apr 2024 11:10:49 +0200
Subject: [PATCH] fix(color-picker): set focus on swatches when the palette
 popover is opened

This improves accessibility and keyboard navigation.
---
 .../color-picker/color-picker-palette.tsx     |  2 +-
 src/components/color-picker/color-picker.tsx  | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/color-picker/color-picker-palette.tsx b/src/components/color-picker/color-picker-palette.tsx
index d86019158c..e09dc7bee5 100644
--- a/src/components/color-picker/color-picker-palette.tsx
+++ b/src/components/color-picker/color-picker-palette.tsx
@@ -7,7 +7,7 @@ import { brightnesses, colors, getColorName, getCssColor } from './swatches';
  */
 @Component({
     tag: 'limel-color-picker-palette',
-    shadow: true,
+    shadow: { delegatesFocus: true },
     styleUrl: 'color-picker-palette.scss',
 })
 export class Palette implements FormComponent {
diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index 26f14006da..06558822e8 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -67,6 +67,17 @@ export class ColorPicker implements FormComponent {
     @State()
     private isOpen = false;
 
+    public componentDidRender() {
+        if (this.shouldFocus && this.isOpen) {
+            this.shouldFocus = false;
+            this.contentElement?.focus();
+        }
+    }
+
+    private contentElement?: HTMLLimelColorPickerPaletteElement;
+
+    private shouldFocus = false;
+
     public render() {
         return [
             this.renderTooltip(),
@@ -109,6 +120,7 @@ export class ColorPicker implements FormComponent {
             >
                 {this.renderPickerTrigger()}
                 <limel-color-picker-palette
+                    ref={this.setColorPickerPaletteElement}
                     value={this.value}
                     label={this.label}
                     helperText={this.helperText}
@@ -134,9 +146,17 @@ export class ColorPicker implements FormComponent {
         );
     };
 
+    private setColorPickerPaletteElement = (
+        element: HTMLLimelColorPickerPaletteElement,
+    ) => {
+        this.contentElement = element;
+    };
+
     private openPopover = (event: MouseEvent) => {
         event.stopPropagation();
         this.isOpen = true;
+
+        this.shouldFocus = this.isOpen;
     };
 
     private onPopoverClose = (event: CustomEvent) => {