From 9e85799d6c9c44f393240c087b6a9dc30bb4882f Mon Sep 17 00:00:00 2001 From: SendilKumar N Date: Wed, 1 Jun 2016 15:56:22 +0800 Subject: [PATCH 1/4] fix for checkbox opacity issues in safari --- src/components/checkbox/checkbox.scss | 19 ++++++++++++------- src/core/style/_variables.scss | 2 +- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss index 4564ab1f1764..e9377a580da2 100644 --- a/src/components/checkbox/checkbox.scss +++ b/src/components/checkbox/checkbox.scss @@ -241,7 +241,7 @@ md-checkbox { width: $md-checkbox-size; [dir="rtl"] & { - margin:{ + margin: { left: $md-checkbox-item-spacing; right: auto; } @@ -265,9 +265,7 @@ md-checkbox { .md-checkbox-background { @extend %md-checkbox-outer-box; - align-items: center; - background-color: $md-checkbox-background-color; - opacity: 0; + align-items: center; display: inline-flex; justify-content: center; transition: background-color $md-checkbox-transition-duration @@ -333,15 +331,15 @@ md-checkbox { .md-checkbox-mixedmark { transform: scaleX(1) rotate(-45deg); } - + .md-checkbox-background { - opacity: 1; + background-color: $md-checkbox-background-color; } } .md-checkbox-indeterminate { .md-checkbox-background { - opacity: 1; + background-color: $md-checkbox-background-color; } .md-checkbox-checkmark { @@ -359,6 +357,13 @@ md-checkbox { } } + +.md-checkbox-unchecked { + .md-checkbox-background { + background-color: none; + } +} + .md-checkbox-disabled { // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors, // this does not work well with elements layered on top of one another. To get around this we diff --git a/src/core/style/_variables.scss b/src/core/style/_variables.scss index 417a6cd0a0cf..5c08c02909e2 100644 --- a/src/core/style/_variables.scss +++ b/src/core/style/_variables.scss @@ -24,7 +24,7 @@ $md-toggle-size: 20px !default; // TODO(jelbourn): all of these need to be revisited // The default animation curves used by material design. -$md-linear-out-slow-in-timing-function: cubic-bezier(0.0, 0.0, 0.2, 0.1) !default; +$md-linear-out-slow-in-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1) !default; $md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !default; $md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0.0, 1, 1) !default; From db62acfa8f654f4c8585bfd7f1fcb0dc5f04bb10 Mon Sep 17 00:00:00 2001 From: SendilKumar N Date: Thu, 2 Jun 2016 16:34:58 +0800 Subject: [PATCH 2/4] readio --- src/components/radio/radio.html | 4 +- src/components/radio/radio.spec.ts | 73 +++++++++++++++++++++++++++++- src/components/radio/radio.ts | 11 +++++ src/demo-app/radio/radio-demo.html | 6 +-- 4 files changed, 89 insertions(+), 5 deletions(-) diff --git a/src/components/radio/radio.html b/src/components/radio/radio.html index e094b07f4842..2269c506a3c5 100644 --- a/src/components/radio/radio.html +++ b/src/components/radio/radio.html @@ -15,7 +15,9 @@ [name]="name" (change)="onInputChange($event)" (focus)="onInputFocus()" - (blur)="onInputBlur()" /> + (blur)="onInputBlur()" + [attr.aria-label]="ariaLabel" + [attr.aria-labelledby]="ariaLabelledby"/>
diff --git a/src/components/radio/radio.spec.ts b/src/components/radio/radio.spec.ts index 6f5a8c1a6de4..b3c51094b9df 100644 --- a/src/components/radio/radio.spec.ts +++ b/src/components/radio/radio.spec.ts @@ -195,7 +195,7 @@ describe('MdRadio', () => { expect(radioInstances[1].checked).toBe(true); }); - it('should deselect all of the checkboxes when the group value is cleared', () => { + it('should deselect all of the radioButtones when the group value is cleared', () => { radioInstances[0].checked = true; expect(groupInstance.value).toBeTruthy(); @@ -206,6 +206,56 @@ describe('MdRadio', () => { }); }); + describe('with provided aria-label ', () => { + let fixture: ComponentFixture; + let radioButtonDebugElement: DebugElement; + let radioButtonNativeElement: HTMLElement; + let inputElement: HTMLInputElement; + + it('should use the provided aria-label', async(() => { + builder.createAsync(RadioButtonWithAriaLabel).then(f => { + fixture = f; + radioButtonDebugElement = fixture.debugElement.query(By.directive(MdRadioButton)); + radioButtonNativeElement = radioButtonDebugElement.nativeElement; + inputElement = radioButtonNativeElement.querySelector('input'); + + fixture.detectChanges(); + expect(inputElement.getAttribute('aria-label')).toBe('superRadio'); + }); + })); + }); + + describe('with provided aria-labelledby ', () => { + let fixture: ComponentFixture; + let radioButtonDebugElement: DebugElement; + let radioButtonNativeElement: HTMLElement; + let inputElement: HTMLInputElement; + + it('should use the provided aria-labelledby', async(() => { + builder.createAsync(RadioButtonWithAriaLabelledby).then(f => { + fixture = f; + radioButtonDebugElement = fixture.debugElement.query(By.directive(MdRadioButton)); + radioButtonNativeElement = radioButtonDebugElement.nativeElement; + inputElement = radioButtonNativeElement.querySelector('input'); + + fixture.detectChanges(); + expect(inputElement.getAttribute('aria-labelledby')).toBe('superByRadio'); + }); + })); + + it('should not assign aria-labelledby if none is provided', async(() => { + builder.createAsync(SingleRadioButton).then(f => { + fixture = f; + radioButtonDebugElement = fixture.debugElement.query(By.directive(MdRadioButton)); + radioButtonNativeElement = radioButtonDebugElement.nativeElement; + inputElement = radioButtonNativeElement.querySelector('input'); + + fixture.detectChanges(); + expect(inputElement.getAttribute('aria-labelledby')).toBe(null); + }); + })); + }); + describe('group with ngModel', () => { let fixture: ComponentFixture; let groupDebugElement: DebugElement; @@ -448,6 +498,27 @@ class RadioGroupWithNgModel { lastEvent: MdRadioChange; } +/** Simple test component with an aria-label set. */ +@Component({ + directives: [MdRadioButton], + template: `Spring` +}) +class RadioButtonWithAriaLabel { } + +/** Simple test component with an aria-label set. */ +@Component({ + directives: [MdRadioButton], + template: `Spring` +}) +class RadioButtonWithAriaLabelledby {} + +/** Simple test component with an aria-label set. */ +@Component({ + directives: [MdRadioButton], + template: `Spring` +}) +class SingleRadioButton {} + // TODO(jelbourn): remove eveything below when Angular supports faking events. /** diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index f4028ad8db40..c1ed4ffc7c57 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -239,6 +239,17 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor { } }) export class MdRadioButton implements OnInit { + /** + * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will + * take precedence so this may be omitted. + */ + @Input('aria-label') ariaLabel: string = ''; + + /** + * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element + */ + @Input('aria-labelledby') ariaLabelledby: string = null; + @HostBinding('class.md-radio-focused') private _isFocused: boolean; diff --git a/src/demo-app/radio/radio-demo.html b/src/demo-app/radio/radio-demo.html index 802d0070a149..a4a64dff2ac2 100644 --- a/src/demo-app/radio/radio-demo.html +++ b/src/demo-app/radio/radio-demo.html @@ -1,8 +1,8 @@

Basic Example

- Option 1 - Option 2 - Option 3 (disabled) + Option 1 + Option 2 + Option 3 (disabled)

Dynamic Example

From ec85b827dd5e69d856de321b9378133d3c4f6bfc Mon Sep 17 00:00:00 2001 From: SendilKumar N Date: Thu, 2 Jun 2016 16:40:02 +0800 Subject: [PATCH 3/4] Revert "readio" This reverts commit db62acfa8f654f4c8585bfd7f1fcb0dc5f04bb10. --- src/components/radio/radio.html | 4 +- src/components/radio/radio.spec.ts | 73 +----------------------------- src/components/radio/radio.ts | 11 ----- src/demo-app/radio/radio-demo.html | 6 +-- 4 files changed, 5 insertions(+), 89 deletions(-) diff --git a/src/components/radio/radio.html b/src/components/radio/radio.html index 2269c506a3c5..e094b07f4842 100644 --- a/src/components/radio/radio.html +++ b/src/components/radio/radio.html @@ -15,9 +15,7 @@ [name]="name" (change)="onInputChange($event)" (focus)="onInputFocus()" - (blur)="onInputBlur()" - [attr.aria-label]="ariaLabel" - [attr.aria-labelledby]="ariaLabelledby"/> + (blur)="onInputBlur()" />
diff --git a/src/components/radio/radio.spec.ts b/src/components/radio/radio.spec.ts index b3c51094b9df..6f5a8c1a6de4 100644 --- a/src/components/radio/radio.spec.ts +++ b/src/components/radio/radio.spec.ts @@ -195,7 +195,7 @@ describe('MdRadio', () => { expect(radioInstances[1].checked).toBe(true); }); - it('should deselect all of the radioButtones when the group value is cleared', () => { + it('should deselect all of the checkboxes when the group value is cleared', () => { radioInstances[0].checked = true; expect(groupInstance.value).toBeTruthy(); @@ -206,56 +206,6 @@ describe('MdRadio', () => { }); }); - describe('with provided aria-label ', () => { - let fixture: ComponentFixture; - let radioButtonDebugElement: DebugElement; - let radioButtonNativeElement: HTMLElement; - let inputElement: HTMLInputElement; - - it('should use the provided aria-label', async(() => { - builder.createAsync(RadioButtonWithAriaLabel).then(f => { - fixture = f; - radioButtonDebugElement = fixture.debugElement.query(By.directive(MdRadioButton)); - radioButtonNativeElement = radioButtonDebugElement.nativeElement; - inputElement = radioButtonNativeElement.querySelector('input'); - - fixture.detectChanges(); - expect(inputElement.getAttribute('aria-label')).toBe('superRadio'); - }); - })); - }); - - describe('with provided aria-labelledby ', () => { - let fixture: ComponentFixture; - let radioButtonDebugElement: DebugElement; - let radioButtonNativeElement: HTMLElement; - let inputElement: HTMLInputElement; - - it('should use the provided aria-labelledby', async(() => { - builder.createAsync(RadioButtonWithAriaLabelledby).then(f => { - fixture = f; - radioButtonDebugElement = fixture.debugElement.query(By.directive(MdRadioButton)); - radioButtonNativeElement = radioButtonDebugElement.nativeElement; - inputElement = radioButtonNativeElement.querySelector('input'); - - fixture.detectChanges(); - expect(inputElement.getAttribute('aria-labelledby')).toBe('superByRadio'); - }); - })); - - it('should not assign aria-labelledby if none is provided', async(() => { - builder.createAsync(SingleRadioButton).then(f => { - fixture = f; - radioButtonDebugElement = fixture.debugElement.query(By.directive(MdRadioButton)); - radioButtonNativeElement = radioButtonDebugElement.nativeElement; - inputElement = radioButtonNativeElement.querySelector('input'); - - fixture.detectChanges(); - expect(inputElement.getAttribute('aria-labelledby')).toBe(null); - }); - })); - }); - describe('group with ngModel', () => { let fixture: ComponentFixture; let groupDebugElement: DebugElement; @@ -498,27 +448,6 @@ class RadioGroupWithNgModel { lastEvent: MdRadioChange; } -/** Simple test component with an aria-label set. */ -@Component({ - directives: [MdRadioButton], - template: `Spring` -}) -class RadioButtonWithAriaLabel { } - -/** Simple test component with an aria-label set. */ -@Component({ - directives: [MdRadioButton], - template: `Spring` -}) -class RadioButtonWithAriaLabelledby {} - -/** Simple test component with an aria-label set. */ -@Component({ - directives: [MdRadioButton], - template: `Spring` -}) -class SingleRadioButton {} - // TODO(jelbourn): remove eveything below when Angular supports faking events. /** diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index c1ed4ffc7c57..f4028ad8db40 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -239,17 +239,6 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor { } }) export class MdRadioButton implements OnInit { - /** - * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will - * take precedence so this may be omitted. - */ - @Input('aria-label') ariaLabel: string = ''; - - /** - * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element - */ - @Input('aria-labelledby') ariaLabelledby: string = null; - @HostBinding('class.md-radio-focused') private _isFocused: boolean; diff --git a/src/demo-app/radio/radio-demo.html b/src/demo-app/radio/radio-demo.html index a4a64dff2ac2..802d0070a149 100644 --- a/src/demo-app/radio/radio-demo.html +++ b/src/demo-app/radio/radio-demo.html @@ -1,8 +1,8 @@

Basic Example

- Option 1 - Option 2 - Option 3 (disabled) + Option 1 + Option 2 + Option 3 (disabled)

Dynamic Example

From 5fb1c7c237c1cca4add2365bb038599d5fd57052 Mon Sep 17 00:00:00 2001 From: SendilKumar N Date: Thu, 2 Jun 2016 16:42:00 +0800 Subject: [PATCH 4/4] updates based on comment --- src/components/checkbox/checkbox.scss | 2 +- src/core/style/_variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss index e9377a580da2..6c825a685cf4 100644 --- a/src/components/checkbox/checkbox.scss +++ b/src/components/checkbox/checkbox.scss @@ -360,7 +360,7 @@ md-checkbox { .md-checkbox-unchecked { .md-checkbox-background { - background-color: none; + background-color: transparent; } } diff --git a/src/core/style/_variables.scss b/src/core/style/_variables.scss index 5c08c02909e2..417a6cd0a0cf 100644 --- a/src/core/style/_variables.scss +++ b/src/core/style/_variables.scss @@ -24,7 +24,7 @@ $md-toggle-size: 20px !default; // TODO(jelbourn): all of these need to be revisited // The default animation curves used by material design. -$md-linear-out-slow-in-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1) !default; +$md-linear-out-slow-in-timing-function: cubic-bezier(0.0, 0.0, 0.2, 0.1) !default; $md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !default; $md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0.0, 1, 1) !default;