Skip to content

Commit ef8f16a

Browse files
committed
fix(tabs): use buttons for paginator
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).
1 parent d22f48c commit ef8f16a

File tree

2 files changed

+23
-8
lines changed

2 files changed

+23
-8
lines changed

src/lib/tabs/tab-header.html

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
<div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4"
2-
aria-hidden="true"
3-
mat-ripple [matRippleDisabled]="_disableScrollBefore || disableRipple"
1+
<button class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4"
2+
type="button"
3+
mat-ripple
4+
[matRippleDisabled]="_disableScrollBefore || disableRipple"
45
[class.mat-tab-header-pagination-disabled]="_disableScrollBefore"
6+
[disabled]="_disableScrollBefore || null"
7+
tabindex="-1"
58
(click)="_scrollHeader('before')">
69
<div class="mat-tab-header-pagination-chevron"></div>
7-
</div>
10+
</button>
811

912
<div class="mat-tab-label-container" #tabListContainer
1013
(keydown)="_handleKeydown($event)">
@@ -16,10 +19,13 @@
1619
</div>
1720
</div>
1821

19-
<div class="mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4"
20-
aria-hidden="true"
21-
mat-ripple [matRippleDisabled]="_disableScrollAfter || disableRipple"
22+
<button class="mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4"
23+
type="button"
24+
mat-ripple
25+
[matRippleDisabled]="_disableScrollAfter || disableRipple"
2226
[class.mat-tab-header-pagination-disabled]="_disableScrollAfter"
27+
[disabled]="_disableScrollAfter || null"
28+
tabindex="-1"
2329
(click)="_scrollHeader('after')">
2430
<div class="mat-tab-header-pagination-chevron"></div>
25-
</div>
31+
</button>

src/lib/tabs/tab-header.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,15 @@
3232
min-width: 32px;
3333
cursor: pointer;
3434
z-index: 2;
35+
box-sizing: content-box;
36+
background: none;
37+
border: none;
38+
outline: 0;
39+
padding: 0;
40+
41+
&::-moz-focus-inner {
42+
border: 0;
43+
}
3544

3645
.mat-tab-header-pagination-controls-enabled & {
3746
display: flex;

0 commit comments

Comments
 (0)