From 0e5350b9bb07b7fd33d446dcb3337dc437ad366f Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 28 Oct 2024 10:49:11 -0400
Subject: [PATCH] backport SL-2234

---
 cspell.json                               |  1 +
 docs/docs/resources/changelog.md          |  3 ++-
 src/components/split-panel/split-panel.ts | 24 ++++++++++++++++++++++-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/cspell.json b/cspell.json
index a9c5043f0..9c65c5fbe 100644
--- a/cspell.json
+++ b/cspell.json
@@ -5,6 +5,7 @@
     "allowfullscreen",
     "animationend",
     "Animista",
+    "APG",
     "apos",
     "atrule",
     "autocorrect",
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index e3906e6dc..efcfe459e 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -14,8 +14,9 @@ During the alpha period, things might break! We take breaking changes very serio
 
 ## Next
 
-- Fixed a bug in `<wa-relative-time>` where the title attribute would show with redundant info
+- Added support for <kbd>Enter</kbd> to `<sl-split-panel>` to align with ARIA APG's [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)
 - Added more resilient support for lazy loaded options in `<wa-select>`
+- Fixed a bug in `<wa-relative-time>` where the title attribute would show with redundant info
 - Fixed a bug in `<wa-tooltip>` that caused a memory leak in disconnected elements
 
 ## 3.0.0-alpha.3
diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts
index 8b3abddc9..6454dd753 100644
--- a/src/components/split-panel/split-panel.ts
+++ b/src/components/split-panel/split-panel.ts
@@ -40,7 +40,9 @@ export default class WaSplitPanel extends WebAwesomeElement {
   static styles: CSSResultGroup = [componentStyles, styles];
 
   private cachedPositionInPixels: number;
+  private isCollapsed = false;
   private readonly localize = new LocalizeController(this);
+  private positionBeforeCollapsing = 0;
   private resizeObserver: ResizeObserver;
   private size: number;
 
@@ -162,7 +164,7 @@ export default class WaSplitPanel extends WebAwesomeElement {
       return;
     }
 
-    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter'].includes(event.key)) {
       let newPosition = this.position;
       const incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);
 
@@ -184,6 +186,24 @@ export default class WaSplitPanel extends WebAwesomeElement {
         newPosition = this.primary === 'end' ? 0 : 100;
       }
 
+      // Collapse/expand the primary panel when enter is pressed
+      if (event.key === 'Enter') {
+        if (this.isCollapsed) {
+          newPosition = this.positionBeforeCollapsing;
+          this.isCollapsed = false;
+        } else {
+          const positionBeforeCollapsing = this.position;
+
+          newPosition = 0;
+
+          // Wait for position to update before setting the collapsed state
+          requestAnimationFrame(() => {
+            this.isCollapsed = true;
+            this.positionBeforeCollapsing = positionBeforeCollapsing;
+          });
+        }
+      }
+
       this.position = clamp(newPosition, 0, 100);
     }
   }
@@ -210,6 +230,8 @@ export default class WaSplitPanel extends WebAwesomeElement {
   handlePositionChange() {
     this.cachedPositionInPixels = this.percentageToPixels(this.position);
     this.positionInPixels = this.percentageToPixels(this.position);
+    this.isCollapsed = false;
+    this.positionBeforeCollapsing = 0;
     this.dispatchEvent(new WaRepositionEvent());
   }