fix(material/tabs): use buttons for paginator also tab-header and mdc (…

…#24338)

This is a follow-up PR to #14640 / e8919bc

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

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

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>

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>

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>