From 04142093dae7c45c539d7285f83b94a260d33854 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Wed, 2 Feb 2022 12:54:46 +0100
Subject: [PATCH] fix(material/tabs): use buttons for paginator also tab-header
 and mdc

This is a follow-up PR to https://github.com/angular/components/pull/14640 / https://github.com/angular/components/commit/e8919bcf4b614fde6f6614fcaaf799b97f9702b5

I think these other templates should be updated to button usage too, so we can keep consistency.

Uses `button` elements, rather than styled `div`-s for the paginator buttons. This has the advantage of being more accessible, if we decided to make them focusable, and it stops calling the click listeners when the button is disabled (currently we do some expensive checks in them when we don't have to).
---
 .../mdc-tabs/_tabs-common.scss                |  9 +++++++++
 .../mdc-tabs/tab-header.html                  | 16 ++++++++++-----
 .../mdc-tabs/tab-nav-bar/tab-nav-bar.html     | 20 +++++++++++++------
 src/material/tabs/tab-header.html             | 20 +++++++++++++------
 4 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/src/material-experimental/mdc-tabs/_tabs-common.scss b/src/material-experimental/mdc-tabs/_tabs-common.scss
index 1ae4d6589c3f..b5c5fb5c09be 100644
--- a/src/material-experimental/mdc-tabs/_tabs-common.scss
+++ b/src/material-experimental/mdc-tabs/_tabs-common.scss
@@ -104,6 +104,15 @@ $mat-tab-animation-duration: 500ms !default;
     z-index: 2;
     -webkit-tap-highlight-color: transparent;
     touch-action: none;
+    box-sizing: content-box;
+    background: none;
+    border: none;
+    outline: 0;
+    padding: 0;
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
 
     .mat-ripple-element {
       opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
diff --git a/src/material-experimental/mdc-tabs/tab-header.html b/src/material-experimental/mdc-tabs/tab-header.html
index 90931f7cd96d..93b780ddbeab 100644
--- a/src/material-experimental/mdc-tabs/tab-header.html
+++ b/src/material-experimental/mdc-tabs/tab-header.html
@@ -1,15 +1,18 @@
 <!-- TODO: this also had `mat-elevation-z4`. Figure out what we should do with it. -->
-<div class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before"
+<button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before"
      #previousPaginator
      aria-hidden="true"
+     type="button"
      mat-ripple
+     tabindex="-1"
      [matRippleDisabled]="_disableScrollBefore || disableRipple"
      [class.mat-mdc-tab-header-pagination-disabled]="_disableScrollBefore"
+     [disabled]="_disableScrollBefore || null"
      (click)="_handlePaginatorClick('before')"
      (mousedown)="_handlePaginatorPress('before', $event)"
      (touchend)="_stopInterval()">
   <div class="mat-mdc-tab-header-pagination-chevron"></div>
-</div>
+</button>
 
 <div
   class="mat-mdc-tab-label-container"
@@ -28,14 +31,17 @@
 </div>
 
 <!-- TODO: this also had `mat-elevation-z4`. Figure out what we should do with it. -->
-<div class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after"
+<button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after"
      #nextPaginator
      aria-hidden="true"
+     type="button"
      mat-ripple
      [matRippleDisabled]="_disableScrollAfter || disableRipple"
-     [class.mat-mdc-tab-header-pagination-disabled]="_disableScrollAfter"
+     [class.mat-mdc-header-pagination-disabled]="_disableScrollAfter"
+     [disabled]="_disableScrollAfter || null"
+     tabindex="-1"
      (mousedown)="_handlePaginatorPress('after', $event)"
      (click)="_handlePaginatorClick('after')"
      (touchend)="_stopInterval()">
   <div class="mat-mdc-tab-header-pagination-chevron"></div>
-</div>
+</button>
diff --git a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.html b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.html
index 10e25a46578c..f01013da5ce6 100644
--- a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.html
+++ b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.html
@@ -1,14 +1,18 @@
 <!-- TODO: this also had `mat-elevation-z4`. Figure out what we should do with it. -->
-<div class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before"
+<button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before"
      #previousPaginator
      aria-hidden="true"
-     mat-ripple [matRippleDisabled]="_disableScrollBefore || disableRipple"
+     type="button"
+     mat-ripple
+     tabindex="-1"
+     [matRippleDisabled]="_disableScrollBefore || disableRipple"
      [class.mat-mdc-tab-header-pagination-disabled]="_disableScrollBefore"
+     [disabled]="_disableScrollBefore || null"
      (click)="_handlePaginatorClick('before')"
      (mousedown)="_handlePaginatorPress('before', $event)"
      (touchend)="_stopInterval()">
   <div class="mat-mdc-tab-header-pagination-chevron"></div>
-</div>
+</button>
 
 <div class="mat-mdc-tab-link-container" #tabListContainer (keydown)="_handleKeydown($event)">
   <div class="mat-mdc-tab-list" #tabList (cdkObserveContent)="_onContentChanges()">
@@ -19,13 +23,17 @@
 </div>
 
 <!-- TODO: this also had `mat-elevation-z4`. Figure out what we should do with it. -->
-<div class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after"
+<button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after"
      #nextPaginator
      aria-hidden="true"
-     mat-ripple [matRippleDisabled]="_disableScrollAfter || disableRipple"
+     type="button"
+     mat-ripple
+     [matRippleDisabled]="_disableScrollAfter || disableRipple"
      [class.mat-mdc-tab-header-pagination-disabled]="_disableScrollAfter"
+     [disabled]="_disableScrollAfter || null"
+     tabindex="-1"
      (mousedown)="_handlePaginatorPress('after', $event)"
      (click)="_handlePaginatorClick('after')"
      (touchend)="_stopInterval()">
   <div class="mat-mdc-tab-header-pagination-chevron"></div>
-</div>
+</button>
diff --git a/src/material/tabs/tab-header.html b/src/material/tabs/tab-header.html
index f963f9f3d003..2a67d1eefc92 100644
--- a/src/material/tabs/tab-header.html
+++ b/src/material/tabs/tab-header.html
@@ -1,13 +1,17 @@
-<div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4"
+<button class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4"
      #previousPaginator
      aria-hidden="true"
-     mat-ripple [matRippleDisabled]="_disableScrollBefore || disableRipple"
+     type="button"
+     mat-ripple
+     tabindex="-1"
+     [matRippleDisabled]="_disableScrollBefore || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollBefore"
+     [disabled]="_disableScrollBefore || null"
      (click)="_handlePaginatorClick('before')"
      (mousedown)="_handlePaginatorPress('before', $event)"
      (touchend)="_stopInterval()">
   <div class="mat-tab-header-pagination-chevron"></div>
-</div>
+</button>
 
 <div class="mat-tab-label-container" #tabListContainer (keydown)="_handleKeydown($event)">
   <div
@@ -23,13 +27,17 @@
   </div>
 </div>
 
-<div class="mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4"
+<button class="mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4"
      #nextPaginator
      aria-hidden="true"
-     mat-ripple [matRippleDisabled]="_disableScrollAfter || disableRipple"
+     type="button"
+     mat-ripple
+     [matRippleDisabled]="_disableScrollAfter || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollAfter"
+     [disabled]="_disableScrollAfter || null"
+     tabindex="-1"
      (mousedown)="_handlePaginatorPress('after', $event)"
      (click)="_handlePaginatorClick('after')"
      (touchend)="_stopInterval()">
   <div class="mat-tab-header-pagination-chevron"></div>
-</div>
+</button>