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