diff --git a/src/material-experimental/mdc-checkbox/checkbox.spec.ts b/src/material-experimental/mdc-checkbox/checkbox.spec.ts index ad65a788993e..6e0eaa6fe93a 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.spec.ts +++ b/src/material-experimental/mdc-checkbox/checkbox.spec.ts @@ -641,16 +641,12 @@ describe('MDC-based MatCheckbox', () => { })); }); - describe('aria-label', () => { - let checkboxDebugElement: DebugElement; - let checkboxNativeElement: HTMLElement; - let inputElement: HTMLInputElement; - + describe('aria handling', () => { it('should use the provided aria-label', fakeAsync(() => { fixture = createComponent(CheckboxWithAriaLabel); - checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; - checkboxNativeElement = checkboxDebugElement.nativeElement; - inputElement = checkboxNativeElement.querySelector('input'); + const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; + const checkboxNativeElement = checkboxDebugElement.nativeElement; + const inputElement = checkboxNativeElement.querySelector('input'); fixture.detectChanges(); expect(inputElement.getAttribute('aria-label')).toBe('Super effective'); @@ -662,18 +658,12 @@ describe('MDC-based MatCheckbox', () => { expect(fixture.nativeElement.querySelector('input').hasAttribute('aria-label')).toBe(false); })); - }); - - describe('with provided aria-labelledby ', () => { - let checkboxDebugElement: DebugElement; - let checkboxNativeElement: HTMLElement; - let inputElement: HTMLInputElement; it('should use the provided aria-labelledby', fakeAsync(() => { fixture = createComponent(CheckboxWithAriaLabelledby); - checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; - checkboxNativeElement = checkboxDebugElement.nativeElement; - inputElement = checkboxNativeElement.querySelector('input'); + const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; + const checkboxNativeElement = checkboxDebugElement.nativeElement; + const inputElement = checkboxNativeElement.querySelector('input'); fixture.detectChanges(); expect(inputElement.getAttribute('aria-labelledby')).toBe('some-id'); @@ -681,13 +671,22 @@ describe('MDC-based MatCheckbox', () => { it('should not assign aria-labelledby if none is provided', fakeAsync(() => { fixture = createComponent(SingleCheckbox); - checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; - checkboxNativeElement = checkboxDebugElement.nativeElement; - inputElement = checkboxNativeElement.querySelector('input'); + const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; + const checkboxNativeElement = checkboxDebugElement.nativeElement; + const inputElement = checkboxNativeElement.querySelector('input'); fixture.detectChanges(); expect(inputElement.getAttribute('aria-labelledby')).toBe(null); })); + + it('should clear the static aria attributes from the host node', () => { + fixture = createComponent(CheckboxWithStaticAriaAttributes); + const checkbox = fixture.debugElement.query(By.directive(MatCheckbox))!.nativeElement; + fixture.detectChanges(); + + expect(checkbox.hasAttribute('aria')).toBe(false); + expect(checkbox.hasAttribute('aria-labelledby')).toBe(false); + }); }); describe('with provided aria-describedby ', () => { @@ -1147,3 +1146,8 @@ class CheckboxWithoutLabel { /** Test component with the native tabindex attribute. */ @Component({template: ``}) class CheckboxWithTabindexAttr {} + +@Component({ + template: ``, +}) +class CheckboxWithStaticAriaAttributes {} diff --git a/src/material-experimental/mdc-checkbox/checkbox.ts b/src/material-experimental/mdc-checkbox/checkbox.ts index e68724bbff48..c7ff04ad77c7 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.ts +++ b/src/material-experimental/mdc-checkbox/checkbox.ts @@ -77,6 +77,8 @@ const _MatCheckboxBase = mixinColor( host: { 'class': 'mat-mdc-checkbox', '[attr.tabindex]': 'null', + '[attr.aria-label]': 'null', + '[attr.aria-labelledby]': 'null', '[class._mat-animation-noopable]': `_animationMode === 'NoopAnimations'`, '[class.mdc-checkbox--disabled]': 'disabled', '[id]': 'id', diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts index dc07a1084d54..4ce92570338d 100644 --- a/src/material/checkbox/checkbox.spec.ts +++ b/src/material/checkbox/checkbox.spec.ts @@ -724,16 +724,12 @@ describe('MatCheckbox', () => { })); }); - describe('aria-label', () => { - let checkboxDebugElement: DebugElement; - let checkboxNativeElement: HTMLElement; - let inputElement: HTMLInputElement; - + describe('aria handling', () => { it('should use the provided aria-label', () => { fixture = createComponent(CheckboxWithAriaLabel); - checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; - checkboxNativeElement = checkboxDebugElement.nativeElement; - inputElement = checkboxNativeElement.querySelector('input'); + const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; + const checkboxNativeElement = checkboxDebugElement.nativeElement; + const inputElement = checkboxNativeElement.querySelector('input'); fixture.detectChanges(); expect(inputElement.getAttribute('aria-label')).toBe('Super effective'); @@ -745,18 +741,12 @@ describe('MatCheckbox', () => { expect(fixture.nativeElement.querySelector('input').hasAttribute('aria-label')).toBe(false); }); - }); - - describe('with provided aria-labelledby ', () => { - let checkboxDebugElement: DebugElement; - let checkboxNativeElement: HTMLElement; - let inputElement: HTMLInputElement; it('should use the provided aria-labelledby', () => { fixture = createComponent(CheckboxWithAriaLabelledby); - checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; - checkboxNativeElement = checkboxDebugElement.nativeElement; - inputElement = checkboxNativeElement.querySelector('input'); + const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; + const checkboxNativeElement = checkboxDebugElement.nativeElement; + const inputElement = checkboxNativeElement.querySelector('input'); fixture.detectChanges(); expect(inputElement.getAttribute('aria-labelledby')).toBe('some-id'); @@ -764,13 +754,22 @@ describe('MatCheckbox', () => { it('should not assign aria-labelledby if none is provided', () => { fixture = createComponent(SingleCheckbox); - checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; - checkboxNativeElement = checkboxDebugElement.nativeElement; - inputElement = checkboxNativeElement.querySelector('input'); + const checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; + const checkboxNativeElement = checkboxDebugElement.nativeElement; + const inputElement = checkboxNativeElement.querySelector('input'); fixture.detectChanges(); expect(inputElement.getAttribute('aria-labelledby')).toBe(null); }); + + it('should clear the static aria attributes from the host node', () => { + fixture = createComponent(CheckboxWithStaticAriaAttributes); + const checkbox = fixture.debugElement.query(By.directive(MatCheckbox))!.nativeElement; + fixture.detectChanges(); + + expect(checkbox.hasAttribute('aria')).toBe(false); + expect(checkbox.hasAttribute('aria-labelledby')).toBe(false); + }); }); describe('with provided aria-describedby ', () => { @@ -1443,3 +1442,8 @@ class TextBindingComponent { /** Test component with a simple checkbox with no inputs. */ @Component({template: ``}) class SimpleCheckbox {} + +@Component({ + template: ``, +}) +class CheckboxWithStaticAriaAttributes {} diff --git a/src/material/checkbox/checkbox.ts b/src/material/checkbox/checkbox.ts index ee0fcc07e20d..1277429d604c 100644 --- a/src/material/checkbox/checkbox.ts +++ b/src/material/checkbox/checkbox.ts @@ -117,6 +117,8 @@ const _MatCheckboxBase = mixinTabIndex( 'class': 'mat-checkbox', '[id]': 'id', '[attr.tabindex]': 'null', + '[attr.aria-label]': 'null', + '[attr.aria-labelledby]': 'null', '[class.mat-checkbox-indeterminate]': 'indeterminate', '[class.mat-checkbox-checked]': 'checked', '[class.mat-checkbox-disabled]': 'disabled',