From 5e41a0ad0903a9e4360cdf2f7c26c86e394bd215 Mon Sep 17 00:00:00 2001
From: Jeri Peier <jeremias.peier@sbb.ch>
Date: Tue, 22 Feb 2022 18:30:40 +0100
Subject: [PATCH] fix(material/tabs): use buttons for paginator also tab-header
 and mdc (#24338)

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).

(cherry picked from commit d9ad68acdab665446e1c4e2c7c66b522c004d026)
---
 .../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>