From 30f72239c084add5eedf3b1e76e2ec49e4ef641a Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 1 Jun 2021 20:44:40 +0200
Subject: [PATCH] fix(material/tabs): use buttons for paginator

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).
---
 src/material/tabs/_tabs-common.scss           |  9 +++++++++
 .../tabs/tab-nav-bar/tab-nav-bar.html         | 20 +++++++++++++------
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss
index e53684cb2633..8a9915c6072e 100644
--- a/src/material/tabs/_tabs-common.scss
+++ b/src/material/tabs/_tabs-common.scss
@@ -95,6 +95,15 @@ $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-tab-header-pagination-controls-enabled & {
       display: flex;
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.html b/src/material/tabs/tab-nav-bar/tab-nav-bar.html
index 315f57a4e978..20abdf685d4c 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.html
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.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-link-container" #tabListContainer (keydown)="_handleKeydown($event)">
   <div
@@ -22,13 +26,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>