fix(material/tabs): nav bar not navigating on enter presses (#27862)

Fixes that the tab nav bar wasn't navigating when pressing the enter key. Fixes #27843.
angular · Sep 29, 2023 · 5dd614a · 5dd614a
1 parent 6c9886b
commit 5dd614a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
@@ -327,6 +327,19 @@ describe('MDC-based MatTabNavBar', () => {
     expect(tabLinks[1].classList.contains('mdc-tab--active')).toBe(true);
   });
 
+  it('should activate a link when enter is pressed', () => {
+    const fixture = TestBed.createComponent(SimpleTabNavBarTestApp);
+    fixture.detectChanges();
+
+    const tabLinks = fixture.nativeElement.querySelectorAll('.mat-mdc-tab-link');
+    expect(tabLinks[1].classList.contains('mdc-tab--active')).toBe(false);
+
+    dispatchKeyboardEvent(tabLinks[1], 'keydown', ENTER);
+    fixture.detectChanges();
+
+    expect(tabLinks[1].classList.contains('mdc-tab--active')).toBe(true);
+  });
+
   describe('ripples', () => {
     let fixture: ComponentFixture<SimpleTabNavBarTestApp>;
 

diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -384,10 +384,12 @@ export class MatTabLink
   }
 
   _handleKeydown(event: KeyboardEvent) {
-    if (this.disabled && (event.keyCode === SPACE || event.keyCode === ENTER)) {
-      event.preventDefault();
-    } else if (this._tabNavBar.tabPanel && event.keyCode === SPACE) {
-      this.elementRef.nativeElement.click();
+    if (event.keyCode === SPACE || event.keyCode === ENTER) {
+      if (this.disabled) {
+        event.preventDefault();
+      } else if (this._tabNavBar.tabPanel) {
+        this.elementRef.nativeElement.click();
+      }
     }
   }