Skip to content

Commit

Permalink
fix: add aria-disabled="true" to disabled & alwaysFocused chips
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 651035761
  • Loading branch information
material-web-copybara authored and copybara-github committed Jul 10, 2024
1 parent 7867674 commit 16298ef
Show file tree
Hide file tree
Showing 6 changed files with 42 additions and 0 deletions.
3 changes: 3 additions & 0 deletions chips/internal/assist-chip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ export class AssistChip extends Chip {
class="primary action"
id="button"
aria-label=${ariaLabel || nothing}
aria-disabled=${this.disabled && this.alwaysFocusable
? 'true'
: nothing}
?disabled=${this.disabled && !this.alwaysFocusable}
type="button"
>${content}</button
Expand Down
11 changes: 11 additions & 0 deletions chips/internal/assist-chip_test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,5 +45,16 @@ describe('Assist chip', () => {
.withContext('should not have any disabled styling or behavior')
.toBeNull();
});

it('should use aria-disabled when disabled and alwaysFocusable', async () => {
const chip = await setupTest();
chip.disabled = true;
chip.alwaysFocusable = true;
await chip.updateComplete;

expect(chip.renderRoot.querySelector('button[aria-disabled="true"]'))
.withContext('should have aria-disabled="true"')
.not.toBeNull();
});
});
});
3 changes: 3 additions & 0 deletions chips/internal/filter-chip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,9 @@ export class FilterChip extends MultiActionChip {
id="button"
aria-label=${ariaLabel || nothing}
aria-pressed=${this.selected}
aria-disabled=${this.disabled && this.alwaysFocusable
? 'true'
: nothing}
?disabled=${this.disabled && !this.alwaysFocusable}
@click=${this.handleClick}
>${content}</button
Expand Down
11 changes: 11 additions & 0 deletions chips/internal/filter-chip_test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -99,5 +99,16 @@ describe('Filter chip', () => {
.withContext('chip.selected reverts to true')
.toBeTrue();
});

it('should use aria-disabled when disabled and alwaysFocusable', async () => {
const {chip} = await setupTest();
chip.disabled = true;
chip.alwaysFocusable = true;
await chip.updateComplete;

expect(chip.renderRoot.querySelector('button[aria-disabled="true"]'))
.withContext('should have aria-disabled="true"')
.not.toBeNull();
});
});
});
3 changes: 3 additions & 0 deletions chips/internal/input-chip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,9 @@ export class InputChip extends MultiActionChip {
class="primary action"
id="button"
aria-label=${ariaLabel || nothing}
aria-disabled=${this.disabled && this.alwaysFocusable
? 'true'
: nothing}
?disabled=${this.disabled && !this.alwaysFocusable}
type="button"
>${content}</button
Expand Down
11 changes: 11 additions & 0 deletions chips/internal/input-chip_test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,5 +45,16 @@ describe('Input chip', () => {
.withContext('should not have any disabled styling or behavior')
.toBeNull();
});

it('should use aria-disabled when disabled and alwaysFocusable', async () => {
const chip = await setupTest();
chip.disabled = true;
chip.alwaysFocusable = true;
await chip.updateComplete;

expect(chip.renderRoot.querySelector('button[aria-disabled="true"]'))
.withContext('should have aria-disabled="true"')
.not.toBeNull();
});
});
});

0 comments on commit 16298ef

Please sign in to comment.