mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(select): required asterisk should use warn color (#5498)
* When the select is focused and is also required, the asterisk of the select should use the accent palette. Similar to the Material Design input specifications. Fixes #5496
This commit is contained in:
committed by
mmalerba
parent
42b2413ab8
commit
97494f75ac
@@ -52,6 +52,10 @@
|
||||
&.mat-accent {
|
||||
@include _mat-select-inner-content-theme($accent);
|
||||
}
|
||||
|
||||
&.mat-select-required .mat-select-placeholder::after {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-select:focus:not(.mat-select-disabled).mat-warn,
|
||||
|
||||
@@ -72,7 +72,7 @@ $mat-select-panel-max-height: 256px !default;
|
||||
}
|
||||
|
||||
// TODO: Double-check accessibility of this style
|
||||
[aria-required=true] &::after {
|
||||
.mat-select-required &::after {
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1572,6 +1572,17 @@ describe('MdSelect', () => {
|
||||
.toEqual('true', `Expected aria-required attr to be true for required selects.`);
|
||||
});
|
||||
|
||||
it('should set the mat-select-required class for required selects', () => {
|
||||
expect(select.classList).not.toContain(
|
||||
'mat-select-required', `Expected the mat-select-required class not to be set.`);
|
||||
|
||||
fixture.componentInstance.isRequired = true;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(select.classList).toContain(
|
||||
'mat-select-required', `Expected the mat-select-required class to be set.`);
|
||||
});
|
||||
|
||||
it('should set aria-invalid for selects that are invalid', () => {
|
||||
expect(select.getAttribute('aria-invalid'))
|
||||
.toEqual('false', `Expected aria-invalid attr to be false for valid selects.`);
|
||||
|
||||
@@ -132,6 +132,7 @@ export const _MdSelectMixinBase = mixinColor(mixinDisabled(MdSelectBase), 'prima
|
||||
'[attr.aria-invalid]': '_control?.invalid || "false"',
|
||||
'[attr.aria-owns]': '_optionIds',
|
||||
'[class.mat-select-disabled]': 'disabled',
|
||||
'[class.mat-select-required]': 'required',
|
||||
'class': 'mat-select',
|
||||
'(keydown)': '_handleClosedKeydown($event)',
|
||||
'(blur)': '_onBlur()',
|
||||
|
||||
Reference in New Issue
Block a user