@@ -17,6 +17,7 @@
[checked]="checked"
[disabled]="disabled"
[name]="name"
+ [tabIndex]="tabindex"
[attr.aria-label]="ariaLabel"
[attr.aria-labelledby]="ariaLabelledby"
(change)="_onInputChange($event)"
diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts
index 6fa1eb6642fe..94d3ae51274f 100644
--- a/src/lib/radio/radio.spec.ts
+++ b/src/lib/radio/radio.spec.ts
@@ -152,7 +152,7 @@ describe('MdRadio', () => {
expect(spies[1]).toHaveBeenCalledTimes(1);
});
- it(`should not emit a change event from the radio group when change group value
+ it(`should not emit a change event from the radio group when change group value
programmatically`, () => {
expect(groupInstance.value).toBeFalsy();
@@ -235,7 +235,7 @@ describe('MdRadio', () => {
}
}));
- it(`should update the group's selected radio to null when unchecking that radio
+ it(`should update the group's selected radio to null when unchecking that radio
programmatically`, () => {
let changeSpy = jasmine.createSpy('radio-group change listener');
groupInstance.change.subscribe(changeSpy);
@@ -485,6 +485,28 @@ describe('MdRadio', () => {
expect(fruitRadioNativeInputs[0].getAttribute('aria-labelledby')).toBe('uvw');
});
+
+ it('should make the native input element a tab stop', () => {
+ expect(fruitRadioNativeInputs[0].tabIndex).toBe(0);
+ });
+
+ it('should add a ripple when the native input element is focused', () => {
+ let hostElement = seasonRadioInstances[0].getHostElement() as HTMLElement;
+ let input = hostElement.querySelector('input') as HTMLInputElement;
+ let label = hostElement.querySelector('label') as HTMLLabelElement;
+
+ expect(label.classList).not.toContain('md-ripple-focused');
+
+ dispatchEvent('focus', input);
+ fixture.detectChanges();
+
+ expect(label.classList).toContain('md-ripple-focused');
+
+ dispatchEvent('blur', input);
+ fixture.detectChanges();
+
+ expect(label.classList).not.toContain('md-ripple-focused');
+ });
});
});
@@ -514,11 +536,11 @@ class RadiosInsideRadioGroup {
Spring
Summer
Autumn
-
+
Spring
Summer
Autumn
-
+
Baby Banana
diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts
index ff922ca58468..2c17d0148107 100644
--- a/src/lib/radio/radio.ts
+++ b/src/lib/radio/radio.ts
@@ -239,6 +239,9 @@ export class MdRadioButton implements OnInit {
@HostBinding('class.md-radio-focused')
_isFocused: boolean;
+ /** Tabindex for the input element. */
+ @Input() tabindex: number = 0;
+
/** Whether this radio is checked. */
private _checked: boolean = false;