fix(select): pointing to non-existent element via aria-labelledby (#12411)

Fixes `mat-select` referring to an element that doesn't exist, through `aria-labelledby`, if the select is inside a form field that doesn't have a label.

Fixes #12405.
This commit is contained in:
Kristiyan Kostadinov
2018-08-27 18:58:39 +02:00
committed by Jeremy Elbourn
parent 32e5d729fc
commit 3b7f0f12d4
2 changed files with 13 additions and 1 deletions
+11
View File
@@ -126,6 +126,7 @@ describe('MatSelect', () => {
SelectWithGroups,
SelectWithGroupsAndNgContainer,
SelectWithFormFieldLabel,
SelectWithChangeEvent,
]);
}));
@@ -255,6 +256,16 @@ describe('MatSelect', () => {
expect(select.getAttribute('aria-labelledby')).toBeFalsy();
});
it('should not set `aria-labelledby` if there is no form field label', () => {
fixture.destroy();
const labelFixture = TestBed.createComponent(SelectWithChangeEvent);
labelFixture.detectChanges();
select = labelFixture.debugElement.query(By.css('mat-select')).nativeElement;
expect(select.getAttribute('aria-labelledby')).toBeFalsy();
});
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();
+2 -1
View File
@@ -1065,7 +1065,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
// Note: we use `_getAriaLabel` here, because we want to check whether there's a
// computed label. `this.ariaLabel` is only the user-specified label.
if (!this._parentFormField || this._getAriaLabel()) {
if (!this._parentFormField || !this._parentFormField._hasFloatingLabel() ||
this._getAriaLabel()) {
return null;
}