backport SL-2234

cspell.json

@@ -5,6 +5,7 @@
     "allowfullscreen",
     "animationend",
     "Animista",
+    "APG",
     "apos",
     "atrule",
     "autocorrect",

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

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());
   }