@patternfly/pfe-core 3.0.0 → 4.0.1

package/controllers/activedescendant-controller.d.ts

@@ -0,0 +1,99 @@
+import type { ReactiveControllerHost } from 'lit';
+import { type ATFocusControllerOptions, ATFocusController } from './at-focus-controller.js';
+import { nothing } from 'lit';
+export interface ActivedescendantControllerOptions<Item extends HTMLElement> extends ATFocusControllerOptions<Item> {
+    /**
+     * Returns a reference to the element which acts as the assistive technology container for
+     * the items. In the case of a combobox, this is the input element.
+     */
+    getActiveDescendantContainer(): HTMLElement | null;
+    /**
+     * Optional callback to control the assistive technology focus behavior of items.
+     * By default, ActivedescendantController will not do anything special to items when they receive
+     * assistive technology focus, and will only set the `activedescendant` property on the container.
+     * If you provide this callback, ActivedescendantController will call it on your item with the
+     * active state. You may use this to set active styles.
+     */
+    setItemActive?(item: Item, active: boolean): void;
+    /**
+     * Optional callback to retrieve the value from an option element.
+     * By default, retrieves the `value` attribute, or the text content.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement
+     */
+    getItemValue?(item: Item): string;
+}
+/**
+ * Implements activedescendant pattern, as described in WAI-ARIA practices,
+ * [Managing Focus in Composites Using aria-activedescendant][ad]
+ *
+ * The steps for using the aria-activedescendant method of managing focus are as follows.
+ *
+ *  - When the container element that has a role that supports aria-activedescendant is loaded
+ *    or created, ensure that:
+ *    - The container element is included in the tab sequence as described in
+ *      Keyboard Navigation Between Components or is a focusable element of a composite
+ *      that implements a roving tabindex.
+ *    - It has aria-activedescendant="IDREF" where IDREF is the ID of the element within
+ *      the container that should be identified as active when the widget receives focus.
+ *      The referenced element needs to meet the DOM relationship requirements described below.
+ *  - When the container element receives DOM focus, draw a visual focus indicator on the active
+ *    element and ensure the active element is scrolled into view.
+ *  - When the composite widget contains focus and the user presses a navigation key that moves
+ *    focus within the widget, such as an arrow key:
+ *    - Change the value of aria-activedescendant on the container to refer to the element
+ *      that should be reported to assistive technologies as active.
+ *    - Move the visual focus indicator and, if necessary, scrolled the active element into view.
+ *  - If the design calls for a specific element to be focused the next time a user moves focus
+ *    into the composite with Tab or Shift+Tab, check if aria-activedescendant is referring to
+ *    that target element when the container loses focus. If it is not, set aria-activedescendant
+ *    to refer to the target element.
+ *
+ * The specification for aria-activedescendant places important restrictions on the
+ * DOM relationship between the focused element that has the aria-activedescendant attribute
+ * and the element referenced as active by the value of the attribute.
+ * One of the following three conditions must be met.
+ *
+ * 1. The element referenced as active is a DOM descendant of the focused referencing element.
+ * 2. The focused referencing element has a value specified for the aria-owns property that
+ *    includes the ID of the element referenced as active.
+ * 3. The focused referencing element has role of combobox, textbox, or searchbox
+ *    and has aria-controls property referring to an element with a role that supports
+ *    aria-activedescendant and either:
+ *   1. The element referenced as active is a descendant of the controlled element.
+ *   2. The controlled element has a value specified for the aria-owns property that includes
+ *      the ID of the element referenced as active.
+ *
+ * [ad]: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant
+ */
+export declare class ActivedescendantController<Item extends HTMLElement = HTMLElement> extends ATFocusController<Item> {
+    #private;
+    host: ReactiveControllerHost;
+    protected options: ActivedescendantControllerOptions<Item>;
+    /**
+     * When true, the browser supports cross-root ARIA such that the controller does not need
+     * to copy item nodes into the controlling nodes' root
+     */
+    static get supportsCrossRootActiveDescendant(): boolean;
+    static of<Item extends HTMLElement>(host: ReactiveControllerHost, options: ActivedescendantControllerOptions<Item>): ActivedescendantController<Item>;
+    get atFocusedItemIndex(): number;
+    /**
+     * Rather than setting DOM focus, applies the `aria-activedescendant` attribute,
+     * using AriaIDLAttributes for cross-root aria, if supported by the browser
+     * @param item item
+     */
+    set atFocusedItemIndex(index: number);
+    protected get controlsElements(): HTMLElement[];
+    protected set controlsElements(elements: HTMLElement[]);
+    /** All items */
+    get items(): Item[];
+    /**
+     * Sets the list of items and activates the next activatable item after the current one
+     * @param items tabindex items
+     */
+    set items(items: Item[]);
+    private constructor();
+    protected initItems(): void;
+    hostDisconnected(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    renderItemsToShadowRoot(): typeof nothing | Node[];
+}

package/controllers/activedescendant-controller.js

@@ -0,0 +1,230 @@
+var _ActivedescendantController_instances, _ActivedescendantController_lightToShadowMap, _ActivedescendantController_shadowToLightMap, _ActivedescendantController_noCloneSet, _ActivedescendantController_controlsElements, _ActivedescendantController_observing, _ActivedescendantController_listMO, _ActivedescendantController_attrMO, _ActivedescendantController_syncAttr, _ActivedescendantController_onItemsDOMChange, _ActivedescendantController_onItemAttributeChange;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { ATFocusController } from './at-focus-controller.js';
+import { isServer, nothing } from 'lit';
+import { getRandomId } from '../functions/random.js';
+import { bound } from '../decorators/bound.js';
+/**
+ * Implements activedescendant pattern, as described in WAI-ARIA practices,
+ * [Managing Focus in Composites Using aria-activedescendant][ad]
+ *
+ * The steps for using the aria-activedescendant method of managing focus are as follows.
+ *
+ *  - When the container element that has a role that supports aria-activedescendant is loaded
+ *    or created, ensure that:
+ *    - The container element is included in the tab sequence as described in
+ *      Keyboard Navigation Between Components or is a focusable element of a composite
+ *      that implements a roving tabindex.
+ *    - It has aria-activedescendant="IDREF" where IDREF is the ID of the element within
+ *      the container that should be identified as active when the widget receives focus.
+ *      The referenced element needs to meet the DOM relationship requirements described below.
+ *  - When the container element receives DOM focus, draw a visual focus indicator on the active
+ *    element and ensure the active element is scrolled into view.
+ *  - When the composite widget contains focus and the user presses a navigation key that moves
+ *    focus within the widget, such as an arrow key:
+ *    - Change the value of aria-activedescendant on the container to refer to the element
+ *      that should be reported to assistive technologies as active.
+ *    - Move the visual focus indicator and, if necessary, scrolled the active element into view.
+ *  - If the design calls for a specific element to be focused the next time a user moves focus
+ *    into the composite with Tab or Shift+Tab, check if aria-activedescendant is referring to
+ *    that target element when the container loses focus. If it is not, set aria-activedescendant
+ *    to refer to the target element.
+ *
+ * The specification for aria-activedescendant places important restrictions on the
+ * DOM relationship between the focused element that has the aria-activedescendant attribute
+ * and the element referenced as active by the value of the attribute.
+ * One of the following three conditions must be met.
+ *
+ * 1. The element referenced as active is a DOM descendant of the focused referencing element.
+ * 2. The focused referencing element has a value specified for the aria-owns property that
+ *    includes the ID of the element referenced as active.
+ * 3. The focused referencing element has role of combobox, textbox, or searchbox
+ *    and has aria-controls property referring to an element with a role that supports
+ *    aria-activedescendant and either:
+ *   1. The element referenced as active is a descendant of the controlled element.
+ *   2. The controlled element has a value specified for the aria-owns property that includes
+ *      the ID of the element referenced as active.
+ *
+ * [ad]: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant
+ */
+export class ActivedescendantController extends ATFocusController {
+    /**
+     * When true, the browser supports cross-root ARIA such that the controller does not need
+     * to copy item nodes into the controlling nodes' root
+     */
+    static get supportsCrossRootActiveDescendant() {
+        return !isServer && 'ariaActiveDescendantElement' in HTMLElement.prototype;
+    }
+    static of(host, options) {
+        return new ActivedescendantController(host, options);
+    }
+    get atFocusedItemIndex() {
+        return super.atFocusedItemIndex;
+    }
+    /**
+     * Rather than setting DOM focus, applies the `aria-activedescendant` attribute,
+     * using AriaIDLAttributes for cross-root aria, if supported by the browser
+     * @param item item
+     */
+    set atFocusedItemIndex(index) {
+        super.atFocusedItemIndex = index;
+        const item = this._items.at(this.atFocusedItemIndex);
+        for (const _item of this.items) {
+            this.options.setItemActive?.(_item, _item === item);
+        }
+        const container = this.options.getActiveDescendantContainer();
+        if (!ActivedescendantController.supportsCrossRootActiveDescendant) {
+            container?.setAttribute('aria-activedescendant', item?.id ?? '');
+        }
+        else if (container) {
+            container.ariaActiveDescendantElement = item ?? null;
+        }
+        this.host.requestUpdate();
+    }
+    get controlsElements() {
+        return __classPrivateFieldGet(this, _ActivedescendantController_controlsElements, "f");
+    }
+    set controlsElements(elements) {
+        for (const old of __classPrivateFieldGet(this, _ActivedescendantController_controlsElements, "f")) {
+            old?.removeEventListener('keydown', this.onKeydown);
+        }
+        __classPrivateFieldSet(this, _ActivedescendantController_controlsElements, elements, "f");
+        for (const element of __classPrivateFieldGet(this, _ActivedescendantController_controlsElements, "f")) {
+            element.addEventListener('keydown', this.onKeydown);
+        }
+    }
+    /** All items */
+    get items() {
+        return this._items;
+    }
+    /**
+     * Sets the list of items and activates the next activatable item after the current one
+     * @param items tabindex items
+     */
+    set items(items) {
+        const container = this.options.getItemsContainer?.() ?? this.host;
+        if (!(container instanceof HTMLElement)) {
+            throw new Error('items container must be an HTMLElement');
+        }
+        this.itemsContainerElement = container;
+        const { supportsCrossRootActiveDescendant } = ActivedescendantController;
+        if (supportsCrossRootActiveDescendant
+            || [container] // all nodes are in the same root
+                .concat(this.controlsElements)
+                .concat(items)
+                .every((node, _, a) => node.getRootNode() === a[0].getRootNode())) {
+            this._items = items.map(x => {
+                if (!supportsCrossRootActiveDescendant) {
+                    x.id || (x.id = getRandomId());
+                }
+                return x;
+            });
+        }
+        else {
+            this._items = items?.map((item) => {
+                item.removeAttribute('tabindex');
+                if (container.contains(item)) {
+                    item.id || (item.id = getRandomId());
+                    __classPrivateFieldGet(this, _ActivedescendantController_noCloneSet, "f").add(item);
+                    __classPrivateFieldGet(this, _ActivedescendantController_shadowToLightMap, "f").set(item, item);
+                    return item;
+                }
+                else {
+                    const clone = item.cloneNode(true);
+                    clone.id = getRandomId();
+                    __classPrivateFieldGet(this, _ActivedescendantController_lightToShadowMap, "f").set(item, clone);
+                    __classPrivateFieldGet(this, _ActivedescendantController_shadowToLightMap, "f").set(clone, item);
+                    // Though efforts were taken to disconnect
+                    // this observer, it may still be a memory leak
+                    __classPrivateFieldGet(this, _ActivedescendantController_attrMO, "f").observe(clone, { attributes: true });
+                    __classPrivateFieldGet(this, _ActivedescendantController_attrMO, "f").observe(item, { attributes: true });
+                    return clone;
+                }
+            });
+        }
+    }
+    constructor(host, options) {
+        var _a;
+        super(host, options);
+        _ActivedescendantController_instances.add(this);
+        this.host = host;
+        this.options = options;
+        /** Maps from original element to shadow DOM clone */
+        _ActivedescendantController_lightToShadowMap.set(this, new WeakMap());
+        /** Maps from shadow DOM clone to original element */
+        _ActivedescendantController_shadowToLightMap.set(this, new WeakMap());
+        /** Set of item which should not be cloned */
+        _ActivedescendantController_noCloneSet.set(this, new WeakSet());
+        /** Element which controls the list i.e. combobox */
+        _ActivedescendantController_controlsElements.set(this, []);
+        _ActivedescendantController_observing.set(this, false);
+        _ActivedescendantController_listMO.set(this, new MutationObserver(records => __classPrivateFieldGet(this, _ActivedescendantController_instances, "m", _ActivedescendantController_onItemsDOMChange).call(this, records)));
+        _ActivedescendantController_attrMO.set(this, new MutationObserver(records => __classPrivateFieldGet(this, _ActivedescendantController_instances, "m", _ActivedescendantController_onItemAttributeChange).call(this, records)));
+        (_a = this.options).getItemValue ?? (_a.getItemValue = function () {
+            return this.value;
+        });
+    }
+    ;
+    ;
+    initItems() {
+        __classPrivateFieldGet(this, _ActivedescendantController_attrMO, "f").disconnect();
+        super.initItems();
+        this.controlsElements = this.options.getControlsElements?.() ?? [];
+        if (!__classPrivateFieldGet(this, _ActivedescendantController_observing, "f") && this.itemsContainerElement && this.itemsContainerElement.isConnected) {
+            __classPrivateFieldGet(this, _ActivedescendantController_listMO, "f").observe(this.itemsContainerElement, { childList: true });
+            __classPrivateFieldSet(this, _ActivedescendantController_observing, true, "f");
+        }
+    }
+    hostDisconnected() {
+        this.controlsElements = [];
+        __classPrivateFieldSet(this, _ActivedescendantController_observing, false, "f");
+        __classPrivateFieldGet(this, _ActivedescendantController_listMO, "f").disconnect();
+        __classPrivateFieldGet(this, _ActivedescendantController_attrMO, "f").disconnect();
+    }
+    onKeydown(event) {
+        if (!event.ctrlKey
+            && !event.altKey
+            && !event.metaKey
+            && !!this.atFocusableItems.length) {
+            super.onKeydown(event);
+        }
+        ;
+    }
+    renderItemsToShadowRoot() {
+        if (ActivedescendantController.supportsCrossRootActiveDescendant) {
+            return nothing;
+        }
+        else {
+            return this.items?.filter(x => !__classPrivateFieldGet(this, _ActivedescendantController_noCloneSet, "f").has(x));
+        }
+    }
+}
+_ActivedescendantController_lightToShadowMap = new WeakMap(), _ActivedescendantController_shadowToLightMap = new WeakMap(), _ActivedescendantController_noCloneSet = new WeakMap(), _ActivedescendantController_controlsElements = new WeakMap(), _ActivedescendantController_observing = new WeakMap(), _ActivedescendantController_listMO = new WeakMap(), _ActivedescendantController_attrMO = new WeakMap(), _ActivedescendantController_instances = new WeakSet(), _ActivedescendantController_syncAttr = function _ActivedescendantController_syncAttr(attributeName, fromNode) {
+    const toNode = __classPrivateFieldGet(this, _ActivedescendantController_shadowToLightMap, "f").get(fromNode)
+        ?? __classPrivateFieldGet(this, _ActivedescendantController_lightToShadowMap, "f").get(fromNode);
+    const newVal = fromNode.getAttribute(attributeName);
+    const oldVal = toNode?.getAttribute(attributeName);
+    if (!fromNode.hasAttribute(attributeName)) {
+        toNode?.removeAttribute(attributeName);
+    }
+    else if (oldVal !== newVal) {
+        toNode?.setAttribute(attributeName, newVal);
+    }
+}, _ActivedescendantController_onItemsDOMChange = function _ActivedescendantController_onItemsDOMChange(records) {
+    for (const { removedNodes } of records) {
+        for (const removed of removedNodes) {
+            __classPrivateFieldGet(this, _ActivedescendantController_lightToShadowMap, "f").get(removed)?.remove();
+            __classPrivateFieldGet(this, _ActivedescendantController_lightToShadowMap, "f").delete(removed);
+        }
+    }
+}, _ActivedescendantController_onItemAttributeChange = function _ActivedescendantController_onItemAttributeChange(records) {
+    for (const { target, attributeName } of records) {
+        if (attributeName) {
+            __classPrivateFieldGet(this, _ActivedescendantController_instances, "m", _ActivedescendantController_syncAttr).call(this, attributeName, target);
+        }
+    }
+};
+__decorate([
+    bound
+], ActivedescendantController.prototype, "onKeydown", null);
+//# sourceMappingURL=activedescendant-controller.js.map

package/controllers/activedescendant-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activedescendant-controller.js","sourceRoot":"","sources":["activedescendant-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveControllerHost } from 'lit';\n\nimport { type ATFocusControllerOptions, ATFocusController } from './at-focus-controller.js';\n\nimport { isServer, nothing } from 'lit';\nimport { getRandomId } from '../functions/random.js';\nimport { bound } from '../decorators/bound.js';\n\nexport interface ActivedescendantControllerOptions<\n  Item extends HTMLElement\n> extends ATFocusControllerOptions<Item> {\n  /**\n   * Returns a reference to the element which acts as the assistive technology container for\n   * the items. In the case of a combobox, this is the input element.\n   */\n  getActiveDescendantContainer(): HTMLElement | null;\n  /**\n   * Optional callback to control the assistive technology focus behavior of items.\n   * By default, ActivedescendantController will not do anything special to items when they receive\n   * assistive technology focus, and will only set the `activedescendant` property on the container.\n   * If you provide this callback, ActivedescendantController will call it on your item with the\n   * active state. You may use this to set active styles.\n   */\n  setItemActive?(item: Item, active: boolean): void;\n  /**\n   * Optional callback to retrieve the value from an option element.\n   * By default, retrieves the `value` attribute, or the text content.\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement\n   */\n  getItemValue?(item: Item): string;\n}\n\n/**\n * Implements activedescendant pattern, as described in WAI-ARIA practices,\n * [Managing Focus in Composites Using aria-activedescendant][ad]\n *\n * The steps for using the aria-activedescendant method of managing focus are as follows.\n *\n *  - When the container element that has a role that supports aria-activedescendant is loaded\n *    or created, ensure that:\n *    - The container element is included in the tab sequence as described in\n *      Keyboard Navigation Between Components or is a focusable element of a composite\n *      that implements a roving tabindex.\n *    - It has aria-activedescendant=\"IDREF\" where IDREF is the ID of the element within\n *      the container that should be identified as active when the widget receives focus.\n *      The referenced element needs to meet the DOM relationship requirements described below.\n *  - When the container element receives DOM focus, draw a visual focus indicator on the active\n *    element and ensure the active element is scrolled into view.\n *  - When the composite widget contains focus and the user presses a navigation key that moves\n *    focus within the widget, such as an arrow key:\n *    - Change the value of aria-activedescendant on the container to refer to the element\n *      that should be reported to assistive technologies as active.\n *    - Move the visual focus indicator and, if necessary, scrolled the active element into view.\n *  - If the design calls for a specific element to be focused the next time a user moves focus\n *    into the composite with Tab or Shift+Tab, check if aria-activedescendant is referring to\n *    that target element when the container loses focus. If it is not, set aria-activedescendant\n *    to refer to the target element.\n *\n * The specification for aria-activedescendant places important restrictions on the\n * DOM relationship between the focused element that has the aria-activedescendant attribute\n * and the element referenced as active by the value of the attribute.\n * One of the following three conditions must be met.\n *\n * 1. The element referenced as active is a DOM descendant of the focused referencing element.\n * 2. The focused referencing element has a value specified for the aria-owns property that\n *    includes the ID of the element referenced as active.\n * 3. The focused referencing element has role of combobox, textbox, or searchbox\n *    and has aria-controls property referring to an element with a role that supports\n *    aria-activedescendant and either:\n *   1. The element referenced as active is a descendant of the controlled element.\n *   2. The controlled element has a value specified for the aria-owns property that includes\n *      the ID of the element referenced as active.\n *\n * [ad]: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant\n */\nexport class ActivedescendantController<\n  Item extends HTMLElement = HTMLElement\n> extends ATFocusController<Item> {\n  /**\n   * When true, the browser supports cross-root ARIA such that the controller does not need\n   * to copy item nodes into the controlling nodes' root\n   */\n  public static get supportsCrossRootActiveDescendant(): boolean {\n    return !isServer && 'ariaActiveDescendantElement' in HTMLElement.prototype;\n  }\n\n  static of<Item extends HTMLElement>(\n    host: ReactiveControllerHost,\n    options: ActivedescendantControllerOptions<Item>,\n  ): ActivedescendantController<Item> {\n    return new ActivedescendantController(host, options);\n  }\n\n  /** Maps from original element to shadow DOM clone */\n  #lightToShadowMap = new WeakMap<Item, Item>();\n\n  /** Maps from shadow DOM clone to original element */\n  #shadowToLightMap = new WeakMap<Item, Item>();\n\n  /** Set of item which should not be cloned */\n  #noCloneSet = new WeakSet<Item>();\n\n  /** Element which controls the list i.e. combobox */\n  #controlsElements: HTMLElement[] = [];\n\n  #observing = false;\n\n  #listMO = new MutationObserver(records => this.#onItemsDOMChange(records));\n\n  #attrMO = new MutationObserver(records => this.#onItemAttributeChange(records));\n\n  #syncAttr(attributeName: string, fromNode: Item) {\n    const toNode = this.#shadowToLightMap.get(fromNode as Item)\n                ?? this.#lightToShadowMap.get(fromNode as Item);\n    const newVal = fromNode.getAttribute(attributeName);\n    const oldVal = toNode?.getAttribute(attributeName);\n    if (!fromNode.hasAttribute(attributeName)) {\n      toNode?.removeAttribute(attributeName);\n    } else if (oldVal !== newVal) {\n      toNode?.setAttribute(attributeName, newVal!);\n    }\n  }\n\n  get atFocusedItemIndex(): number {\n    return super.atFocusedItemIndex;\n  }\n\n  /**\n   * Rather than setting DOM focus, applies the `aria-activedescendant` attribute,\n   * using AriaIDLAttributes for cross-root aria, if supported by the browser\n   * @param item item\n   */\n  set atFocusedItemIndex(index: number) {\n    super.atFocusedItemIndex = index;\n    const item = this._items.at(this.atFocusedItemIndex);\n    for (const _item of this.items) {\n      this.options.setItemActive?.(_item, _item === item);\n    }\n    const container = this.options.getActiveDescendantContainer();\n    if (!ActivedescendantController.supportsCrossRootActiveDescendant) {\n      container?.setAttribute('aria-activedescendant', item?.id ?? '');\n    } else if (container) {\n      container.ariaActiveDescendantElement = item ?? null;\n    }\n    this.host.requestUpdate();\n  }\n\n  protected get controlsElements(): HTMLElement[] {\n    return this.#controlsElements;\n  }\n\n  protected set controlsElements(elements: HTMLElement[]) {\n    for (const old of this.#controlsElements) {\n      old?.removeEventListener('keydown', this.onKeydown);\n    }\n    this.#controlsElements = elements;\n    for (const element of this.#controlsElements) {\n      element.addEventListener('keydown', this.onKeydown);\n    }\n  }\n\n  /** All items */\n  get items() {\n    return this._items;\n  }\n\n  /**\n   * Sets the list of items and activates the next activatable item after the current one\n   * @param items tabindex items\n   */\n  override set items(items: Item[]) {\n    const container = this.options.getItemsContainer?.() ?? this.host;\n    if (!(container instanceof HTMLElement)) {\n      throw new Error('items container must be an HTMLElement');\n    }\n    this.itemsContainerElement = container;\n    const { supportsCrossRootActiveDescendant } = ActivedescendantController;\n    if (supportsCrossRootActiveDescendant\n        || [container] // all nodes are in the same root\n            .concat(this.controlsElements)\n            .concat(items)\n            .every((node, _, a) => node.getRootNode() === a[0].getRootNode())) {\n      this._items = items.map(x => {\n        if (!supportsCrossRootActiveDescendant) {\n          x.id ||= getRandomId();\n        }\n        return x;\n      });\n    } else {\n      this._items = items?.map((item: Item) => {\n        item.removeAttribute('tabindex');\n        if (container.contains(item)) {\n          item.id ||= getRandomId();\n          this.#noCloneSet.add(item);\n          this.#shadowToLightMap.set(item, item);\n          return item;\n        } else {\n          const clone = item.cloneNode(true) as Item;\n          clone.id = getRandomId();\n          this.#lightToShadowMap.set(item, clone);\n          this.#shadowToLightMap.set(clone, item);\n          // Though efforts were taken to disconnect\n          // this observer, it may still be a memory leak\n          this.#attrMO.observe(clone, { attributes: true });\n          this.#attrMO.observe(item, { attributes: true });\n          return clone;\n        }\n      });\n    }\n  }\n\n  private constructor(\n    public host: ReactiveControllerHost,\n    protected options: ActivedescendantControllerOptions<Item>,\n  ) {\n    super(host, options);\n    this.options.getItemValue ??= function(this: Item) {\n      return (this as unknown as HTMLOptionElement).value;\n    };\n  }\n\n  #onItemsDOMChange(records: MutationRecord[]) {\n    for (const { removedNodes } of records) {\n      for (const removed of removedNodes as NodeListOf<Item>) {\n        this.#lightToShadowMap.get(removed)?.remove();\n        this.#lightToShadowMap.delete(removed);\n      }\n    }\n  };\n\n  #onItemAttributeChange(records: MutationRecord[]) {\n    for (const { target, attributeName } of records) {\n      if (attributeName) {\n        this.#syncAttr(attributeName, target as Item);\n      }\n    }\n  };\n\n  protected override initItems(): void {\n    this.#attrMO.disconnect();\n    super.initItems();\n    this.controlsElements = this.options.getControlsElements?.() ?? [];\n    if (!this.#observing && this.itemsContainerElement && this.itemsContainerElement.isConnected) {\n      this.#listMO.observe(this.itemsContainerElement, { childList: true });\n      this.#observing = true;\n    }\n  }\n\n  hostDisconnected(): void {\n    this.controlsElements = [];\n    this.#observing = false;\n    this.#listMO.disconnect();\n    this.#attrMO.disconnect();\n  }\n\n  @bound\n  protected override onKeydown(event: KeyboardEvent): void {\n    if (!event.ctrlKey\n        && !event.altKey\n        && !event.metaKey\n        && !!this.atFocusableItems.length) {\n      super.onKeydown(event);\n    };\n  }\n\n  public renderItemsToShadowRoot(): typeof nothing | Node[] {\n    if (ActivedescendantController.supportsCrossRootActiveDescendant) {\n      return nothing;\n    } else {\n      return this.items?.filter(x => !this.#noCloneSet.has(x));\n    }\n  }\n}\n"]}

package/controllers/at-focus-controller.d.ts

@@ -0,0 +1,56 @@
+import { type ReactiveControllerHost } from 'lit';
+export interface ATFocusControllerOptions<Item extends HTMLElement> {
+    /**
+     * Callback to return the list of items
+     */
+    getItems(): Item[];
+    /**
+     * Callback to return the listbox container element
+     */
+    getItemsContainer?(): HTMLElement | null;
+    /**
+     * Callback to return the direction of navigation in the list box.
+     */
+    getOrientation?(): 'horizontal' | 'vertical' | 'both' | 'undefined';
+    /**
+     * Function returning the DOM nodes which are accessibility controllers of item container
+     * e.g. the button toggle and combobox input which control a listbox.
+     */
+    getControlsElements?(): HTMLElement[];
+}
+export declare abstract class ATFocusController<Item extends HTMLElement> {
+    #private;
+    host: ReactiveControllerHost;
+    protected options: ATFocusControllerOptions<Item>;
+    protected _items: Item[];
+    /** All items */
+    abstract items: Item[];
+    /**
+     * Index of the Item which currently has assistive technology focus
+     * Set this to change focus. Setting to an out-of-bounds value will
+     * wrap around to the other side of the list.
+     */
+    get atFocusedItemIndex(): number;
+    set atFocusedItemIndex(index: number);
+    /** Elements which control the items container e.g. a combobox input */
+    protected get controlsElements(): HTMLElement[];
+    /** All items which are able to receive assistive technology focus */
+    get atFocusableItems(): Item[];
+    /** The element containing focusable items, e.g. a listbox */
+    get itemsContainerElement(): HTMLElement | null;
+    set itemsContainerElement(container: HTMLElement | null);
+    constructor(host: ReactiveControllerHost, options: ATFocusControllerOptions<Item>);
+    /**
+     * Initialize the items and itemsContainerElement fields
+     */
+    protected initItems(): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdate(): void;
+    /**
+     * Override and conditionally call `super.onKeydown` to filter out keyboard events
+     * which should not result in a focus change. Ensure that subclass' method is bound
+     * @param event keyboard event
+     */
+    protected onKeydown(event: KeyboardEvent): void;
+}

package/controllers/at-focus-controller.js

@@ -0,0 +1,168 @@
+var _ATFocusController_instances, _ATFocusController_itemsContainerElement, _ATFocusController_atFocusedItemIndex, _ATFocusController_initContainer;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+import { isServer } from 'lit';
+import { bound } from '../decorators/bound.js';
+function isATFocusableItem(el) {
+    return !!el
+        && el.ariaHidden !== 'true'
+        && !el.hasAttribute('inert')
+        && !el.hasAttribute('hidden');
+}
+export class ATFocusController {
+    /**
+     * Index of the Item which currently has assistive technology focus
+     * Set this to change focus. Setting to an out-of-bounds value will
+     * wrap around to the other side of the list.
+     */
+    get atFocusedItemIndex() {
+        return __classPrivateFieldGet(this, _ATFocusController_atFocusedItemIndex, "f");
+    }
+    set atFocusedItemIndex(index) {
+        const previousIndex = __classPrivateFieldGet(this, _ATFocusController_atFocusedItemIndex, "f");
+        const direction = index > previousIndex ? 1 : -1;
+        const { items, atFocusableItems } = this;
+        const itemsIndexOfLastATFocusableItem = items.indexOf(this.atFocusableItems.at(-1));
+        let itemToGainFocus = items.at(index);
+        let itemToGainFocusIsFocusable = atFocusableItems.includes(itemToGainFocus);
+        if (atFocusableItems.length) {
+            let count = 0;
+            while (!itemToGainFocus || !itemToGainFocusIsFocusable && count++ <= 1000) {
+                if (index < 0) {
+                    index = itemsIndexOfLastATFocusableItem;
+                }
+                else if (index >= itemsIndexOfLastATFocusableItem) {
+                    index = 0;
+                }
+                else {
+                    index = index + direction;
+                }
+                itemToGainFocus = items.at(index);
+                itemToGainFocusIsFocusable = atFocusableItems.includes(itemToGainFocus);
+            }
+            if (count >= 1000) {
+                throw new Error('Could not atFocusedItemIndex');
+            }
+        }
+        __classPrivateFieldSet(this, _ATFocusController_atFocusedItemIndex, index, "f");
+    }
+    /** Elements which control the items container e.g. a combobox input */
+    get controlsElements() {
+        return this.options.getControlsElements?.() ?? [];
+    }
+    /** All items which are able to receive assistive technology focus */
+    get atFocusableItems() {
+        return this._items.filter(isATFocusableItem);
+    }
+    /** The element containing focusable items, e.g. a listbox */
+    get itemsContainerElement() {
+        return __classPrivateFieldGet(this, _ATFocusController_itemsContainerElement, "f") ?? null;
+    }
+    set itemsContainerElement(container) {
+        if (container !== __classPrivateFieldGet(this, _ATFocusController_itemsContainerElement, "f")) {
+            __classPrivateFieldGet(this, _ATFocusController_itemsContainerElement, "f")?.removeEventListener('keydown', this.onKeydown);
+            __classPrivateFieldSet(this, _ATFocusController_itemsContainerElement, container, "f");
+            __classPrivateFieldGet(this, _ATFocusController_itemsContainerElement, "f")?.addEventListener('keydown', this.onKeydown);
+            this.host.requestUpdate();
+        }
+    }
+    constructor(host, options) {
+        _ATFocusController_instances.add(this);
+        this.host = host;
+        this.options = options;
+        _ATFocusController_itemsContainerElement.set(this, null);
+        _ATFocusController_atFocusedItemIndex.set(this, -1);
+        this._items = [];
+        this.host.updateComplete.then(() => this.initItems());
+    }
+    /**
+     * Initialize the items and itemsContainerElement fields
+     */
+    initItems() {
+        this.items = this.options.getItems();
+        this.itemsContainerElement ?? (this.itemsContainerElement = __classPrivateFieldGet(this, _ATFocusController_instances, "m", _ATFocusController_initContainer).call(this));
+    }
+    hostConnected() {
+        this.hostUpdate();
+    }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _ATFocusController_itemsContainerElement, "f")?.removeEventListener('keydown', this.onKeydown);
+    }
+    hostUpdate() {
+        this.itemsContainerElement ?? (this.itemsContainerElement = __classPrivateFieldGet(this, _ATFocusController_instances, "m", _ATFocusController_initContainer).call(this));
+    }
+    /**
+     * Override and conditionally call `super.onKeydown` to filter out keyboard events
+     * which should not result in a focus change. Ensure that subclass' method is bound
+     * @param event keyboard event
+     */
+    onKeydown(event) {
+        const orientation = this.options.getOrientation?.() ?? __classPrivateFieldGet(this, _ATFocusController_itemsContainerElement, "f")
+            ?.getAttribute('aria-orientation');
+        const item = this._items.at(this.atFocusedItemIndex);
+        const horizontalOnly = orientation === 'horizontal'
+            || item?.tagName === 'SELECT'
+            || item?.getAttribute('role') === 'spinbutton';
+        const verticalOnly = orientation === 'vertical';
+        switch (event.key) {
+            case 'ArrowLeft':
+                if (verticalOnly) {
+                    return;
+                }
+                this.atFocusedItemIndex--;
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'ArrowRight':
+                if (verticalOnly) {
+                    return;
+                }
+                this.atFocusedItemIndex++;
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                if (horizontalOnly) {
+                    return;
+                }
+                this.atFocusedItemIndex--;
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'ArrowDown':
+                if (horizontalOnly) {
+                    return;
+                }
+                this.atFocusedItemIndex++;
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'Home':
+                if (!(event.target instanceof HTMLElement
+                    && (event.target.hasAttribute('aria-activedescendant')
+                        || event.target.ariaActiveDescendantElement))) {
+                    this.atFocusedItemIndex = 0;
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+                break;
+            case 'End':
+                if (!(event.target instanceof HTMLElement
+                    && (event.target.hasAttribute('aria-activedescendant')
+                        || event.target.ariaActiveDescendantElement))) {
+                    this.atFocusedItemIndex = this.items.length - 1;
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+                break;
+            default:
+                break;
+        }
+        this.host.requestUpdate();
+    }
+    ;
+}
+_ATFocusController_itemsContainerElement = new WeakMap(), _ATFocusController_atFocusedItemIndex = new WeakMap(), _ATFocusController_instances = new WeakSet(), _ATFocusController_initContainer = function _ATFocusController_initContainer() {
+    return this.options.getItemsContainer?.()
+        ?? (!isServer && this.host instanceof HTMLElement ? this.host : null);
+};
+//# sourceMappingURL=at-focus-controller.js.map

package/controllers/at-focus-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"at-focus-controller.js","sourceRoot":"","sources":["at-focus-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { isServer, type ReactiveControllerHost } from 'lit';\nimport { bound } from '../decorators/bound.js';\n\nfunction isATFocusableItem(el: Element): el is HTMLElement {\n  return !!el\n      && el.ariaHidden !== 'true'\n      && !el.hasAttribute('inert')\n      && !el.hasAttribute('hidden');\n}\n\nexport interface ATFocusControllerOptions<Item extends HTMLElement> {\n  /**\n   * Callback to return the list of items\n   */\n  getItems(): Item[];\n  /**\n   * Callback to return the listbox container element\n   */\n  getItemsContainer?(): HTMLElement | null;\n  /**\n   * Callback to return the direction of navigation in the list box.\n   */\n  getOrientation?(): 'horizontal' | 'vertical' | 'both' | 'undefined';\n  /**\n   * Function returning the DOM nodes which are accessibility controllers of item container\n   * e.g. the button toggle and combobox input which control a listbox.\n   */\n  getControlsElements?(): HTMLElement[];\n}\n\nexport abstract class ATFocusController<Item extends HTMLElement> {\n  #itemsContainerElement: HTMLElement | null = null;\n\n  #atFocusedItemIndex = -1;\n\n  protected _items: Item[] = [];\n\n  /** All items */\n  abstract items: Item[];\n\n  /**\n   * Index of the Item which currently has assistive technology focus\n   * Set this to change focus. Setting to an out-of-bounds value will\n   * wrap around to the other side of the list.\n   */\n  get atFocusedItemIndex() {\n    return this.#atFocusedItemIndex;\n  }\n\n  set atFocusedItemIndex(index: number) {\n    const previousIndex = this.#atFocusedItemIndex;\n    const direction = index > previousIndex ? 1 : -1;\n    const { items, atFocusableItems } = this;\n    const itemsIndexOfLastATFocusableItem = items.indexOf(this.atFocusableItems.at(-1)!);\n    let itemToGainFocus = items.at(index);\n    let itemToGainFocusIsFocusable = atFocusableItems.includes(itemToGainFocus!);\n    if (atFocusableItems.length) {\n      let count = 0;\n      while (!itemToGainFocus || !itemToGainFocusIsFocusable && count++ <= 1000) {\n        if (index < 0) {\n          index = itemsIndexOfLastATFocusableItem;\n        } else if (index >= itemsIndexOfLastATFocusableItem) {\n          index = 0;\n        } else {\n          index = index + direction;\n        }\n        itemToGainFocus = items.at(index);\n        itemToGainFocusIsFocusable = atFocusableItems.includes(itemToGainFocus!);\n      }\n      if (count >= 1000) {\n        throw new Error('Could not atFocusedItemIndex');\n      }\n    }\n    this.#atFocusedItemIndex = index;\n  }\n\n  /** Elements which control the items container e.g. a combobox input */\n  protected get controlsElements(): HTMLElement[] {\n    return this.options.getControlsElements?.() ?? [];\n  }\n\n  /** All items which are able to receive assistive technology focus */\n  get atFocusableItems(): Item[] {\n    return this._items.filter(isATFocusableItem);\n  }\n\n  /** The element containing focusable items, e.g. a listbox */\n  get itemsContainerElement() {\n    return this.#itemsContainerElement ?? null;\n  }\n\n  set itemsContainerElement(container: HTMLElement | null) {\n    if (container !== this.#itemsContainerElement) {\n      this.#itemsContainerElement?.removeEventListener('keydown', this.onKeydown);\n      this.#itemsContainerElement = container;\n      this.#itemsContainerElement?.addEventListener('keydown', this.onKeydown);\n      this.host.requestUpdate();\n    }\n  }\n\n  constructor(\n    public host: ReactiveControllerHost,\n    protected options: ATFocusControllerOptions<Item>,\n  ) {\n    this.host.updateComplete.then(() => this.initItems());\n  }\n\n  /**\n   * Initialize the items and itemsContainerElement fields\n   */\n  protected initItems(): void {\n    this.items = this.options.getItems();\n    this.itemsContainerElement ??= this.#initContainer();\n  }\n\n  hostConnected(): void {\n    this.hostUpdate();\n  }\n\n  hostDisconnected(): void {\n    this.#itemsContainerElement?.removeEventListener('keydown', this.onKeydown);\n  }\n\n  hostUpdate(): void {\n    this.itemsContainerElement ??= this.#initContainer();\n  }\n\n  #initContainer() {\n    return this.options.getItemsContainer?.()\n      ?? (!isServer && this.host instanceof HTMLElement ? this.host : null);\n  }\n\n  /**\n   * Override and conditionally call `super.onKeydown` to filter out keyboard events\n   * which should not result in a focus change. Ensure that subclass' method is bound\n   * @param event keyboard event\n   */\n  protected onKeydown(event: KeyboardEvent): void {\n    const orientation = this.options.getOrientation?.() ?? this\n        .#itemsContainerElement\n        ?.getAttribute('aria-orientation') as\n            'horizontal' | 'vertical' | 'grid' | 'undefined';\n\n    const item = this._items.at(this.atFocusedItemIndex);\n\n    const horizontalOnly =\n        orientation === 'horizontal'\n        || item?.tagName === 'SELECT'\n        || item?.getAttribute('role') === 'spinbutton';\n\n    const verticalOnly = orientation === 'vertical';\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        if (verticalOnly) {\n          return;\n        }\n        this.atFocusedItemIndex--;\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'ArrowRight':\n        if (verticalOnly) {\n          return;\n        }\n        this.atFocusedItemIndex++;\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'ArrowUp':\n        if (horizontalOnly) {\n          return;\n        }\n        this.atFocusedItemIndex--;\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'ArrowDown':\n        if (horizontalOnly) {\n          return;\n        }\n        this.atFocusedItemIndex++;\n        event.stopPropagation();\n        event.preventDefault();\n        break;\n      case 'Home':\n        if (!(event.target instanceof HTMLElement\n            && (event.target.hasAttribute('aria-activedescendant')\n             || event.target.ariaActiveDescendantElement))) {\n          this.atFocusedItemIndex = 0;\n          event.stopPropagation();\n          event.preventDefault();\n        }\n        break;\n      case 'End':\n        if (!(event.target instanceof HTMLElement\n            && (event.target.hasAttribute('aria-activedescendant')\n             || event.target.ariaActiveDescendantElement))) {\n          this.atFocusedItemIndex = this.items.length - 1;\n          event.stopPropagation();\n          event.preventDefault();\n        }\n        break;\n      default:\n        break;\n    }\n    this.host.requestUpdate();\n  };\n}\n"]}