From b007f186ac1bbb449a9690e22a67f0f38b3c868e Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Wed, 16 Apr 2025 14:38:17 -0400
Subject: [PATCH] fix(cdk-experimental/tabs): handle space and enter events

---
 .ng-dev/commit-message.mts                    |  1 +
 src/cdk-experimental/ui-patterns/tabs/tabs.ts | 30 ++++++-------------
 2 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
index da05c828512e..56b1531b30e9 100644
--- a/.ng-dev/commit-message.mts
+++ b/.ng-dev/commit-message.mts
@@ -16,6 +16,7 @@ export const commitMessage: CommitMessageConfig = {
     'cdk-experimental/scrolling',
     'cdk-experimental/selection',
     'cdk-experimental/table-scroll-container',
+    'cdk-experimental/tabs',
     'cdk-experimental/ui-patterns',
     'cdk/a11y',
     'cdk/accordion',
diff --git a/src/cdk-experimental/ui-patterns/tabs/tabs.ts b/src/cdk-experimental/ui-patterns/tabs/tabs.ts
index ebeed3850c43..57c4dbd85b8a 100644
--- a/src/cdk-experimental/ui-patterns/tabs/tabs.ts
+++ b/src/cdk-experimental/ui-patterns/tabs/tabs.ts
@@ -134,6 +134,7 @@ export class TabListPattern {
   /** The id of the current active tab. */
   activedescendant = computed(() => this.focusManager.getActiveDescendant());
 
+  /** Whether selection should follow focus. */
   followFocus = computed(() => this.inputs.selectionMode() === 'follow');
 
   /** The key used to navigate to the previous tab in the tablist. */
@@ -154,33 +155,20 @@ export class TabListPattern {
 
   /** The keydown event manager for the tablist. */
   keydown = computed(() => {
-    const manager = new KeyboardEventManager();
-
-    if (this.followFocus()) {
-      manager
-        .on(this.prevKey, () => this.prev({selectOne: true}))
-        .on(this.nextKey, () => this.next({selectOne: true}))
-        .on('Home', () => this.first({selectOne: true}))
-        .on('End', () => this.last({selectOne: true}));
-    } else {
-      manager
-        .on(this.prevKey, () => this.prev())
-        .on(this.nextKey, () => this.next())
-        .on('Home', () => this.first())
-        .on('End', () => this.last())
-        .on(' ', () => this._updateSelection({selectOne: true}))
-        .on('Enter', () => this._updateSelection({selectOne: true}));
-    }
+    const manager = new KeyboardEventManager()
+      .on(this.prevKey, () => this.prev({selectOne: this.followFocus()}))
+      .on(this.nextKey, () => this.next({selectOne: this.followFocus()}))
+      .on('Home', () => this.first({selectOne: this.followFocus()}))
+      .on('End', () => this.last({selectOne: this.followFocus()}))
+      .on(' ', () => this.selection.selectOne())
+      .on('Enter', () => this.selection.selectOne());
 
     return manager;
   });
 
   /** The pointerdown event manager for the tablist. */
   pointerdown = computed(() => {
-    const manager = new PointerEventManager();
-    manager.on(e => this.goto(e, {selectOne: true}));
-
-    return manager;
+    return new PointerEventManager().on(e => this.goto(e, {selectOne: true}));
   });
 
   constructor(readonly inputs: TabListInputs) {