Skip to content

Commit a3250c3

Browse files
authored
fix(material/paginator): add aria-hidden="true" to decorative svg's (#27083)
For the mat-paginator component, add aria-hidden="true" to the decorative svg elements. Previously, the svg elements for the chevron icons would produce an img node in the a11y tree nested under the button node for "Previous page"/"Next page". This seemed to cause issue with JAWS screenreader where screen reader navigation would have duplicate navigation (#26967). With this change applied, the svg elements are aria-hidden and do not affect the accessibility tree. This is appripriate since the chevron icons are purely decorative. Fix #26967
1 parent 1546b3f commit a3250c3

File tree

1 file changed

+16
-4
lines changed

1 file changed

+16
-4
lines changed

src/material/paginator/paginator.html

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,10 @@
4343
[matTooltipPosition]="'above'"
4444
[disabled]="_previousButtonsDisabled()"
4545
*ngIf="showFirstLastButtons">
46-
<svg class="mat-mdc-paginator-icon" viewBox="0 0 24 24" focusable="false">
46+
<svg class="mat-mdc-paginator-icon"
47+
viewBox="0 0 24 24"
48+
focusable="false"
49+
aria-hidden="true">
4750
<path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
4851
</svg>
4952
</button>
@@ -55,7 +58,10 @@
5558
[matTooltipDisabled]="_previousButtonsDisabled()"
5659
[matTooltipPosition]="'above'"
5760
[disabled]="_previousButtonsDisabled()">
58-
<svg class="mat-mdc-paginator-icon" viewBox="0 0 24 24" focusable="false">
61+
<svg class="mat-mdc-paginator-icon"
62+
viewBox="0 0 24 24"
63+
focusable="false"
64+
aria-hidden="true">
5965
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
6066
</svg>
6167
</button>
@@ -67,7 +73,10 @@
6773
[matTooltipDisabled]="_nextButtonsDisabled()"
6874
[matTooltipPosition]="'above'"
6975
[disabled]="_nextButtonsDisabled()">
70-
<svg class="mat-mdc-paginator-icon" viewBox="0 0 24 24" focusable="false">
76+
<svg class="mat-mdc-paginator-icon"
77+
viewBox="0 0 24 24"
78+
focusable="false"
79+
aria-hidden="true">
7180
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
7281
</svg>
7382
</button>
@@ -80,7 +89,10 @@
8089
[matTooltipPosition]="'above'"
8190
[disabled]="_nextButtonsDisabled()"
8291
*ngIf="showFirstLastButtons">
83-
<svg class="mat-mdc-paginator-icon" viewBox="0 0 24 24" focusable="false">
92+
<svg class="mat-mdc-paginator-icon"
93+
viewBox="0 0 24 24"
94+
focusable="false"
95+
aria-hidden="true">
8496
<path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
8597
</svg>
8698
</button>

0 commit comments

Comments
 (0)