Skip to content

Commit

Permalink
fix(material/chips): remove button role from editable chips
Browse files Browse the repository at this point in the history
Removes the button role from editable input chips. Fix accessibility
issue in ChipRow where the chip action element is mislabeled as a
button (angular#27106).

Fix angular#27106
  • Loading branch information
zarend committed Jun 16, 2023
1 parent 3be0809 commit 39c3d11
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 3 deletions.
1 change: 0 additions & 1 deletion src/material/chips/chip-row.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
<span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
<span
matChipAction
[attr.role]="editable ? 'button' : null"
[tabIndex]="tabIndex"
[disabled]="disabled"
[attr.aria-label]="ariaLabel"
Expand Down
6 changes: 4 additions & 2 deletions src/material/chips/chip-row.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -256,14 +256,16 @@ describe('MDC-based Row Chips', () => {
return chipNativeElement.querySelector('.mat-chip-edit-input')!;
}

it('should set the role of the primary action based on whether it is editable', () => {
it('should set not set role of the primary action even if it is editable', () => {
testComponent.editable = false;
fixture.detectChanges();
expect(primaryAction.hasAttribute('role')).toBe(false);

testComponent.editable = true;
fixture.detectChanges();
expect(primaryAction.getAttribute('role')).toBe('button');
// Test regression of bug where element is mislabeled as a button role. Element that does not perform its
// action on click event is not a button by ARIA spec (#27106).
expect(primaryAction.hasAttribute('role')).toBe(false);
});

it('should not delete the chip on DELETE or BACKSPACE', () => {
Expand Down

0 comments on commit 39c3d11

Please sign in to comment.