From 0030ff6341dc7b3d98948f15d2fba7e3e9ba7916 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 19 Aug 2024 09:20:38 +0200
Subject: [PATCH] fix(material/tabs): switch pagination to not use native
 buttons

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.
---
 src/material/tabs/_tabs-common.scss           |  3 ---
 src/material/tabs/tab-header.html             | 20 ++++++++-----------
 .../tabs/tab-nav-bar/tab-nav-bar.html         | 19 ++++++++----------
 3 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss
index 8d3e4063b437..241c7a2a28a7 100644
--- a/src/material/tabs/_tabs-common.scss
+++ b/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;
diff --git a/src/material/tabs/tab-header.html b/src/material/tabs/tab-header.html
index 4c2e5772999e..ac58ae838d36 100644
--- a/src/material/tabs/tab-header.html
+++ b/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>
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 6f509253e3c1..4a9072186568 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.html
+++ b/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,14 @@
   </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>