align enter key with aria apg window splitter

docs/pages/resources/changelog.md

@@ -12,6 +12,10 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## Next
+
+- 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/)
+
 ## 2.18.0
 
 - Added Finnish translation [#2211]

src/components/split-panel/split-panel.component.ts

@@ -37,7 +37,9 @@ export default class SlSplitPanel extends ShoelaceElement {
   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;
 
@@ -159,7 +161,7 @@ export default class SlSplitPanel extends ShoelaceElement {
       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);
 
@@ -181,6 +183,24 @@ export default class SlSplitPanel extends ShoelaceElement {
         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);
     }
   }
@@ -206,6 +226,8 @@ export default class SlSplitPanel extends ShoelaceElement {
   @watch('position')
   handlePositionChange() {
     this.cachedPositionInPixels = this.percentageToPixels(this.position);
+    this.isCollapsed = false;
+    this.positionBeforeCollapsing = 0;
     this.positionInPixels = this.percentageToPixels(this.position);
     this.emit('sl-reposition');
   }