Fix repeater missing aria attributes

src/modules/colorpicker/colorpicker-input.directive.ts

@@ -112,6 +112,7 @@ export class SkyColorpickerInputDirective
     this.writeModelValue(this.modelValue);
   }
 
+  /* istanbul ignore next */
   @HostListener('blur')
   public onBlur(event: any) {
     /*istanbul ignore next */

src/modules/repeater/repeater-item.component.html

@@ -1,4 +1,4 @@
-<section
+<div
   class="sky-repeater-item sky-padding-even-default"
   [ngClass]="{
     'sky-repeater-item-collapsible': isCollapsible,
@@ -29,19 +29,24 @@
         [hidden]="titleEl.children.length === 0"
         (click)="headerClick()"
     >
-      <h1 class="sky-repeater-item-title sky-emphasized" #titleEl>
+      <div class="sky-repeater-item-title sky-emphasized" #titleEl>
         <ng-content select="sky-repeater-item-title"></ng-content>
-      </h1>
+      </div>
       <div class="sky-repeater-item-chevron" [hidden]="!isCollapsible">
         <sky-chevron
+            [attr.aria-controls]="contentId"
+            [attr.aria-expanded]="isExpanded"
             [direction]="isExpanded ? 'up' : 'down'"
             (directionChange)="chevronDirectionChange($event)"
         >
         </sky-chevron>
       </div>
     </header>
-    <div class="sky-repeater-item-content" [@skyAnimationSlide]="slideDirection">
+    <div
+      class="sky-repeater-item-content"
+      [id]="contentId"
+      [@skyAnimationSlide]="slideDirection">
       <ng-content select="sky-repeater-item-content"></ng-content>
     </div>
   </div>
-</section>
+</div>

src/modules/repeater/repeater-item.component.scss

@@ -39,6 +39,8 @@
 .sky-repeater-item-title {
   margin: 0;
   flex-grow: 1;
+  line-height: 1.1;
+  color: $sky-text-color-default;
 }
 
 ::ng-deep sky-repeater-item-content {

src/modules/repeater/repeater-item.component.ts

@@ -20,13 +20,16 @@ import {
   SkyRepeaterService
 } from './repeater.service';
 
+let nextId: number = 0;
+
 @Component({
   selector: 'sky-repeater-item',
   styleUrls: ['./repeater-item.component.scss'],
   templateUrl: './repeater-item.component.html',
   animations: [skyAnimationSlide]
 })
 export class SkyRepeaterItemComponent {
+  public contentId: string = `sky-radio-content-${++nextId}`;
 
   public get isExpanded(): boolean {
     return this._isExpanded;

src/modules/repeater/repeater.component.spec.ts

@@ -41,6 +41,17 @@ describe('Repeater item component', () => {
     })
   );
 
+  it('should have aria-control set pointed at content', fakeAsync(() => {
+    let fixture = TestBed.createComponent(RepeaterTestComponent);
+    let el = fixture.nativeElement;
+
+    fixture.detectChanges();
+    tick();
+
+    expect(el.querySelector('sky-chevron').getAttribute('aria-controls'))
+      .toBe(el.querySelector('.sky-repeater-item-content').getAttribute('id'));
+  }));
+
   describe('with expand mode of "single"', () => {
     it('should collapse other items when an item is expanded', fakeAsync(() => {
       let fixture = TestBed.createComponent(RepeaterTestComponent);
@@ -106,24 +117,20 @@ describe('Repeater item component', () => {
       let el = fixture.nativeElement;
 
       cmp.expandMode = 'single';
-
       fixture.detectChanges();
-
       tick();
 
       let repeaterItems = cmp.repeater.items.toArray();
-
       expect(repeaterItems[0].isExpanded).toBe(true);
+      expect(el.querySelector('sky-chevron').getAttribute('aria-expanded')).toBe('true');
 
       el.querySelectorAll('.sky-repeater-item-title').item(0).click();
-
       fixture.detectChanges();
-
       tick();
 
       repeaterItems = cmp.repeater.items.toArray();
-
       expect(repeaterItems[0].isExpanded).toBe(false);
+      expect(el.querySelector('sky-chevron').getAttribute('aria-expanded')).toBe('false');
     }));
 
     it('should toggle its collapsed state when an item\'s chevron is clicked', fakeAsync(() => {