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

Author: adolgachev

goldens/aria/listbox/index.api.md

@@ -46,6 +46,7 @@ class Option_2<V> implements OnInit, OnDestroy {
     readonly active: _angular_core.Signal<boolean>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
+    readonly hardDisabled: _angular_core.Signal<boolean>;
     readonly id: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string | undefined>;
     // (undocumented)

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,30 @@ 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('Inert attribute', () => {
+      it('should set inert attribute on hard-disabled options', () => {
+        setupListbox({disabledOptions: [0], softDisabled: false});
+        expect(optionElements[0].hasAttribute('inert')).toBe(true);
       });
     });
 

src/aria/listbox/option.ts

@@ -50,6 +50,7 @@ import {LISTBOX} from './tokens';
     '[attr.tabindex]': '_pattern.tabIndex()',
     '[attr.aria-selected]': '_pattern.selected()',
     '[attr.aria-disabled]': '_pattern.disabled()',
+    '[attr.inert]': 'hardDisabled() ? true : null',
   },
 })
 export class Option<V> implements OnInit, OnDestroy {
@@ -74,6 +75,9 @@ export class Option<V> implements OnInit, OnDestroy {
   /** Whether an item is disabled. */
   readonly disabled = input(false, {transform: booleanAttribute});
 
+  /** Whether the option is 'hard' disabled, which is different from `aria-disabled`. A hard disabled option cannot receive focus. */
+  readonly hardDisabled = computed(() => this._pattern.disabled() && !this._listbox.softDisabled());
+
   /** The text used by the typeahead search. */
   readonly label = input<string>();
 

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();