diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 746ce7b4..1da4b20c 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -12,6 +12,10 @@ Components with the Experimental 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 Enter to `` 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]
diff --git a/src/components/split-panel/split-panel.component.ts b/src/components/split-panel/split-panel.component.ts
index 65fc1a3e..e7824b8c 100644
--- a/src/components/split-panel/split-panel.component.ts
+++ b/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');
}