Skip to content

Commit

Permalink
fix(material/tabs): switch pagination to not use native buttons (#29605)
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
crisbeto committed Aug 20, 2024
1 parent 3a2d13e commit 5f0c890
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 27 deletions.
3 changes: 0 additions & 3 deletions src/material/tabs/_tabs-common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
20 changes: 8 additions & 12 deletions src/material/tabs/tab-header.html
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>
20 changes: 8 additions & 12 deletions src/material/tabs/tab-nav-bar/tab-nav-bar.html
Original file line number Diff line number Diff line change
@@ -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()">
Expand All @@ -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>

0 comments on commit 5f0c890

Please sign in to comment.