Skip to content

Commit

Permalink
fix(select): required asterisk should use warn color (#5498)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
devversion authored and mmalerba committed Jul 9, 2017
1 parent 42b2413 commit 97494f7
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 1 deletion.
4 changes: 4 additions & 0 deletions src/lib/select/_select-theme.scss
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/lib/select/select.scss
Expand Up @@ -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: '*';
}
}
Expand Down
11 changes: 11 additions & 0 deletions src/lib/select/select.spec.ts
Expand Up @@ -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.`);
Expand Down
1 change: 1 addition & 0 deletions src/lib/select/select.ts
Expand Up @@ -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()',
Expand Down

0 comments on commit 97494f7

Please sign in to comment.