readio

angular · Jun 2, 2016 · db62acf · db62acf
1 parent 9e85799
commit db62acf
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 5 deletions.
diff --git 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"/>
 
   <!-- The label content for radio control. -->
   <div class="md-radio-label-content">

diff --git 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<any>;
+    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 = <HTMLInputElement>radioButtonNativeElement.querySelector('input');
+
+        fixture.detectChanges();
+        expect(inputElement.getAttribute('aria-label')).toBe('superRadio');
+      });
+    }));
+  });
+
+  describe('with provided aria-labelledby ', () => {
+    let fixture: ComponentFixture<any>;
+    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 = <HTMLInputElement>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 = <HTMLInputElement>radioButtonNativeElement.querySelector('input');
+
+        fixture.detectChanges();
+        expect(inputElement.getAttribute('aria-labelledby')).toBe(null);
+      });
+    }));
+  });
+
   describe('group with ngModel', () => {
     let fixture: ComponentFixture<RadioGroupWithNgModel>;
     let groupDebugElement: DebugElement;
@@ -448,6 +498,27 @@ class RadioGroupWithNgModel {
   lastEvent: MdRadioChange;
 }
 
+/** Simple test component with an aria-label set. */
+@Component({
+  directives: [MdRadioButton],
+  template: `<md-radio-button name="season" value="spring" aria-label="superRadio">Spring</md-radio-button>`
+})
+class RadioButtonWithAriaLabel { }
+
+/** Simple test component with an aria-label set. */
+@Component({
+  directives: [MdRadioButton],
+  template: `<md-radio-button name="season" value="spring" aria-labelledby="superByRadio">Spring</md-radio-button>`
+})
+class RadioButtonWithAriaLabelledby {}
+
+/** Simple test component with an aria-label set. */
+@Component({
+  directives: [MdRadioButton],
+  template: `<md-radio-button name="season" value="spring" >Spring</md-radio-button>`
+})
+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
@@ -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
@@ -1,8 +1,8 @@
 <h1>Basic Example</h1>
 <section class="demo-section">
-  <md-radio-button name="group1">Option 1</md-radio-button>
-  <md-radio-button name="group1">Option 2</md-radio-button>
-  <md-radio-button name="group1" disabled="true">Option 3 (disabled)</md-radio-button>
+  <md-radio-button name="group1" aria-label="option1">Option 1</md-radio-button>
+  <md-radio-button name="group1" aria-label="option2">Option 2</md-radio-button>
+  <md-radio-button name="group1" disabled="true" aria-labelledby="option3">Option 3 (disabled)</md-radio-button>
 </section>
 <h1>Dynamic Example</h1>
 <section class="demo-section">