fix(splitview): ♿ up/down arrows should change focus between pane view headers

Closes: #117440

.vscode/settings.json

@@ -79,5 +79,5 @@
 	},
 	"typescript.tsc.autoDetect": "off",
 	"testing.autoRun.mode": "rerun",
-	"conventionalCommits.scopes": ["tree", "scm", "grid"]
+	"conventionalCommits.scopes": ["tree", "scm", "grid", "splitview"]
 }

src/vs/base/browser/ui/splitview/paneview.ts

@@ -457,6 +457,17 @@ export class PaneView extends Disposable {
 		this.onDidSashReset = this.splitview.onDidSashReset;
 		this.onDidSashChange = this.splitview.onDidSashChange;
 		this.onDidScroll = this.splitview.onDidScroll;
+
+		const onKeyDown = this._register(new DomEmitter(this.element, 'keydown'));
+		const onHeaderKeyDown = Event.chain(onKeyDown.event)
+			.filter(e => e.target instanceof HTMLElement && e.target.classList.contains('pane-header'))
+			.map(e => new StandardKeyboardEvent(e));
+
+		this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.UpArrow)
+			.event(() => this.focusPrevious()));
+
+		this._register(onHeaderKeyDown.filter(e => e.keyCode === KeyCode.DownArrow)
+			.event(() => this.focusNext()));
 	}
 
 	addPane(pane: Pane, size: number, index = this.splitview.length): void {
@@ -572,6 +583,32 @@ export class PaneView extends Disposable {
 		}, 200);
 	}
 
+	private getPaneHeaderElements(): HTMLElement[] {
+		return [...this.element.querySelectorAll('.pane-header')] as HTMLElement[];
+	}
+
+	private focusPrevious(): void {
+		const headers = this.getPaneHeaderElements();
+		const index = headers.indexOf(document.activeElement as HTMLElement);
+
+		if (index === -1) {
+			return;
+		}
+
+		headers[Math.max(index - 1, 0)].focus();
+	}
+
+	private focusNext(): void {
+		const headers = this.getPaneHeaderElements();
+		const index = headers.indexOf(document.activeElement as HTMLElement);
+
+		if (index === -1) {
+			return;
+		}
+
+		headers[Math.min(index + 1, headers.length - 1)].focus();
+	}
+
 	override dispose(): void {
 		super.dispose();