Skip to content

Commit 67e6c5d

Browse files
committed
fix(material-experimental/mdc-chips): make aria-hidden element non-focusable
The MDC-based `MatChipRemove` has a default `tabindex` of 0 and inherits `aria-hidden` from `MatChipTrailingIcon` which is invalid and is flagged by axe. These changes switch the default `tabindex` to -1.
1 parent a30094b commit 67e6c5d

File tree

2 files changed

+13
-4
lines changed

2 files changed

+13
-4
lines changed

src/material-experimental/mdc-chips/chip-icons.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const _MatChipRemoveMixinBase:
8484
CanDisableCtor &
8585
HasTabIndexCtor &
8686
typeof MatChipRemoveBase =
87-
mixinTabIndex(mixinDisabled(MatChipRemoveBase));
87+
mixinTabIndex(mixinDisabled(MatChipRemoveBase), -1);
8888

8989
/**
9090
* Directive to remove the parent chip when the trailing icon is clicked or
@@ -95,9 +95,11 @@ const _MatChipRemoveMixinBase:
9595
*
9696
* Example:
9797
*
98-
* `<mat-chip>
99-
* <mat-icon matChipRemove>cancel</mat-icon>
100-
* </mat-chip>`
98+
* ```
99+
* <mat-chip>
100+
* <mat-icon matChipRemove>cancel</mat-icon>
101+
* </mat-chip>
102+
* ```
101103
*/
102104
@Directive({
103105
selector: '[matChipRemove]',

src/material-experimental/mdc-chips/chip-remove.spec.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,13 @@ describe('MDC-based Chip Remove', () => {
7878

7979
expect(chipNativeElement.classList.contains('mdc-chip--exit')).toBe(false);
8080
});
81+
82+
it('should not make the button focusable when it has aria-hidden', () => {
83+
const buttonElement = chipNativeElement.querySelector('button')!;
84+
85+
expect(buttonElement.getAttribute('tabindex')).toBe('-1');
86+
});
87+
8188
});
8289
});
8390

0 commit comments

Comments
 (0)