fix(components/lists): use 'grid' role for selectable repeaters (#751)

Author: Blackbaud-SteveBrush

libs/components/lists/src/lib/modules/repeater/repeater-item.component.html

@@ -2,7 +2,8 @@
   class="sky-repeater-item sky-padding-even-default"
   [attr.aria-label]="itemName"
   [attr.aria-selected]="selectable ? !!isSelected : undefined"
-  [attr.role]="showInlineForm ? 'form' : (itemRole$ | async)?.item"
+  [attr.role]="(itemRole$ | async)?.item"
+  [attr.tabIndex]="tabindex"
   [ngClass]="{
     'sky-repeater-item-active': isActive,
     'sky-repeater-item-collapsible': isCollapsible,
@@ -34,7 +35,10 @@
 </div>
 
 <ng-template #skyRepeaterItemLeft>
-  <div class="sky-repeater-item-left">
+  <div
+    [attr.role]="!showInlineForm ? (itemRole$ | async)?.content : undefined"
+    class="sky-repeater-item-left"
+  >
     <ng-container *ngIf="reorderable">
       <span
         aria-live="assertive"
@@ -90,14 +94,11 @@
   <div class="sky-repeater-item-right" #itemHeaderRef>
     <div
       class="sky-repeater-item-header"
+      [attr.role]="(itemRole$ | async)?.title"
       [hidden]="titleRef.children.length === 0"
       (click)="headerClick()"
     >
-      <div
-        class="sky-repeater-item-title sky-emphasized"
-        #titleRef
-        [attr.role]="(itemRole$ | async)?.title"
-      >
+      <div class="sky-repeater-item-title sky-emphasized" #titleRef>
         <ng-content select="sky-repeater-item-title"></ng-content>
       </div>
       <button

libs/components/lists/src/lib/modules/repeater/repeater-item.component.ts

@@ -54,7 +54,6 @@ export class SkyRepeaterItemComponent
    * - Disabled items should not be focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls).
    * - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).
    */
-  @HostBinding()
   public get tabindex(): 0 | -1 {
     return this.#repeaterService.items.filter((item) => !item.disabled)[0] ===
       this
@@ -420,7 +419,7 @@ export class SkyRepeaterItemComponent
             ':focus-within'
           )
         ) {
-          activateItem.#elementRef.nativeElement.focus();
+          activateItem.itemRef?.nativeElement.focus();
         }
       }
     }

libs/components/lists/src/lib/modules/repeater/repeater.component.spec.ts

@@ -820,6 +820,15 @@ describe('Repeater item component', () => {
       fixture.detectChanges();
       await fixture.whenStable();
       await expectAsync(fixture.nativeElement).toBeAccessible();
+
+      // Confirm elements are using appropriate roles.
+      const repeaterEl = fixture.nativeElement.querySelector('.sky-repeater');
+      expect(repeaterEl.getAttribute('role')).toEqual('grid');
+      expect(
+        repeaterEl
+          .querySelector('sky-repeater-item:first-child > .sky-repeater-item')
+          .getAttribute('role')
+      ).toEqual('row');
     });
 
     it('should update the isSelected property when the user clicks the checkbox', fakeAsync(() => {
@@ -1639,7 +1648,7 @@ describe('Repeater item component', () => {
       cmp.showItemWithNoContent = true;
       detectChangesAndTick(fixture);
       const items: Element[] = Array.from(
-        el.querySelectorAll('sky-repeater-item')
+        el.querySelectorAll('.sky-repeater-item')
       );
       expect(items.length).toEqual(4);
       const sequence = [
@@ -1733,7 +1742,7 @@ describe('Repeater item component', () => {
         el.querySelector('.sky-repeater-item').getAttribute('role')
       ).toEqual('row');
       expect(
-        el.querySelector('.sky-repeater-item-title').getAttribute('role')
+        el.querySelector('.sky-repeater-item-header').getAttribute('role')
       ).toEqual('rowheader');
       expect(
         el.querySelector('.sky-repeater-item-content').getAttribute('role')

libs/components/lists/src/lib/modules/repeater/repeater.component.ts

@@ -401,16 +401,14 @@ export class SkyRepeaterComponent
     const hasInteraction =
       this.reorderable ||
       this.items?.some((item) => item.isCollapsible) ||
+      this.items?.some((item) => !!item.selectable) ||
       !!(this.#elementRef.nativeElement as HTMLElement).querySelector(
         interactionSelector
       );
 
     if (hasInteraction) {
       // If the repeater matches interaction selector https://www.w3.org/TR/wai-aria-practices-1.1/#grid
       autoRole = 'grid';
-    } else if (this.items?.some((item) => !!item.selectable)) {
-      // If the only interaction is select https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox
-      autoRole = 'listbox';
     }
 
     if (this.role !== autoRole) {