added labels and ids to section form tabs

src/modules/sectioned-form/sectioned-form-section.component.html

@@ -1,14 +1,22 @@
-<sky-vertical-tab 
+<sky-vertical-tab
+  role="tab"
+  [active]="active"
+  [attr.aria-selected]="active"
+  [attr.aria-controls]="sectionContentId"
+  [id]="sectionTabId"
   [ngClass]="{
     'sky-tab-field-required': fieldRequired,
     'sky-tab-field-invalid': fieldInvalid
   }"
-  [tabHeading]="heading" 
-  [tabHeaderCount]="itemCount" 
-  [active]="active"
   [showTabRightArrow]="true"
+  [tabHeading]="heading"
+  [tabHeaderCount]="itemCount"
 >
-  <div #tabContent>
+  <div
+    role="tabpanel"
+    [attr.aria-labelledby]="sectionTabId"
+    [id]="sectionContentId"
+    #tabContent>
     <ng-content></ng-content>
   </div>
-</sky-vertical-tab>
+</sky-vertical-tab>

src/modules/sectioned-form/sectioned-form-section.component.ts

@@ -12,13 +12,17 @@ import 'rxjs/add/operator/takeUntil';
 import { SkyVerticalTabComponent } from './../vertical-tabset/vertical-tab.component';
 import { SkySectionedFormService } from './sectioned-form.service';
 
+let nextId = 0;
+
 @Component({
   selector: 'sky-sectioned-form-section',
   templateUrl: './sectioned-form-section.component.html',
   providers: [SkySectionedFormService],
   styleUrls: ['./sectioned-form-section.component.scss']
 })
 export class SkySectionedFormSectionComponent implements OnInit, OnDestroy {
+  public sectionTabId = `sky-sectioned-form-tab-${++nextId}`;
+  public sectionContentId = `sky-sectioned-form-section-${++nextId}`;
 
   @Input()
   public heading: string;

src/modules/sectioned-form/sectioned-form.component.html

@@ -1,13 +1,17 @@
-<div class="sky-sectioned-form" (window:resize)="tabService.updateContent()">
-  <div 
+<div
+  aria-orientation="vertical"
+  class="sky-sectioned-form"
+  role="tablist"
+  (window:resize)="tabService.updateContent()">
+  <div
     *ngIf="tabsVisible()"
     class="sky-sectioned-form-tabs"
     [@tabEnter]="tabService.animationVisibleState"
   >
     <ng-content></ng-content>
   </div>
-  <div 
-    #skySectionSideContent 
+  <div
+    #skySectionSideContent
     *ngIf="tabService.contentVisible()"
     class="sky-sectioned-form-content"
     [@contentEnter]="tabService.animationVisibleState"

src/modules/sectioned-form/sectioned-form.component.spec.ts

@@ -235,6 +235,29 @@ describe('Sectioned form component', () => {
     expect(invalidTab.classList.contains('sky-tab-field-invalid')).toBe(true);
   });
 
+  it('section should have appropriate aria labels', () => {
+    let fixture = createTestComponent();
+    let el = fixture.nativeElement;
+
+    fixture.detectChanges();
+
+    // check section is not invalid
+    let tabs = el.querySelectorAll('sky-vertical-tab');
+    expect(tabs.length).toBe(2);
+
+    let inactiveTab = tabs[0];
+    let inactiveTabContent = el.querySelector('#' + inactiveTab.getAttribute('aria-controls'));
+    expect(inactiveTab.getAttribute('aria-selected')).toBeFalsy();
+    expect(inactiveTab.getAttribute('aria-controls')).toBe(inactiveTabContent.id);
+    expect(inactiveTabContent.getAttribute('aria-labelledby')).toBe(inactiveTab.id);
+
+    let activeTab = tabs[1];
+    let activeTabContent = el.querySelector('#' + activeTab.getAttribute('aria-controls'));
+    expect(activeTab.getAttribute('aria-selected')).toBe('true');
+    expect(activeTab.getAttribute('aria-controls')).toBe(activeTabContent.id);
+    expect(activeTabContent.getAttribute('aria-labelledby')).toBe(activeTab.id);
+  });
+
   it('should show content after resizing screen', () => {
     mockQueryService.current = SkyMediaBreakpoints.xs;
     let fixture = createTestComponent();