feat(core): let the internals controller handle aria-posinset and aria-setsize

Author: adamjohnson

core/pfe-core/controllers/combobox-controller.ts

@@ -536,26 +536,32 @@ export class ComboboxController<
     return strings?.[lang] ?? key;
   }
 
-  // TODO(bennypowers): perhaps move this to ActivedescendantController
-  #announce(item: Item) {
+  /**
+   * Announces the focused item to a live region (e.g. for Safari VoiceOver).
+   * @param item - The listbox option item to announce.
+   * TODO(bennypowers): perhaps move this to ActivedescendantController
+ */
+  #announce(item: Item): void {
     const value = this.options.getItemValue(item);
     ComboboxController.#alert?.remove();
     const fragment = ComboboxController.#alertTemplate.content.cloneNode(true) as DocumentFragment;
     ComboboxController.#alert = fragment.firstElementChild as HTMLElement;
     let text = value;
     const lang = deepClosest(this.#listbox, '[lang]')?.getAttribute('lang') ?? 'en';
-    const langKey = lang?.match(ComboboxController.langsRE)?.at(0) as Lang ?? 'en';
+    const langKey = (lang?.match(ComboboxController.langsRE)?.at(0) as Lang) ?? 'en';
     if (this.options.isItemDisabled(item)) {
       text += ` (${this.#translate('dimmed', langKey)})`;
     }
     if (this.#lb.isSelected(item)) {
       text += `, (${this.#translate('selected', langKey)})`;
     }
-    if (item.hasAttribute('aria-setsize') && item.hasAttribute('aria-posinset')) {
+    const posInSet = InternalsController.getAriaPosInSet(item);
+    const setSize = InternalsController.getAriaSetSize(item);
+    if (posInSet != null && setSize != null) {
       if (langKey === 'ja') {
-        text += `, (${item.getAttribute('aria-setsize')} 件中 ${item.getAttribute('aria-posinset')} 件目)`;
+        text += `, (${setSize} 件中 ${posInSet} 件目)`;
       } else {
-        text += `, (${item.getAttribute('aria-posinset')} ${this.#translate('of', langKey)} ${item.getAttribute('aria-setsize')})`;
+        text += `, (${posInSet} ${this.#translate('of', langKey)} ${setSize})`;
       }
     }
     ComboboxController.#alert.lang = lang;

core/pfe-core/controllers/internals-controller.ts

@@ -83,6 +83,63 @@ export class InternalsController implements ReactiveController, ARIAMixin {
     return Array.from(this.instances.get(host)?.internals.labels ?? []) as Element[];
   }
 
+  /**
+   * Sets aria-posinset on a listbox item. Uses ElementInternals when the host has
+   * an InternalsController instance; otherwise sets/removes the host attribute.
+   * @param host - The listbox item element (option or option-like).
+   * @param value - Position in set (1-based), or null to clear.
+   */
+  public static setAriaPosInSet(host: Element, value: number | string | null): void {
+    const instance = this.instances.get(host as unknown as ReactiveControllerHost);
+    if (instance) {
+      instance.ariaPosInSet = value != null ? String(value) : null;
+    } else if (value != null) {
+      host.setAttribute('aria-posinset', String(value));
+    } else {
+      host.removeAttribute('aria-posinset');
+    }
+  }
+
+  /**
+   * Sets aria-setsize on a listbox item. Uses ElementInternals when the host has
+   * an InternalsController instance; otherwise sets/removes the host attribute.
+   * @param host - The listbox item element (option or option-like).
+   * @param value - Total set size, or null to clear.
+   */
+  public static setAriaSetSize(host: Element, value: number | string | null): void {
+    const instance = this.instances.get(host as unknown as ReactiveControllerHost);
+    if (instance) {
+      instance.ariaSetSize = value != null ? String(value) : null;
+    } else if (value != null) {
+      host.setAttribute('aria-setsize', String(value));
+    } else {
+      host.removeAttribute('aria-setsize');
+    }
+  }
+
+  /**
+   * Gets aria-posinset from a listbox item (internals or attribute).
+   * @param host - The listbox item element.
+   */
+  public static getAriaPosInSet(host: Element): string | null {
+    const instance = this.instances.get(host as unknown as ReactiveControllerHost);
+    return instance != null ?
+      instance.ariaPosInSet
+      : host.getAttribute('aria-posinset');
+  }
+
+  /**
+   * Gets aria-setsize from a listbox item (internals or attribute).
+   * @param host - The listbox item element.
+   */
+  public static getAriaSetSize(host: Element): string | null {
+    const instance = this.instances.get(host as unknown as ReactiveControllerHost);
+    return instance != null ?
+      instance.ariaSetSize
+      : host.getAttribute('aria-setsize');
+  }
+
+
   public static isSafari: boolean =
     !isServer && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 

core/pfe-core/controllers/listbox-controller.ts

@@ -3,6 +3,7 @@ import type { RequireProps } from '../core.ts';
 
 import { isServer } from 'lit';
 import { arraysAreEquivalent } from '../functions/arraysAreEquivalent.js';
+import { InternalsController } from './internals-controller.js';
 
 /**
  * Options for listbox controller
@@ -192,16 +193,11 @@ export class ListboxController<Item extends HTMLElement> implements ReactiveCont
   }
 
   /**
-   * register's the host's Item elements as listbox controller items
-   * sets aria-setsize and aria-posinset on items
-   * @param items items
+   * Registers the host's item elements as listbox controller items.
+   * @param items - Array of listbox option elements.
    */
   set items(items: Item[]) {
     this.#items = items;
-    this.#items.forEach((item, index, _items) => {
-      item.ariaSetSize = _items.length.toString();
-      item.ariaPosInSet = (index + 1).toString();
-    });
   }
 
   /**
@@ -268,6 +264,10 @@ export class ListboxController<Item extends HTMLElement> implements ReactiveCont
     }
   }
 
+  /**
+   * Called during host update; syncs control element listeners and
+   * applies aria-posinset/aria-setsize to each item via InternalsController.
+   */
   hostUpdate(): void {
     const last = this.#controlsElements;
     this.#controlsElements = this.#options.getControlsElements?.() ?? [];
@@ -278,6 +278,11 @@ export class ListboxController<Item extends HTMLElement> implements ReactiveCont
         el.addEventListener('keyup', this.#onKeyup);
       }
     }
+    const items = this.#items;
+    items.forEach((item, index) => {
+      InternalsController.setAriaPosInSet(item, index + 1);
+      InternalsController.setAriaSetSize(item, items.length);
+    });
   }
 
   hostUpdated(): void {