diff --git a/src/material/paginator/paginator.spec.ts b/src/material/paginator/paginator.spec.ts index 54180cd4bc07..6e7680505b82 100644 --- a/src/material/paginator/paginator.spec.ts +++ b/src/material/paginator/paginator.spec.ts @@ -107,11 +107,9 @@ describe('MatPaginator', () => { expect(getNextButton(fixture).getAttribute('aria-label')).toBe('Next page'); const select = fixture.nativeElement.querySelector('.mat-mdc-select'); - const selectLabelIds = select.getAttribute('aria-labelledby')?.split(/\s/g) as string[]; - const selectLabelTexts = selectLabelIds?.map(labelId => { - return fixture.nativeElement.querySelector(`#${labelId}`)?.textContent?.trim(); - }); - expect(selectLabelTexts).toContain('Items per page:'); + const selectLabelId = select.getAttribute('aria-labelledby').trim(); + const selectLabelText = fixture.nativeElement.querySelector(`#${selectLabelId}`)?.textContent; + expect(selectLabelText).toContain('Items per page:'); }); it('should re-render when the i18n labels change', () => { diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts index bb7ca95eba22..0817bf427dd6 100644 --- a/src/material/select/select.spec.ts +++ b/src/material/select/select.spec.ts @@ -183,31 +183,17 @@ describe('MatSelect', () => { fixture.detectChanges(); const labelId = fixture.nativeElement.querySelector('label').id; - const valueId = fixture.nativeElement.querySelector('.mat-mdc-select-value').id; - expect(select.getAttribute('aria-labelledby')).toBe(`${labelId} ${valueId} myLabelId`); + expect(select.getAttribute('aria-labelledby')).toBe(`${labelId} myLabelId`); }); - it('should set aria-labelledby to the value and label IDs', () => { + it('should set aria-labelledby to the label ID', () => { fixture.detectChanges(); const labelId = fixture.nativeElement.querySelector('label').id; - const valueId = fixture.nativeElement.querySelector('.mat-mdc-select-value').id; - expect(select.getAttribute('aria-labelledby')).toBe(`${labelId} ${valueId}`); + expect(select.getAttribute('aria-labelledby')).toBe(labelId); }); - it('should trim the trigger aria-labelledby when there is no label', fakeAsync(() => { - fixture.componentInstance.hasLabel = false; - fixture.changeDetectorRef.markForCheck(); - fixture.detectChanges(); - flush(); - fixture.detectChanges(); - - // Note that we assert that there are no spaces around the value. - const valueId = fixture.nativeElement.querySelector('.mat-mdc-select-value').id; - expect(select.getAttribute('aria-labelledby')).toBe(`${valueId}`); - })); - it('should set the tabindex of the select to 0 by default', () => { expect(select.getAttribute('tabindex')).toEqual('0'); }); @@ -302,17 +288,6 @@ describe('MatSelect', () => { expect(select.getAttribute('tabindex')).toEqual('0'); }); - it('should set `aria-labelledby` to the value ID if there is no form field', () => { - fixture.destroy(); - - const labelFixture = TestBed.createComponent(SelectWithChangeEvent); - labelFixture.detectChanges(); - select = labelFixture.debugElement.query(By.css('mat-select'))!.nativeElement; - const valueId = labelFixture.nativeElement.querySelector('.mat-mdc-select-value').id; - - expect(select.getAttribute('aria-labelledby')?.trim()).toBe(valueId); - }); - it('should select options via the UP/DOWN arrow keys on a closed select', fakeAsync(() => { const formControl = fixture.componentInstance.control; const options = fixture.componentInstance.options.toArray(); diff --git a/src/material/select/select.ts b/src/material/select/select.ts index e99ce6b7d40b..37a31597833a 100644 --- a/src/material/select/select.ts +++ b/src/material/select/select.ts @@ -1390,8 +1390,7 @@ export class MatSelect return null; } - const labelId = this._parentFormField?.getLabelId(); - let value = (labelId ? labelId + ' ' : '') + this._valueId; + let value = this._parentFormField?.getLabelId() || ''; if (this.ariaLabelledby) { value += ' ' + this.ariaLabelledby;