fix(buttons): add role="group" to radio group

Closes #1503
ng-bootstrap · Apr 19, 2017 · c847a92 · c847a92
1 parent 47bbb46
commit c847a92
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/buttons/radio.spec.ts b/src/buttons/radio.spec.ts
@@ -577,6 +577,15 @@ describe('ngbRadioGroup', () => {
 
     expect(() => { fixture.debugElement.query(By.css('Input')).triggerEventHandler('focus', {}); }).not.toThrow();
   });
+
+  describe('accessibility', () => {
+    it('should have "group" role', () => {
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+
+      expect(getGroupElement(fixture.nativeElement).getAttribute('role')).toBe('group');
+    });
+  });
 });
 
 @Component({selector: 'test-cmp', template: ''})

diff --git a/src/buttons/radio.ts b/src/buttons/radio.ts
@@ -13,7 +13,7 @@ const NGB_RADIO_VALUE_ACCESSOR = {
  */
 @Directive({
   selector: '[ngbRadioGroup]',
-  host: {'data-toggle': 'buttons', 'class': 'btn-group'},
+  host: {'data-toggle': 'buttons', 'class': 'btn-group', 'role': 'group'},
   providers: [NGB_RADIO_VALUE_ACCESSOR]
 })
 export class NgbRadioGroup implements ControlValueAccessor {