fix(material/tabs): switch pagination to not use native buttons (#29605)

These changes undo #14640 and #24338 since they are causing Chrome to log accessibility warnings. We don't want to use native `button` elements here, because they're always focusable (unless disabled) and these buttons should be completely invisible to assistive technology. AT users can navigate the tabs directly without having to use the pagination.

(cherry picked from commit 357f6f2)

Author: crisbeto

src/material/tabs/_tabs-common.scss

@@ -300,10 +300,7 @@ $mat-tab-animation-duration: 500ms !default;
     -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;

src/material/tabs/tab-header.html

@@ -1,17 +1,17 @@
-<button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before"
+<!--
+ Note that this intentionally uses a `div` instead of a `button`, because it's not part of
+ the regular tabs flow and is only here to support mouse users. It should also not be focusable.
+-->
+<div 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>
-</button>
+</div>
 
 <div
   class="mat-mdc-tab-label-container"
@@ -31,17 +31,13 @@
   </div>
 </div>
 
-<button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after"
+<div 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"
-     [disabled]="_disableScrollAfter || null"
-     tabindex="-1"
      (mousedown)="_handlePaginatorPress('after', $event)"
      (click)="_handlePaginatorClick('after')"
      (touchend)="_stopInterval()">
   <div class="mat-mdc-tab-header-pagination-chevron"></div>
-</button>
+</div>

src/material/tabs/tab-nav-bar/tab-nav-bar.html

@@ -1,17 +1,17 @@
-<button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before"
+<!--
+ Note that this intentionally uses a `div` instead of a `button`, because it's not part of
+ the regular tabs flow and is only here to support mouse users. It should also not be focusable.
+-->
+<div 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>
-</button>
+</div>
 
 <div class="mat-mdc-tab-link-container" #tabListContainer (keydown)="_handleKeydown($event)">
   <div class="mat-mdc-tab-list" #tabList (cdkObserveContent)="_onContentChanges()">
@@ -21,17 +21,13 @@
   </div>
 </div>
 
-<button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after"
+<div 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"
-     [disabled]="_disableScrollAfter || null"
-     tabindex="-1"
      (mousedown)="_handlePaginatorPress('after', $event)"
      (click)="_handlePaginatorClick('after')"
      (touchend)="_stopInterval()">
   <div class="mat-mdc-tab-header-pagination-chevron"></div>
-</button>
+</div>