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.
angular · Aug 20, 2024 · 357f6f2 · 357f6f2
1 parent 04ce4d2
commit 357f6f2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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>