test(aria/listbox): generate additional tests for Listbox directives, harness, and patterns

Author: adolgachev

goldens/aria/listbox/testing/index.api.md

@@ -13,6 +13,7 @@ export class ListboxHarness extends ComponentHarness {
     blur(): Promise<void>;
     // (undocumented)
     focus(): Promise<void>;
+    getActiveDescendantId(): Promise<string | null>;
     // (undocumented)
     getOptions(filters?: ListboxOptionHarnessFilters): Promise<ListboxOptionHarness[]>;
     // (undocumented)

src/aria/listbox/listbox.spec.ts

@@ -434,21 +434,62 @@ describe('Listbox', () => {
           ],
         });
 
-        let orderedItems = listboxInstance._collection.orderedItems();
-        expect(orderedItems.length).toBe(3);
-        expect(orderedItems[0].element.textContent?.trim()).toBe('Item 1');
-        expect(orderedItems[2].element.textContent?.trim()).toBe('Item 3');
+        // Verify initial DOM order
+        expect(optionElements.length).toBe(3);
+        expect(optionElements[0].textContent?.trim()).toBe('Item 1');
+        expect(optionElements[2].textContent?.trim()).toBe('Item 3');
 
         const testComponent = fixture.componentInstance as ListboxExample;
         const items = testComponent.options().reverse();
         testComponent.options.set([...items]);
         fixture.detectChanges();
         await waitForMicrotasks();
 
-        orderedItems = listboxInstance._collection.orderedItems();
-        expect(orderedItems.length).toBe(3);
-        expect(orderedItems[0].element.textContent?.trim()).toBe('Item 3');
-        expect(orderedItems[2].element.textContent?.trim()).toBe('Item 1');
+        // Re-query elements to check new DOM order
+        defineTestVariables(fixture);
+
+        expect(optionElements.length).toBe(3);
+        expect(optionElements[0].textContent?.trim()).toBe('Item 3');
+        expect(optionElements[2].textContent?.trim()).toBe('Item 1');
+      });
+    });
+
+    describe('Custom IDs', () => {
+      let customIdFixture: ComponentFixture<ListboxCustomIdExample>;
+
+      beforeEach(() => {
+        TestBed.resetTestingModule();
+        TestBed.configureTestingModule({
+          imports: [ListboxCustomIdExample],
+        });
+        customIdFixture = TestBed.createComponent(ListboxCustomIdExample);
+        document.body.appendChild(customIdFixture.nativeElement);
+        fixture = customIdFixture as any;
+        customIdFixture.detectChanges();
+      });
+
+      afterEach(() => {
+        customIdFixture.nativeElement.remove();
+      });
+
+      it('should use custom ID for option when provided', async () => {
+        const optionEl = customIdFixture.nativeElement.querySelector('#custom-option-id');
+        expect(optionEl).toBeTruthy();
+      });
+
+      it('should generate ID if not provided', async () => {
+        const options = customIdFixture.debugElement
+          .queryAll(By.directive(Option))
+          .map((debugEl: DebugElement) => debugEl.nativeElement as HTMLElement);
+
+        expect(options[1].id).toContain('ng-option-');
+      });
+    });
+
+    describe('Inert attribute', () => {
+      it('should set inert attribute on hard-disabled options', () => {
+        setupListbox({disabledOptions: [0], softDisabled: false});
+        expect(optionElements[0].hasAttribute('inert')).toBe(true);
       });
     });
 
@@ -875,3 +916,15 @@ class ListboxExample {
   changeDetection: ChangeDetectionStrategy.Eager,
 })
 class DefaultListboxExample {}
+
+@Component({
+  template: `
+    <ul ngListbox>
+      <li ngOption value="1" id="custom-option-id">Item 1</li>
+      <li ngOption value="2">Item 2</li>
+    </ul>
+  `,
+  imports: [Listbox, Option],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class ListboxCustomIdExample {}

src/aria/listbox/testing/listbox-harness.spec.ts

@@ -83,6 +83,22 @@ describe('Listbox Harness', () => {
     expect(orientation).toBe('horizontal');
   });
 
+  it('gets the active descendant ID', async () => {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      imports: [ListboxActiveDescendantTestComponent],
+    });
+    const customFixture = TestBed.createComponent(ListboxActiveDescendantTestComponent);
+    customFixture.detectChanges();
+    const customLoader = TestbedHarnessEnvironment.loader(customFixture);
+
+    const listbox = await customLoader.getHarness(ListboxHarness);
+    const options = await listbox.getOptions();
+
+    await options[0].click();
+    expect(await listbox.getActiveDescendantId()).toBe('apple-id');
+  });
+
   it('clicks an option inside the listbox', async () => {
     const option = await loader.getHarness(ListboxOptionHarness.with({text: 'Apple'}));
 
@@ -91,3 +107,14 @@ describe('Listbox Harness', () => {
     expect(await option.isSelected()).toBeTrue();
   });
 });
+
+@Component({
+  imports: [Listbox, Option],
+  template: `
+    <ul ngListbox focusMode="activedescendant">
+      <li ngOption [value]="1" id="apple-id">Apple</li>
+      <li ngOption [value]="2" id="banana-id">Banana</li>
+    </ul>
+  `,
+})
+class ListboxActiveDescendantTestComponent {}

src/aria/listbox/testing/listbox-harness.ts

@@ -92,4 +92,10 @@ export class ListboxHarness extends ComponentHarness {
   async blur(): Promise<void> {
     await (await this.host()).blur();
   }
+
+  /** Gets the ID of the active option. */
+  async getActiveDescendantId(): Promise<string | null> {
+    const host = await this.host();
+    return host.getAttribute('aria-activedescendant');
+  }
 }

src/aria/private/listbox/listbox.spec.ts

@@ -90,6 +90,26 @@ describe('Listbox Pattern', () => {
     );
   }
 
+  describe('Tabindex', () => {
+    it('should expose tabIndex signals on listbox and options', () => {
+      const {listbox, options} = getDefaultPatterns();
+
+      expect(listbox.tabIndex()).toBe(-1);
+      expect(options[0].tabIndex()).toBe(0);
+      expect(options[1].tabIndex()).toBe(-1);
+
+      listbox.onKeydown(down());
+
+      expect(options[0].tabIndex()).toBe(-1);
+      expect(options[1].tabIndex()).toBe(0);
+    });
+
+    it('should set tabindex 0 for listbox in activedescendant mode', () => {
+      const {listbox} = getDefaultPatterns({focusMode: signal('activedescendant')});
+      expect(listbox.tabIndex()).toBe(0);
+    });
+  });
+
   describe('Keyboard Navigation', () => {
     it('should navigate next on ArrowDown', () => {
       const {listbox} = getDefaultPatterns();