diff --git a/.changeset/a11y-controller-opts.md b/.changeset/a11y-controller-opts.md
new file mode 100644
index 0000000000..e9c6f7534e
--- /dev/null
+++ b/.changeset/a11y-controller-opts.md
@@ -0,0 +1,6 @@
+---
+"@patternfly/pfe-core": major
+---
+`RovingTabindexController`, `ListboxController`: constructor options were changed
+
+TODO: elaborate, give before-and-after cases
diff --git a/.changeset/a11y-snapshot-chai.md b/.changeset/a11y-snapshot-chai.md
new file mode 100644
index 0000000000..1137fa3f94
--- /dev/null
+++ b/.changeset/a11y-snapshot-chai.md
@@ -0,0 +1,32 @@
+---
+"@patternfly/pfe-tools": minor
+---
+`a11ySnapshot`: Added chai assertions for various accessibility-tree scenarios
+
+Examples:
+```ts
+describe('<pf-accordion>', function() {
+  beforeEach(() => fixture(html`
+    <pf-accordion>
+      <pf-accordion-header id="header1">header-1</pf-accordion-header>
+      <pf-accordion-panel>panel-1</pf-accordion-panel>
+    </pf-accordion>
+  `))
+  describe('clicking the first heading', function() {
+    beforeEach(clickFirstHeading);
+    it('expands the first panel', async function() {
+      expect(await a11ySnapshot())
+        .to.axContainName('panel-1');
+    });
+    it('focuses the first panel', async function() {
+      expect(await a11ySnapshot())
+        .to.have.axTreeFocusOn(document.getElementById('header1'));
+    });
+    it('shows the collapse all button', async function() {
+      expect(await a11ySnapshot())
+        .to.axContainRole('button');
+    });
+  })
+})
+
+```
diff --git a/core/pfe-core/controllers/activedescendant-controller.ts b/core/pfe-core/controllers/activedescendant-controller.ts
new file mode 100644
index 0000000000..7c13448b43
--- /dev/null
+++ b/core/pfe-core/controllers/activedescendant-controller.ts
@@ -0,0 +1,265 @@
+import type { ReactiveControllerHost } from 'lit';
+
+import { type ATFocusControllerOptions, ATFocusController } from './at-focus-controller.js';
+
+import { isServer, nothing } from 'lit';
+import { getRandomId } from '../functions/random.js';
+
+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?(this: 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?(this: 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 class ActivedescendantController<
+  Item extends HTMLElement = HTMLElement
+> extends ATFocusController<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
+   */
+  public static get canControlLightDom(): boolean {
+    return !isServer && 'ariaActiveDescendantElement' in HTMLElement.prototype;
+  }
+
+  static of<Item extends HTMLElement>(
+    host: ReactiveControllerHost,
+    options: ActivedescendantControllerOptions<Item>,
+  ): ActivedescendantController<Item> {
+    return new ActivedescendantController(host, options);
+  }
+
+  /** Maps from original element to shadow DOM clone */
+  #lightToShadowMap = new WeakMap<Item, Item>();
+
+  /** Maps from shadow DOM clone to original element */
+  #shadowToLightMap = new WeakMap<Item, Item>();
+
+  /** Set of item which should not be cloned */
+  #noCloneSet = new WeakSet<Item>();
+
+  /** Element which controls the list i.e. combobox */
+  #controlsElements: HTMLElement[] = [];
+
+  #observing = false;
+
+  #listMO = new MutationObserver(records => this.#onItemsDOMChange(records));
+
+  #attrMO = new MutationObserver(records => this.#onItemAttributeChange(records));
+
+  #syncAttr(attributeName: string, fromNode: Item) {
+    const toNode = this.#shadowToLightMap.get(fromNode as Item)
+                ?? this.#lightToShadowMap.get(fromNode as Item);
+    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!);
+    }
+  }
+
+  get atFocusedItemIndex(): number {
+    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: number) {
+    const { canControlLightDom } = ActivedescendantController;
+    super.atFocusedItemIndex = index;
+    const item = this._items.at(this.atFocusedItemIndex);
+    for (const _item of this.items) {
+      this.options.setItemActive?.call(_item, _item === item);
+    }
+    const container = this.options.getActiveDescendantContainer();
+    if (!canControlLightDom) {
+      container?.setAttribute('aria-activedescendant', item?.id ?? '');
+    } else if (container) {
+      container.ariaActiveDescendantElement = item ?? null;
+    }
+    this.host.requestUpdate();
+  }
+
+  get controlsElements(): HTMLElement[] {
+    return this.#controlsElements;
+  }
+
+  set controlsElements(elements: HTMLElement[]) {
+    for (const old of this.#controlsElements) {
+      old?.removeEventListener('keydown', this.onKeydown);
+    }
+    this.#controlsElements = elements;
+    for (const element of this.#controlsElements) {
+      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
+   */
+  override set items(items: Item[]) {
+    const container = this.options.getItemsContainer?.() ?? this.host;
+    if (!(container instanceof HTMLElement)) {
+      throw new Error('items container must be an HTMLElement');
+    }
+    this.itemsContainerElement = container;
+    if (ActivedescendantController.canControlLightDom
+        || [container] // all nodes are in the same root
+            .concat(this.controlsElements)
+            .concat(items)
+            .every((node, _, a) => node.getRootNode() === a[0].getRootNode())) {
+      this._items = items;
+    } else {
+      this._items = items?.map((item: Item) => {
+        item.removeAttribute('tabindex');
+        if (container.contains(item)) {
+          item.id ||= getRandomId();
+          this.#noCloneSet.add(item);
+          this.#shadowToLightMap.set(item, item);
+          return item;
+        } else {
+          const clone = item.cloneNode(true) as Item;
+          clone.id = getRandomId();
+          this.#lightToShadowMap.set(item, clone);
+          this.#shadowToLightMap.set(clone, item);
+          // Though efforts were taken to disconnect
+          // this observer, it may still be a memory leak
+          this.#attrMO.observe(clone, { attributes: true });
+          this.#attrMO.observe(item, { attributes: true });
+          return clone;
+        }
+      });
+    }
+  }
+
+  private constructor(
+    public host: ReactiveControllerHost,
+    protected options: ActivedescendantControllerOptions<Item>,
+  ) {
+    super(host, options);
+    this.options.getItemValue ??= function(this: Item) {
+      return (this as unknown as HTMLOptionElement).value;
+    };
+  }
+
+  #onItemsDOMChange(records: MutationRecord[]) {
+    for (const { removedNodes } of records) {
+      for (const removed of removedNodes as NodeListOf<Item>) {
+        this.#lightToShadowMap.get(removed)?.remove();
+        this.#lightToShadowMap.delete(removed);
+      }
+    }
+  };
+
+  #onItemAttributeChange(records: MutationRecord[]) {
+    for (const { target, attributeName } of records) {
+      if (attributeName) {
+        this.#syncAttr(attributeName, target as Item);
+      }
+    }
+  };
+
+  protected override initItems(): void {
+    this.#attrMO.disconnect();
+    super.initItems();
+    this.controlsElements = this.options.getControlsElements?.() ?? [];
+    if (!this.#observing && this.itemsContainerElement && this.itemsContainerElement.isConnected) {
+      this.#listMO.observe(this.itemsContainerElement, { childList: true });
+      this.#observing = true;
+    }
+  }
+
+  hostDisconnected(): void {
+    this.controlsElements = [];
+    this.#observing = false;
+    this.#listMO.disconnect();
+    this.#attrMO.disconnect();
+  }
+
+  protected override isRelevantKeyboardEvent(event: Event): event is KeyboardEvent {
+    return !(!(event instanceof KeyboardEvent)
+      || event.ctrlKey
+      || event.altKey
+      || event.metaKey
+      || !this.atFocusableItems.length);
+  }
+
+  public renderItemsToShadowRoot(): typeof nothing | Node[] {
+    if (ActivedescendantController.canControlLightDom) {
+      return nothing;
+    } else {
+      return this.items?.filter(x => !this.#noCloneSet.has(x));
+    }
+  }
+}
diff --git a/core/pfe-core/controllers/at-focus-controller.ts b/core/pfe-core/controllers/at-focus-controller.ts
new file mode 100644
index 0000000000..fb58733120
--- /dev/null
+++ b/core/pfe-core/controllers/at-focus-controller.ts
@@ -0,0 +1,216 @@
+import { isServer, type ReactiveControllerHost } from 'lit';
+
+function isATFocusableItem(el: Element): el is HTMLElement {
+  return !!el
+      && el.ariaHidden !== 'true'
+      && !el.hasAttribute('inert')
+      && !el.hasAttribute('hidden');
+}
+
+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 abstract class ATFocusController<Item extends HTMLElement> {
+  #itemsContainerElement: HTMLElement | null = null;
+
+  #atFocusedItemIndex = -1;
+
+  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() {
+    return this.#atFocusedItemIndex;
+  }
+
+  set atFocusedItemIndex(index: number) {
+    const previousIndex = this.#atFocusedItemIndex;
+    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');
+      }
+    }
+    this.#atFocusedItemIndex = index;
+  }
+
+  /** Elements which control the items container e.g. a combobox input */
+  get controlsElements(): HTMLElement[] {
+    return this.options.getControlsElements?.() ?? [];
+  }
+
+  /** All items which are able to receive assistive technology focus */
+  get atFocusableItems(): Item[] {
+    return this._items.filter(isATFocusableItem);
+  }
+
+  /** The element containing focusable items, e.g. a listbox */
+  get itemsContainerElement() {
+    return this.#itemsContainerElement ?? null;
+  }
+
+  set itemsContainerElement(container: HTMLElement | null) {
+    if (container !== this.#itemsContainerElement) {
+      this.#itemsContainerElement?.removeEventListener('keydown', this.onKeydown);
+      this.#itemsContainerElement = container;
+      this.#itemsContainerElement?.addEventListener('keydown', this.onKeydown);
+      this.host.requestUpdate();
+    }
+  }
+
+  constructor(
+    public host: ReactiveControllerHost,
+    protected options: ATFocusControllerOptions<Item>,
+  ) {
+    this.host.updateComplete.then(() => this.initItems());
+  }
+
+  /**
+   * Initialize the items and itemsContainerElement fields
+   */
+  protected initItems(): void {
+    this.items = this.options.getItems();
+    this.itemsContainerElement ??= this.#initContainer();
+  }
+
+  hostConnected(): void {
+    this.hostUpdate();
+  }
+
+  hostDisconnected(): void {
+    this.#itemsContainerElement?.removeEventListener('keydown', this.onKeydown);
+  }
+
+  hostUpdate(): void {
+    this.itemsContainerElement ??= this.#initContainer();
+  }
+
+  #initContainer() {
+    return this.options.getItemsContainer?.()
+      ?? (!isServer && this.host instanceof HTMLElement ? this.host : null);
+  }
+
+  /**
+   * Implement this predicate to filter out keyboard events
+   * which should not result in a focus change. If this predicate returns true, then
+   * a focus change should occur.
+   */
+  protected abstract isRelevantKeyboardEvent(event: Event): event is KeyboardEvent;
+
+  /**
+   * DO NOT OVERRIDE
+   * @param event keyboard event
+   */
+  protected onKeydown = (event: Event): void => {
+    if (this.isRelevantKeyboardEvent(event)) {
+      const orientation = this.options.getOrientation?.() ?? this
+          .#itemsContainerElement
+          ?.getAttribute('aria-orientation') as
+            'horizontal' | 'vertical' | 'grid' | 'undefined';
+
+      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();
+    }
+  };
+}
diff --git a/core/pfe-core/controllers/combobox-controller.ts b/core/pfe-core/controllers/combobox-controller.ts
new file mode 100644
index 0000000000..86d635d623
--- /dev/null
+++ b/core/pfe-core/controllers/combobox-controller.ts
@@ -0,0 +1,747 @@
+import { nothing, type ReactiveController, type ReactiveControllerHost } from 'lit';
+import type { ActivedescendantControllerOptions } from './activedescendant-controller.js';
+import type { RovingTabindexControllerOptions } from './roving-tabindex-controller.js';
+import type { ATFocusController } from './at-focus-controller';
+import type { ListboxControllerOptions } from './listbox-controller.js';
+
+import { ListboxController, isItem, isItemDisabled } from './listbox-controller.js';
+import { RovingTabindexController } from './roving-tabindex-controller.js';
+import { ActivedescendantController } from './activedescendant-controller.js';
+import { InternalsController } from './internals-controller.js';
+import { getRandomId } from '../functions/random.js';
+import type { RequireProps } from '../core.js';
+
+type AllOptions<Item extends HTMLElement> =
+    ActivedescendantControllerOptions<Item>
+  & ListboxControllerOptions<Item>
+  & RovingTabindexControllerOptions<Item>;
+
+type Lang = typeof ComboboxController['langs'][number];
+
+function getItemValue<Item extends HTMLElement>(this: Item): string {
+  if ('value' in this && typeof this.value === 'string') {
+    return this.value;
+  } else {
+    return '';
+  }
+}
+
+function deepClosest(element: Element | null, selector: string) {
+  let closest = element?.closest(selector);
+  let root = element?.getRootNode();
+  let count = 0;
+  while (count < 500 && !closest && element) {
+    count++;
+    root = element.getRootNode();
+    if (root instanceof ShadowRoot) {
+      element = root.host;
+    } else if (root instanceof Document) {
+      element = document.documentElement;
+    } else {
+      return null;
+    }
+    closest = element.closest(selector);
+  }
+  return closest;
+}
+
+function isItemFiltered<Item extends HTMLElement>(this: Item, value: string): boolean {
+  return !getItemValue.call(this)
+      .toLowerCase()
+      .startsWith(value.toLowerCase());
+}
+
+function setItemHidden(this: HTMLElement, hidden: boolean) {
+  this.hidden = hidden;
+}
+
+function setComboboxValue(this: HTMLElement, value: string): void {
+  if (!('value' in this)) {
+    // eslint-disable-next-line no-console
+    return console.warn(`Cannot set value on combobox element ${this.localName}`);
+  } else {
+    this.value = value;
+  }
+}
+
+function getComboboxValue(this: HTMLElement): string {
+  if ('value' in this && typeof this.value === 'string') {
+    return this.value;
+  } else {
+    // eslint-disable-next-line no-console
+    return console.warn(`Cannot get value from combobox element ${this.localName}`), '';
+  }
+}
+
+export interface ComboboxControllerOptions<Item extends HTMLElement> extends
+  Omit<AllOptions<Item>,
+    | 'getATFocusedItem'
+    | 'getControlsElements'
+    | 'getActiveDescendantContainer'
+    | 'getItemsContainer'> {
+  /**
+   * Predicate which establishes whether the listbox is expanded
+   * e.g. `isExpanded: () => this.expanded`, if the host's `expanded` property
+   * should correspond to the listbox expanded state.
+   */
+  isExpanded(): boolean;
+  /**
+   * Callback which the host must implement to change the expanded state to true.
+   * Return or resolve false to prevent the change.
+   */
+  requestShowListbox(): boolean | Promise<boolean>;
+  /**
+   * Callback which the host must implement to change the expanded to false.
+   * Return or resolve false to prevent the default.
+   */
+  requestHideListbox(): boolean | Promise<boolean>;
+  /**
+   * Returns the listbox container element
+   */
+  getListboxElement(): HTMLElement | null;
+  /**
+   * Returns the toggle button, if it exists
+   */
+  getToggleButton(): HTMLElement | null;
+  /**
+   * Returns the combobox input, if it exists
+   */
+  getComboboxInput(): HTMLElement | null;
+  /**
+   * Returns the label for the toggle button, combobox input, and listbox.
+   * when `ariaLabelledByElements` is supported, the label elements associated with
+   * the host element are used instead, and this value is ignored.
+   */
+  getFallbackLabel(): string;
+  /**
+   * Called on an item to retrieve it's value string. By default, returns the `value` property
+   * of the item, as if it implemented the `<option>` element's interface.
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement
+   */
+  getItemValue?(this: Item): string;
+  /**
+   * Optional callback, called on the combobox input element to set its value.
+   * by default, returns the element's `value` DOM property.
+   */
+  getComboboxValue?(this: HTMLElement): string;
+  /**
+   * Optional callback, called on the combobox input element to set its value.
+   * by default, sets the element's `value` DOM property.
+   */
+  setComboboxValue?(this: HTMLElement, value: string): void;
+  /**
+   * Called on each item, with the combobox input, to determine if the item should be shown in the
+   * listbox or filtered out. Return false to hide the item. By default, checks whether the item's
+   * value starts with the input value (when both are lowercased).
+   */
+  isItemFiltered?(this: Item, value: string): boolean;
+  /**
+   * Called on each item when the filter changes.
+   * By default, toggles the `hidden` attribute on the item
+   */
+  setItemHidden?(this: Item, hidden: boolean): void;
+}
+
+/**
+ * @summary Implements the WAI-ARIA pattern [Editable Combobox with Both List and Inline Autocomplete].
+ *
+ * Combobox with keyboard and pointer navigation, using the aria-activedescendant pattern.
+ *
+ * WARNING: Safari VoiceOver does not support aria-activedescendant, so Safari users
+ * rely on the combobox input value being announced when navigating the listbox with the keyboard.
+ * We have erred on the side that it may be less-broken to avoid announcing disabled items in that
+ * case, rather than announcing the disabled items value without indicating that it is disabled.
+ * @see (https://bugs.webkit.org/show_bug.cgi?id=269026)
+ *
+ * [pattern]: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/
+ */
+export class ComboboxController<
+  Item extends HTMLElement
+> implements ReactiveController {
+  public static of<T extends HTMLElement>(
+    host: ReactiveControllerHost,
+    options: ComboboxControllerOptions<T>,
+  ): ComboboxController<T> {
+    return new ComboboxController(host, options);
+  }
+
+  /**
+   * Whether the `ariaActiveDescendantElement` IDL attribute is supported for cross-root ARIA.
+   */
+  public static get canControlLightDom(): boolean {
+    return ActivedescendantController.canControlLightDom;
+  }
+
+  static #alert?: HTMLElement;
+
+  static #alertTemplate = document.createElement('template');
+
+  private static langs = [
+    'en',
+    'es',
+    'de',
+    'fr',
+    'it',
+    'ja',
+    'zh',
+  ] as const;
+
+  private static langsRE = new RegExp(ComboboxController.langs.join('|'));
+
+  static {
+    // apply visually-hidden styles
+    this.#alertTemplate.innerHTML = `
+      <div role="alert" style="
+         border: 0;
+         clip: rect(0, 0, 0, 0);
+         block-size: 1px;
+         margin: -1px;
+         overflow: hidden;
+         padding: 0;
+         position: absolute;
+         white-space: nowrap;
+         inline-size: 1px;
+        "></div>
+      `;
+  }
+
+  private options: RequireProps<ComboboxControllerOptions<Item>,
+    | 'isItemDisabled'
+    | 'isItem'
+    | 'isItemFiltered'
+    | 'getItemValue'
+    | 'getOrientation'
+    | 'getComboboxValue'
+    | 'setComboboxValue'
+    | 'setItemHidden'
+  >;
+
+  #lb: ListboxController<Item>;
+  #fc?: ATFocusController<Item>;
+  #preventListboxGainingFocus = false;
+  #input: HTMLElement | null = null;
+  #button: HTMLElement | null = null;
+  #listbox: HTMLElement | null = null;
+  #buttonInitialRole: string | null = null;
+  #mo = new MutationObserver(() => this.#initItems());
+  #microcopy = new Map<string, Record<Lang, string>>(Object.entries({
+    dimmed: {
+      en: 'dimmed',
+      es: 'atenuada',
+      de: 'gedimmt',
+      it: 'oscurato',
+      fr: 'atténué',
+      ja: '暗くなった',
+      zh: '变暗',
+    },
+    selected: {
+      en: 'selected',
+      es: 'seleccionado',
+      de: 'ausgewählt',
+      fr: 'choisie',
+      it: 'selezionato',
+      ja: '選ばれた',
+      zh: '选',
+    },
+    of: {
+      en: 'of',
+      es: 'de',
+      de: 'von',
+      fr: 'sur',
+      it: 'di',
+      ja: '件目',
+      zh: '的',
+    },
+  }));
+
+  private constructor(
+    public host: ReactiveControllerHost,
+    options: ComboboxControllerOptions<Item>,
+  ) {
+    host.addController(this);
+    this.options = {
+      isItem,
+      getItemValue,
+      isItemFiltered,
+      isItemDisabled,
+      getComboboxValue,
+      setComboboxValue,
+      setItemHidden,
+      getOrientation: () => 'vertical',
+      ...options,
+    };
+    this.#lb = ListboxController.of(host, {
+      isItem: this.options.isItem,
+      getItemsContainer: this.options.getListboxElement,
+      getControlsElements: () => [this.#button, this.#input].filter(x => !!x),
+      getATFocusedItem: () => this.items[this.#fc?.atFocusedItemIndex ?? -1] ?? null,
+      isItemDisabled: this.options.isItemDisabled,
+      setItemSelected: this.options.setItemSelected,
+    });
+  }
+
+  /** All items */
+  get items(): Item[] {
+    return this.#lb.items;
+  }
+
+  set items(value: Item[]) {
+    this.#lb.items = value;
+  }
+
+  /** Whether the combobox is disabled */
+  get disabled() {
+    return this.#lb.disabled;
+  }
+
+  set disabled(value: boolean) {
+    this.#lb.disabled = value;
+  }
+
+  /** Whether multiselect is enabled */
+  get multi() {
+    return this.#lb.multi;
+  }
+
+  set multi(value: boolean) {
+    this.#lb.multi = value;
+  }
+
+  /** The current selection: a list of items */
+  get selected() {
+    return this.#lb.selected;
+  }
+
+  set selected(value: Item[]) {
+    this.#lb.selected = value;
+  }
+
+  get #hasTextInput() {
+    return this.options.getComboboxInput();
+  }
+
+  get #focusedItem() {
+    return this.#fc?.items.at(Math.max(this.#fc?.atFocusedItemIndex ?? -1, 0)) ?? null;
+  }
+
+  get #element() {
+    if (this.host instanceof HTMLElement) {
+      return this.host;
+    } else if (this.options.getListboxElement() instanceof HTMLElement) {
+      return this.options.getListboxElement();
+    }
+  }
+
+  async hostConnected(): Promise<void> {
+    await this.host.updateComplete;
+    this.hostUpdated();
+  }
+
+  hostUpdated(): void {
+    if (!this.#fc) {
+      this.#init();
+    }
+    const expanded = this.options.isExpanded();
+    this.#button?.setAttribute('aria-expanded', String(expanded));
+    this.#input?.setAttribute('aria-expanded', String(expanded));
+    if (this.#hasTextInput) {
+      this.#button?.setAttribute('tabindex', '-1');
+    } else {
+      this.#button?.removeAttribute('tabindex');
+    }
+    this.#initLabels();
+  }
+
+  hostDisconnected(): void {
+    this.#fc?.hostDisconnected();
+  }
+
+  /**
+   * Order of operations is important
+   */
+  #init() {
+    this.#initListbox();
+    this.#initItems();
+    this.#initButton();
+    this.#initInput();
+    this.#initLabels();
+    this.#initController();
+  }
+
+  #initListbox() {
+    this.#mo.disconnect();
+    this.#listbox?.removeEventListener('focusout', this.#onFocusoutListbox);
+    this.#listbox?.removeEventListener('keydown', this.#onKeydownListbox);
+    this.#listbox?.removeEventListener('click', this.#onClickListbox);
+    this.#listbox = this.options.getListboxElement();
+    if (!this.#listbox) {
+      throw new Error('ComboboxController getListboxElement() option must return an element');
+    }
+    this.#listbox.addEventListener('focusout', this.#onFocusoutListbox);
+    this.#listbox.addEventListener('keydown', this.#onKeydownListbox);
+    this.#listbox.addEventListener('click', this.#onClickListbox);
+    this.#listbox.id ??= getRandomId();
+    this.#mo.observe(this.#listbox, { childList: true });
+  }
+
+  #initButton() {
+    this.#button?.removeEventListener('click', this.#onClickButton);
+    this.#button?.removeEventListener('keydown', this.#onKeydownButton);
+    this.#button = this.options.getToggleButton();
+    if (!this.#button) {
+      throw new Error('ComboboxController getToggleButton() option must return an element');
+    }
+    this.#buttonInitialRole = this.#button.role;
+    this.#button.role = 'combobox';
+    this.#button.setAttribute('aria-controls', this.#listbox?.id ?? '');
+    this.#button.addEventListener('click', this.#onClickButton);
+    this.#button.addEventListener('keydown', this.#onKeydownButton);
+  }
+
+  #initInput() {
+    this.#input?.removeEventListener('click', this.#onClickButton);
+    this.#input?.removeEventListener('keyup', this.#onKeyupInput);
+    this.#input?.removeEventListener('keydown', this.#onKeydownInput);
+
+    this.#input = this.options.getComboboxInput();
+    if (this.#input && !('value' in this.#input)) {
+      throw new Error(`ComboboxController getToggleInput() option must return an element with a value property`);
+    } else if (this.#input) {
+      this.#input.role = 'combobox';
+      this.#button!.role = this.#buttonInitialRole;
+      this.#input.setAttribute('aria-autocomplete', 'both');
+      this.#input.setAttribute('aria-controls', this.#listbox?.id ?? '');
+      this.#input.addEventListener('click', this.#onClickButton);
+      this.#input.addEventListener('keyup', this.#onKeyupInput);
+      this.#input.addEventListener('keydown', this.#onKeydownInput);
+    }
+  }
+
+  #initLabels() {
+    const labels = InternalsController.getLabels(this.host)
+                ?? this.#element?.ariaLabelledByElements
+                ?? [];
+    const label = this.options.getFallbackLabel()
+                  || this.#element?.ariaLabelledByElements?.map(x => x.textContent).join('')
+                  || null;
+
+    for (const element of [this.#button, this.#listbox, this.#input].filter(x => !!x)) {
+      if ('ariaLabelledByElements' in HTMLElement.prototype && labels.filter(x => !!x).length) {
+        element.ariaLabelledByElements = [...labels ?? []];
+      } else {
+        element.ariaLabel = label;
+      }
+    }
+  }
+
+  #initController() {
+    this.#fc?.hostDisconnected();
+    const { getOrientation } = this.options;
+    const getItems = () => this.items;
+    const getItemsContainer = () => this.#listbox;
+    if (this.#hasTextInput) {
+      this.#fc = ActivedescendantController.of(this.host, {
+        getItems, getItemsContainer, getOrientation,
+        getActiveDescendantContainer: () => this.#input,
+        getControlsElements: () => [this.#button, this.#input].filter(x => !!x),
+        setItemActive: this.options.setItemActive,
+      });
+    } else {
+      this.#fc = RovingTabindexController.of(this.host, {
+        getItems, getItemsContainer, getOrientation,
+        getControlsElements: () => [this.#button].filter(x => !!x),
+      });
+    }
+  }
+
+  #initItems() {
+    if (this.#listbox) {
+      this.items = this.options.getItems();
+    }
+  }
+
+  async #show(): Promise<void> {
+    const success = await this.options.requestShowListbox();
+    if (success !== false && !this.#hasTextInput) {
+      if (!this.#preventListboxGainingFocus) {
+        (this.#focusedItem ?? this.#fc?.items.at(0))?.focus();
+        this.#preventListboxGainingFocus = false;
+      }
+    }
+  }
+
+  async #hide(): Promise<void> {
+    await this.options.requestHideListbox();
+  }
+
+  async #toggle() {
+    if (this.options.isExpanded()) {
+      return this.#hide();
+    } else {
+      return this.#show();
+    }
+  }
+
+  #translate(key: string, lang: Lang) {
+    const strings = this.#microcopy.get(key);
+    return strings?.[lang] ?? key;
+  }
+
+  // TODO(bennypowers): perhaps move this to ActivedescendantController
+  #announce(item: Item) {
+    const value = this.options.getItemValue.call(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';
+    if (this.options.isItemDisabled.call(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')) {
+      if (langKey === 'ja') {
+        text += `, (${item.getAttribute('aria-setsize')} 件中 ${item.getAttribute('aria-posinset')} 件目)`;
+      } else {
+        text += `, (${item.getAttribute('aria-posinset')} ${this.#translate('of', langKey)} ${item.getAttribute('aria-setsize')})`;
+      }
+    }
+    ComboboxController.#alert.lang = lang;
+    ComboboxController.#alert.innerText = text;
+    document.body.append(ComboboxController.#alert);
+  }
+
+  #onClickButton = (event: Event) => {
+    if (!this.options.isExpanded()) {
+      this.#show();
+    } else {
+      this.#hide();
+    }
+  };
+
+  #onClickListbox = (event: MouseEvent) => {
+    if (!this.multi && event.composedPath().some(this.options.isItem)) {
+      this.#hide();
+    }
+  };
+
+  /**
+   * Handle keypresses on the input
+   * ## `Down Arrow`
+   * - If the textbox is not empty and the listbox is displayed,
+   *   moves visual focus to the first suggested value.
+   * - If the textbox is empty and the listbox is not displayed,
+   *   opens the listbox and moves visual focus to the first option.
+   * - In both cases DOM focus remains on the textbox.
+   *
+   * ## `Alt + Down Arrow`
+   * Opens the listbox without moving focus or changing selection.
+   *
+   * ## `Up Arrow`
+   * - If the textbox is not empty and the listbox is displayed,
+   *   moves visual focus to the last suggested value.
+   * - If the textbox is empty, first opens the listbox if it is not already displayed
+   *   and then moves visual focus to the last option.
+   * - In both cases DOM focus remains on the textbox.
+   *
+   * ## `Enter`
+   * Closes the listbox if it is displayed.
+   *
+   * ## `Escape`
+   * - If the listbox is displayed, closes it.
+   * - If the listbox is not displayed, clears the textbox.
+   *
+   * ## Standard single line text editing keys
+   * - Keys used for cursor movement and text manipulation,
+   *   such as `Delete` and `Shift + Right Arrow`.
+   * - An HTML `input` with `type="text"` is used for the textbox so the browser will provide
+   *   platform-specific editing keys.
+   *
+   * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list
+   * @param event keydown event
+   */
+  #onKeydownInput = (event: KeyboardEvent) => {
+    if (event.ctrlKey || event.shiftKey || !this.#input) {
+      return;
+    }
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        if (!this.options.isExpanded()) {
+          this.#preventListboxGainingFocus = event.altKey;
+          this.#show();
+        }
+        break;
+      case 'Enter':
+        if (!this.multi) {
+          this.#hide();
+        }
+        break;
+      case 'Escape':
+        if (!this.options.isExpanded()) {
+          this.options.setComboboxValue.call(this.#input, '');
+          this.host.requestUpdate();
+        }
+        this.#hide();
+        break;
+      case 'Alt':
+      case 'AltGraph':
+      case 'Shift':
+      case 'Control':
+      case 'Fn':
+      case 'Symbol':
+      case 'Hyper':
+      case 'Super':
+      case 'Meta':
+      case 'CapsLock':
+      case 'FnLock':
+      case 'NumLock':
+      case 'Tab':
+      case 'ScrollLock':
+      case 'SymbolLock':
+      case ' ':
+        break;
+      default:
+        if (!this.options.isExpanded()) {
+          this.#show();
+        }
+    }
+  };
+
+  /**
+   * Populates the combobox input with the focused value when navigating the listbox,
+   * and filters the items when typing.
+   * @param event keyup event
+   */
+  #onKeyupInput = (event: KeyboardEvent) => {
+    if (!this.#input) {
+      return;
+    }
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+        /**
+         * Safari VoiceOver does not support aria-activedescendant, so we must.
+         * approximate the correct behaviour by constructing a visually-hidden alert role
+         * @see (https://bugs.webkit.org/show_bug.cgi?id=269026)
+         */
+        if (this.#focusedItem
+            && this.options.getComboboxInput()
+            && navigator.userAgent.includes('AppleWebKit')) {
+          this.#announce(this.#focusedItem);
+        }
+        break;
+      default: {
+        let value: string;
+        for (const item of this.items) {
+          const hidden =
+              !!this.options.isExpanded()
+           && !!(value = this.options.getComboboxValue.call(this.#input))
+           && this.options.isItemFiltered?.call(item, value)
+           || false;
+          this.options.setItemHidden.call(item, hidden);
+        }
+      }
+    }
+  };
+
+  #onKeydownButton = (event: KeyboardEvent) => {
+    if (this.#hasTextInput) {
+      return this.#onKeydownInput(event);
+    } else {
+      return this.#onKeydownToggleButton(event);
+    }
+  };
+
+  #onKeydownListbox = (event: KeyboardEvent) => {
+    if (!this.#hasTextInput) {
+      switch (event.key) {
+        case 'Home':
+        case 'End':
+          this.#onKeydownToggleButton(event);
+          break;
+        case 'Escape':
+          this.#hide();
+          this.#button?.focus();
+          break;
+        case 'Enter':
+        case ' ': {
+          const eventItem = event.composedPath().find(this.options.isItem);
+          if (eventItem
+              && !this.multi
+              && this.options.isExpanded()
+              && !this.options.isItemDisabled.call(eventItem)
+          ) {
+            this.#hide();
+            this.#button?.focus();
+          }
+        }
+      }
+    }
+  };
+
+  #onFocusoutListbox = (event: FocusEvent) => {
+    if (!this.#hasTextInput && this.options.isExpanded()) {
+      const root = this.#element?.getRootNode();
+      if ((root instanceof ShadowRoot || root instanceof Document)
+          && !this.items.includes(event.relatedTarget as Item)
+      ) {
+        this.#hide();
+      }
+    }
+  };
+
+  #onKeydownToggleButton = async (event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        if (!this.options.isExpanded()) {
+          this.#show();
+        }
+        break;
+      case 'Home':
+        if (!this.options.isExpanded()) {
+          await this.#show();
+        }
+        if (this.#fc) {
+          this.#fc.atFocusedItemIndex = 0;
+        }
+        break;
+      case 'End':
+        if (!this.options.isExpanded()) {
+          await this.#show();
+        }
+        if (this.#fc) {
+          this.#fc.atFocusedItemIndex = this.items.length - 1;
+        }
+        break;
+      case ' ':
+      case 'Enter':
+        // prevent scroll
+        event.preventDefault();
+        await this.#toggle();
+        await this.host.updateComplete;
+        if (!this.options.isExpanded()) {
+          this.#button?.focus();
+        }
+        break;
+    }
+  };
+
+  /**
+   * For Browsers which do not support `ariaActiveDescendantElement`, we must clone
+   * the listbox items into the same root as the combobox input
+   * Call this method to return either an array of (cloned) list box items, to be placed in your
+   * shadow template, or nothing in the case the browser supports cross-root aria.
+   */
+  public renderItemsToShadowRoot(): Node[] | typeof nothing {
+    if (this.#fc instanceof ActivedescendantController) {
+      return this.#fc.renderItemsToShadowRoot();
+    } else {
+      return nothing;
+    }
+  }
+}
diff --git a/core/pfe-core/controllers/internals-controller.ts b/core/pfe-core/controllers/internals-controller.ts
index 1636f91320..2c8ecfc709 100644
--- a/core/pfe-core/controllers/internals-controller.ts
+++ b/core/pfe-core/controllers/internals-controller.ts
@@ -49,8 +49,9 @@ function aria(
       return internals[key];
     },
     set(this: InternalsController, value: string | null) {
-      // @ts-expect-error: shamone!
+      // @ts-expect-error: ya know it!
       const internals = this.attachOrRetrieveInternals();
+      // @ts-expect-error: shamone!
       internals[key] = value;
       this.host.requestUpdate();
     },
@@ -78,6 +79,10 @@ export class InternalsController implements ReactiveController, ARIAMixin {
   declare readonly willValidate: ElementInternals['willValidate'];
   declare readonly validationMessage: ElementInternals['validationMessage'];
 
+  public static getLabels(host: ReactiveControllerHost): Element[] {
+    return Array.from(this.instances.get(host)?.internals.labels ?? []) as Element[];
+  }
+
   public static of(
     host: ReactiveControllerHost,
     options?: InternalsControllerOptions,
@@ -250,7 +255,7 @@ export class InternalsController implements ReactiveController, ARIAMixin {
     this.options.getHTMLElement ??= getHTMLElement;
     for (const [key, val] of Object.entries(aria)) {
       if (isARIAMixinProp(key)) {
-        this[key] = val;
+        this[key as keyof this] = val as this[keyof this];
       }
     }
   }
@@ -281,3 +286,17 @@ export class InternalsController implements ReactiveController, ARIAMixin {
     this.internals.form?.reset();
   }
 }
+
+/** @see https://w3c.github.io/aria/#ref-for-dom-ariamixin-ariaactivedescendantelement-1 */
+declare global {
+  interface ARIAMixin {
+    ariaActiveDescendantElement: Element | null;
+    ariaControlsElements: readonly Element[] | null;
+    ariaDescribedByElements: readonly Element[] | null;
+    ariaDetailsElements: readonly Element[] | null;
+    ariaErrorMessageElements: readonly Element[] | null;
+    ariaFlowToElements: readonly Element[] | null;
+    ariaLabelledByElements: readonly Element[] | null;
+    ariaOwnsElements: readonly Element[] | null;
+  }
+}
diff --git a/core/pfe-core/controllers/listbox-controller.ts b/core/pfe-core/controllers/listbox-controller.ts
index b89efe79d9..e0d4a7aebb 100644
--- a/core/pfe-core/controllers/listbox-controller.ts
+++ b/core/pfe-core/controllers/listbox-controller.ts
@@ -1,27 +1,105 @@
-import { isServer, type ReactiveController, type ReactiveControllerHost } from 'lit';
-
-export interface ListboxAccessibilityController<
-  Item extends HTMLElement
-> extends ReactiveController {
-  items: Item[];
-  activeItem?: Item;
-  nextItem?: Item;
-  prevItem?: Item;
-  firstItem?: Item;
-  lastItem?: Item;
-  updateItems(items: Item[]): void;
-  setActiveItem(item: Item): void;
-}
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { RequireProps } from '../core.ts';
+
+import { isServer } from 'lit';
+import { arraysAreEquivalent } from '../functions/arraysAreEquivalent.js';
 
 /**
  * Filtering, multiselect, and orientation options for listbox
  */
-export interface ListboxConfigOptions<T extends HTMLElement> {
+export interface ListboxControllerOptions<Item extends HTMLElement> {
+  /**
+   * Whether the listbox supports multiple selections.
+   */
   multi?: boolean;
-  a11yController: ListboxAccessibilityController<T>;
-  getHTMLElement(): HTMLElement | null;
-  requestSelect(option: T, force?: boolean): boolean;
-  isSelected(option: T): boolean;
+  /**
+   * Optional callback to control the selection behavior of items. By default, ListboxController
+   * will set the `aria-selected` attribute. When overriding this option, it will call it on your
+   * element with the selected state.
+   * Callers **must** ensure that the correct ARIA state is set.
+   */
+  setItemSelected?(this: Item, selected: boolean): void;
+  /**
+   * Optional predicate to assertain whether a custom element item is disabled or not
+   * By default, if the item matches any of these conditions, it is considered disabled:
+   * 1. it's `disabled` DOM property is `true`
+   * 1. it has the `aria-disabled="true"` attribute
+   * 2. it has the `disabled` attribute present
+   * 3. it matches the `:disabled` pseudo selector
+   */
+  isItemDisabled?(this: Item): boolean;
+  /**
+   * Predicate which determines if a given element is in fact an item
+   * instead of e.g a presentational divider. By default, elements must meet the following criteria
+   * 1. element a child of a listbox role,
+   * 2. element does not have role="presentation"
+   * 2. element is not an `<hr>`
+   * **NB**: When overriding, you must avoid outside references. This predicate must
+   * only consider the element itself, without reference to the host element's items array.
+   * @example ```js
+   *          isItem: (item) => item instanceof MyCustomItem
+   *          ```
+   */
+  isItem?(item: EventTarget | null): item is Item;
+  /**
+   * Function returning the item which currently has assistive technology focus.
+   * In most cases, this should be the `atFocusedItem` of an ATFocusController
+   * i.e. RovingTabindexController or ActivedescendantController.
+   *
+   */
+  getATFocusedItem(): Item | null;
+  /**
+   * Function returning the DOM node which is the direct parent of the item elements
+   * Defaults to the controller host.
+   * If the controller host is not an HTMLElement, this *must* be set
+   */
+  getItemsContainer?(): HTMLElement | null;
+  /**
+   * Optional function returning an additional DOM node which controls the listbox, e.g.
+   * a combobox input.
+   */
+  getControlsElements?(): HTMLElement[];
+}
+
+/**
+ * This is the default method for setting the selected state on an item element
+ * @param selected is this item selected
+ */
+function setItemSelected<Item extends HTMLElement>(this: Item, selected: boolean) {
+  if (selected) {
+    this.setAttribute('aria-selected', 'true');
+  } else {
+    this.removeAttribute('aria-selected');
+  }
+}
+
+/**
+ * @param item possible disabled item
+ * @package do not import this outside of `@patternfly/pfe-core`, it is subject to change at any time
+ */
+export function isItem<Item extends HTMLElement>(item: EventTarget | null): item is Item {
+  return item instanceof Element
+    && item?.parentElement?.role === 'listbox'
+    && item?.role !== 'presentation'
+    && item?.localName !== 'hr';
+}
+
+/**
+ * This is a fib. aria-disabled might not be present on an element that uses internals,
+ * and the `disabled` attribute may not accurately represent the disabled state.
+ * short of patching the `attachInternals` constructor, it may not be possible at
+ * runtime to know with certainty that an arbitrary custom element is disabled or not.
+ * @param item possibly disabled item
+ * @package do not import this outside of `@patternfly/pfe-core`, it is subject to change at any time
+ */
+export function isItemDisabled<Item extends HTMLElement>(this: Item): boolean {
+  if ('disabled' in this && typeof this.disabled === 'boolean') {
+    return this.disabled;
+  } else {
+    return this.getAttribute('aria-disabled') === 'true'
+        || this.hasAttribute('disabled')
+        || this.matches(':disabled');
+  }
 }
 
 let constructingAllowed = false;
@@ -31,145 +109,284 @@ let constructingAllowed = false;
  * patterns for implementing keyboard interactions with listbox patterns,
  * provide a secondary controller (either RovingTabindexController or
  * ActiveDescendantController) to complete the implementation.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_vs_selection
+ *
+ * > Occasionally, it may appear as if two elements on the page have focus at the same time.
+ * > For example, in a multi-select list box, when an option is selected it may be greyed.
+ * > Yet, the focus indicator can still be moved to other options, which may also be selected.
+ * > Similarly, when a user activates a tab in a tablist, the selected state is set on the tab
+ * > and its visual appearance changes. However, the user can still navigate, moving the focus
+ * > indicator elsewhere on the page while the tab retains its selected appearance and state.
+ * >
+ * > Focus and selection are quite different. From the keyboard user's perspective,
+ * > focus is a pointer, like a mouse pointer; it tracks the path of navigation.
+ * > There is only one point of focus at any time and all operations take place at the
+ * > point of focus. On the other hand, selection is an operation that can be performed in
+ * > some widgets, such as list boxes, trees, and tablists. If a widget supports only single
+ * > selection, then only one item can be selected and very often the selected state will simply
+ * > follow the focus when focus is moved inside of the widget.
+ * > That is, in some widgets, moving focus may also perform the select operation.
+ * > However, if the widget supports multiple selection, then more than one item can be in a
+ * > selected state, and keys for moving focus do not perform selection. Some multi-select widgets
+ * > do support key commands that both move focus and change selection, but those keys are
+ * > different from the normal navigation keys. Finally, when focus leaves a widget that includes
+ * > a selected element, the selected state persists.
+ * >
+ * > From the developer's perspective, the difference is simple -- the focused element is the
+ * > active element (document.activeElement). Selected elements are elements that have
+ * > aria-selected="true".
+ * >
+ * > With respect to focus and the selected state, the most important considerations for designers
+ * > and developers are:
+ * >
+ * > - The visual focus indicator must always be visible.
+ * > - The selected state must be visually distinct from the focus indicator.
  */
 export class ListboxController<Item extends HTMLElement> implements ReactiveController {
   private static instances = new WeakMap<ReactiveControllerHost, ListboxController<HTMLElement>>();
 
   public static of<Item extends HTMLElement>(
     host: ReactiveControllerHost,
-    options: ListboxConfigOptions<Item>,
+    options: ListboxControllerOptions<Item>,
   ): ListboxController<Item> {
     constructingAllowed = true;
-    const instance =
-      ListboxController.instances.get(host) ?? new ListboxController<Item>(host, options);
+    const instance = new ListboxController<Item>(host, options);
     constructingAllowed = false;
     return instance as ListboxController<Item>;
   }
 
-  private constructor(
-    public host: ReactiveControllerHost,
-    // this should ideally be ecma #private, but tsc/esbuild tooling isn't up to scratch yet
-    // so for now we rely on the underscore convention to avoid compile-time errors
-    // try refactoring after updating tooling dependencies
-    private _options: ListboxConfigOptions<Item>,
-  ) {
-    if (!constructingAllowed) {
-      throw new Error('ListboxController must be constructed with `ListboxController.of()`');
-    }
-    if (!isServer
-        && !(host instanceof HTMLElement)
-        && typeof _options.getHTMLElement !== 'function') {
-      throw new Error(
-        `ListboxController requires the host to be an HTMLElement, or for the initializer to include a \`getHTMLElement()\` function`,
-      );
-    }
-    if (!_options.a11yController) {
-      throw new Error(
-        `ListboxController requires an additional keyboard accessibility controller. Provide either a RovingTabindexController or an ActiveDescendantController`,
-      );
-    }
-    ListboxController.instances.set(host, this);
-    this.host.addController(this);
-    if (this.element?.isConnected) {
-      this.hostConnected();
-    }
-  }
-
   /** Current active descendant when shift key is pressed */
   #shiftStartingItem: Item | null = null;
 
-  /** All options that will not be hidden by a filter */
+  #options: RequireProps<ListboxControllerOptions<Item>,
+    | 'setItemSelected'
+    | 'isItemDisabled'
+    | 'isItem'
+  >;
+
+  /** All items */
   #items: Item[] = [];
 
+  #selectedItems = new Set<Item>;
+
   #listening = false;
 
   /** Whether listbox is disabled */
   disabled = false;
 
-  /** Current active descendant in listbox */
-  get activeItem(): Item | undefined {
-    return this.options.find(option =>
-      option === this._options.a11yController.activeItem) || this._options.a11yController.firstItem;
+  get container(): HTMLElement {
+    return this.#options.getItemsContainer?.() ?? this.host as unknown as HTMLElement;
+  }
+
+  get controlsElements(): HTMLElement[] {
+    const elementOrElements = this.#options.getControlsElements?.();
+    return [elementOrElements].filter(x => !!x).flat();
   }
 
-  get nextItem(): Item | undefined {
-    return this._options.a11yController.nextItem;
+  get multi(): boolean {
+    return !!this.#options.multi;
   }
 
-  get options(): Item[] {
+  set multi(v: boolean) {
+    this.#options.multi = v;
+    this.host.requestUpdate();
+  }
+
+  get items(): Item[] {
     return this.#items;
   }
 
   /**
-   * array of options which are selected
+   * register's the host's Item elements as listbox controller items
+   * sets aria-setsize and aria-posinset on items
+   * @param items items
+   */
+  set items(items: Item[]) {
+    this.#items = items;
+    this.#items.forEach((item, index, _items) => {
+      item.ariaSetSize = _items.length.toString();
+      item.ariaPosInSet = (index + 1).toString();
+    });
+  }
+
+  /**
+   * sets the listbox value based on selected options
+   * @param selected item or items
    */
-  get selectedOptions(): Item[] {
-    return this.options.filter(option => this._options.isSelected(option));
+  set selected(selected: Item[]) {
+    if (!arraysAreEquivalent(selected, Array.from(this.#selectedItems))) {
+      this.#selectedItems = new Set(selected);
+      for (const item of this.items) {
+        this.#options.setItemSelected.call(item, this.#selectedItems.has(item));
+      }
+      this.host.requestUpdate();
+    }
   }
 
-  get value(): Item | Item[] {
-    const [firstItem] = this.selectedOptions;
-    return this._options.multi ? this.selectedOptions : firstItem;
+  /**
+   * array of options which are selected
+   */
+  get selected(): Item[] {
+    return [...this.#selectedItems];
   }
 
-  private get element() {
-    return this._options.getHTMLElement();
+  private constructor(
+    public host: ReactiveControllerHost,
+    options: ListboxControllerOptions<Item>,
+  ) {
+    this.#options = { setItemSelected, isItemDisabled, isItem, ...options };
+    if (!constructingAllowed) {
+      throw new Error('ListboxController must be constructed with `ListboxController.of()`');
+    }
+    if (!isServer
+        && !(host instanceof HTMLElement)
+        && typeof options.getItemsContainer !== 'function') {
+      throw new Error([
+        'ListboxController requires the host to be an HTMLElement',
+        'or for the initializer to include a getItemsContainer() function',
+      ].join(' '));
+    }
+    const instance = ListboxController.instances.get(host) as unknown as ListboxController<Item>;
+    if (instance) {
+      return instance as ListboxController<Item>;
+    }
+    ListboxController.instances.set(host, this as unknown as ListboxController<HTMLElement>);
+    this.host.addController(this);
+    this.multi = this.#options.multi ?? false;
+    if (this.container?.isConnected) {
+      this.hostConnected();
+    }
   }
 
   async hostConnected(): Promise<void> {
     if (!this.#listening) {
       await this.host.updateComplete;
-      this.element?.addEventListener('click', this.#onClick);
-      this.element?.addEventListener('focus', this.#onFocus);
-      this.element?.addEventListener('keydown', this.#onKeydown);
-      this.element?.addEventListener('keyup', this.#onKeyup);
+      this.container?.addEventListener('click', this.#onClick);
+      this.container?.addEventListener('keydown', this.#onKeydown);
+      this.container?.addEventListener('keyup', this.#onKeyup);
+      this.controlsElements.forEach(el => el.addEventListener('keydown', this.#onKeydown));
+      this.controlsElements.forEach(el => el.addEventListener('keyup', this.#onKeyup));
       this.#listening = true;
     }
   }
 
   hostUpdated(): void {
-    this.element?.setAttribute('role', 'listbox');
-    this.element?.setAttribute('aria-disabled', String(!!this.disabled));
-    this.element?.setAttribute('aria-multi-selectable', String(!!this._options.multi));
-    for (const option of this._options.a11yController.items) {
-      if (this._options.a11yController.activeItem === option) {
-        option.setAttribute('aria-selected', 'true');
-      } else {
-        option.removeAttribute('aria-selected');
-      }
-    }
+    this.container?.setAttribute('role', 'listbox');
+    this.container?.setAttribute('aria-disabled', String(!!this.disabled));
+    this.container?.setAttribute('aria-multiselectable', String(!!this.#options.multi));
   }
 
   hostDisconnected(): void {
-    this.element?.removeEventListener('click', this.#onClick);
-    this.element?.removeEventListener('focus', this.#onFocus);
-    this.element?.removeEventListener('keydown', this.#onKeydown);
-    this.element?.removeEventListener('keyup', this.#onKeyup);
+    this.container?.removeEventListener('click', this.#onClick);
+    this.container?.removeEventListener('keydown', this.#onKeydown);
+    this.container?.removeEventListener('keyup', this.#onKeyup);
+    this.controlsElements.forEach(el => el.removeEventListener('keydown', this.#onKeydown));
+    this.controlsElements.forEach(el => el.removeEventListener('keyup', this.#onKeyup));
     this.#listening = false;
   }
 
-  #getEnabledOptions(options = this.options) {
-    return options.filter(option => !option.ariaDisabled && !option.closest('[disabled]'));
+  public isSelected(item: Item): boolean {
+    return this.#selectedItems.has(item);
   }
 
-  #getEventOption(event: Event): Item | undefined {
-    return event
-        .composedPath()
-        .find(node => this.#items.includes(node as Item)) as Item | undefined;
-  }
-
-
   /**
-   * handles focusing on an option:
-   * updates roving tabindex and active descendant
-   * @param event focus event
+   * In the case where aria IDL attributes are not supported,
+   * we need to correlate the item in the event path (i.e. the shadow dom clone)
+   * with the item in listbox controller's root (i.e. the hidden light dom original)
+   * XXX: as long as there is no DOM preceeding the shadow root clones, this will work
+   * @param event click or keyboard event
    */
-  #onFocus = (event: FocusEvent) => {
-    const target = this.#getEventOption(event);
-    if (target && target !== this._options.a11yController.activeItem) {
-      this._options.a11yController.setActiveItem(target);
+  #getItemFromEvent(event: Event): Item | null {
+    // NOTE(bennypowers): I am aware that this function *sucks*
+    // you're more than welcome to improve it.
+    // make sure there are unit tests first
+    const path = event.composedPath();
+    const tabindexed = this.items.some(x => x.hasAttribute('tabindex'));
+    if (tabindexed) {
+      const item = path.find(this.#options.isItem);
+      if (item) {
+        return item;
+      }
+    } else if (this.#options.isItem(event.target)
+               && event.target.getRootNode() !== this.container.getRootNode()
+               && 'ariaActiveDescendantElement' in HTMLElement.prototype) {
+      return event.target;
+    } else if (event.target instanceof HTMLElement && event.target.ariaActiveDescendantElement) {
+      return event.target.ariaActiveDescendantElement as Item;
+    } else if (event.type === 'click'
+               && this.#options.isItem(event.target)
+               && event.target.id) {
+      const element = event.target;
+      const root = element.getRootNode();
+      if (root instanceof ShadowRoot && this.container.getRootNode() === root) {
+        const shadowRootListboxElement = this.container;
+        const shadowRootItem = element;
+        if (shadowRootItem && shadowRootListboxElement) {
+          if (this.items.includes(shadowRootItem)) {
+            return shadowRootItem;
+          } else {
+            const index =
+              Array.from(shadowRootListboxElement?.children ?? [])
+                  .filter(this.#options.isItem)
+                  .filter(x => !x.hidden)
+                  .indexOf(shadowRootItem);
+            return this.#items.filter(x => !x.hidden)[index];
+          }
+        }
+      }
+    } else {
+      // otherwise, query the root (e.g. shadow root) for the associated element
+      const element = event.target as HTMLElement;
+
+      const root = element.getRootNode() as ShadowRoot | Document;
+
+      const shadowRootListboxElement =
+          this.#options.isItem(element) ? this.container
+        : root.getElementById(element?.getAttribute('aria-controls') ?? '');
+
+      const shadowRootHasActiveDescendantElement =
+        root.querySelector(`[aria-controls="${shadowRootListboxElement?.id}"][aria-activedescendant]`);
+
+      const shadowRootItemId =
+        shadowRootHasActiveDescendantElement?.getAttribute('aria-activedescendant');
+
+      const shadowRootItem =
+        shadowRootItemId && root.getElementById(shadowRootItemId) as Item | null;
+
+      if (shadowRootItem && shadowRootListboxElement) {
+        if (this.items.includes(shadowRootItem)) {
+          return shadowRootItem;
+        } else {
+          const index =
+            Array.from(shadowRootListboxElement?.children ?? [])
+                .filter(this.#options.isItem)
+                .filter(x => !x.hidden)
+                .indexOf(shadowRootItem);
+          return this.#items.filter(x => !x.hidden)[index];
+        }
+      }
+
+      const itemFromEventContainer =
+        shadowRootListboxElement ? shadowRootListboxElement
+      : path.find(x =>
+        x instanceof HTMLElement && x.role === 'listbox') as HTMLElement;
+
+      if (itemFromEventContainer) {
+        const possiblyShadowRootContainerItems = Array.from(itemFromEventContainer.children)
+            .filter(this.#options.isItem);
+
+        const index = possiblyShadowRootContainerItems
+            .findIndex(node => path.includes(node));
+
+        if (index >= 0) {
+          return this.items[index] ?? null;
+        }
+      }
     }
-  };
+
+    return null;
+  }
 
   /**
    * handles clicking on a listbox option:
@@ -178,26 +395,41 @@ export class ListboxController<Item extends HTMLElement> implements ReactiveCont
    * @param event click event
    */
   #onClick = (event: MouseEvent) => {
-    const target = this.#getEventOption(event);
-    if (target) {
-      const oldValue = this.value;
-      if (this._options.multi) {
-        if (!event.shiftKey) {
-          this._options.requestSelect(target, !this._options.isSelected(target));
-        } else if (this.#shiftStartingItem && target) {
-          this.#updateMultiselect(target, this.#shiftStartingItem);
-        }
-      } else {
+    const item = this.#getItemFromEvent(event);
+    this.#shiftStartingItem ??= this.#getItemFromEvent(event);
+    if (item && !this.#options.isItemDisabled.call(item)) {
+      // Case: single select?
+      //       just reset the selected list.
+      if (!this.multi) {
         // select target and deselect all other options
-        this.options.forEach(option => this._options.requestSelect(option, option === target));
-      }
-      if (target !== this._options.a11yController.activeItem) {
-        this._options.a11yController.setActiveItem(target);
-      }
-      if (oldValue !== this.value) {
-        this.host.requestUpdate();
+        this.selected = [item];
+      // Case: multi select, but no shift key
+      //       toggle target, keep all other previously selected
+      } else if (!event.shiftKey) {
+        this.selected = this.items.filter(possiblySelectedItem =>
+            this.#selectedItems.has(possiblySelectedItem) ? possiblySelectedItem !== item
+          : possiblySelectedItem === item);
+      // Case: multi select, with shift key
+      //       find all items between previously selected and target,
+      //       and select them (if reference item is selected) or deselect them (if reference item is deselected)
+      //       Do not wrap around from end to start, rather, only select withing the range of 0-end
+      } else {
+        const startingItem = this.#shiftStartingItem!;
+        // whether options will be selected (true) or deselected (false)
+        const selecting = this.#selectedItems.has(startingItem);
+        const [start, end] = [this.items.indexOf(startingItem), this.items.indexOf(item)].sort();
+        // de/select all options between active descendant and target
+        this.selected = this.items.filter((item, i) => {
+          if (i >= start && i <= end) {
+            return selecting;
+          } else {
+            return this.#selectedItems.has(item);
+          }
+        });
       }
     }
+    this.#shiftStartingItem = item;
+    this.host.requestUpdate();
   };
 
   /**
@@ -205,14 +437,8 @@ export class ListboxController<Item extends HTMLElement> implements ReactiveCont
    * @param event keyup event
    */
   #onKeyup = (event: KeyboardEvent) => {
-    const target = this.#getEventOption(event);
-    if (target && event.shiftKey && this._options.multi) {
-      if (this.#shiftStartingItem && target) {
-        this.#updateMultiselect(target, this.#shiftStartingItem);
-      }
-      if (event.key === 'Shift') {
-        this.#shiftStartingItem = null;
-      }
+    if (event.key === 'Shift') {
+      this.#shiftStartingItem = null;
     }
   };
 
@@ -222,132 +448,90 @@ export class ListboxController<Item extends HTMLElement> implements ReactiveCont
    * @param event keydown event
    */
   #onKeydown = (event: KeyboardEvent) => {
-    const target = this.#getEventOption(event);
+    const item = this.#getItemFromEvent(event);
 
-    if (!target || event.altKey || event.metaKey || !this.options.includes(target)) {
+    if (this.disabled || event.altKey || event.metaKey) {
       return;
     }
 
-    const first = this._options.a11yController.firstItem;
-    const last = this._options.a11yController.lastItem;
-
     // need to set for keyboard support of multiselect
-    if (event.key === 'Shift' && this._options.multi) {
-      this.#shiftStartingItem = this.activeItem ?? null;
+    if (event.key === 'Shift' && this.multi) {
+      this.#shiftStartingItem ??= this.#options.getATFocusedItem() ?? null;
     }
 
     switch (event.key) {
+      // ctrl+A de/selects all options
       case 'a':
       case 'A':
-        if (event.ctrlKey) {
-          // ctrl+A selects all options
-          this.#updateMultiselect(first, last, true);
+        if (event.ctrlKey
+            && (event.target === this.container
+                || this.#options.isItem(event.target))) {
+          const selectableItems = this.items.filter(item =>
+            !this.#options.isItemDisabled.call(item));
+          if (arraysAreEquivalent(this.selected, selectableItems)) {
+            this.selected = [];
+          } else {
+            this.selected = selectableItems;
+          }
           event.preventDefault();
         }
         break;
       case 'Enter':
+        // enter and space are only applicable if a listbox option is clicked
+        // an external text input should not trigger multiselect
+        if (item && !event.shiftKey) {
+          const focused = item;
+          this.#selectItem(focused, event.shiftKey);
+          event.preventDefault();
+        }
+        break;
+      case 'ArrowUp':
+        if (this.multi && event.shiftKey && this.#options.isItem(event.target)) {
+          const item = event.target;
+          this.selected = this.items.filter((x, i) =>
+            this.#selectedItems.has(x)
+            || i === this.items.indexOf(item) - 1)
+              .filter(x => !this.#options.isItemDisabled.call(x));
+        }
+        break;
+      case 'ArrowDown':
+        if (this.multi && event.shiftKey && this.#options.isItem(event.target)) {
+          const item = event.target;
+          this.selected = this.items.filter((x, i) =>
+            this.#selectedItems.has(x)
+            || i === this.items.indexOf(item) + 1)
+              .filter(x => !this.#options.isItemDisabled.call(x));
+        }
+        break;
       case ' ':
         // enter and space are only applicable if a listbox option is clicked
         // an external text input should not trigger multiselect
-        if (this._options.multi) {
-          if (event.shiftKey) {
-            this.#updateMultiselect(target);
-          } else if (!this.disabled) {
-            this._options.requestSelect(target, !this._options.isSelected(target));
-          }
-        } else {
-          this.#updateSingleselect();
+        if (item && event.target === this.container) {
+          this.#selectItem(item, event.shiftKey);
+          event.preventDefault();
+        } else if (this.#options.isItem(event.target)) {
+          this.#selectItem(event.target, event.shiftKey);
+          event.preventDefault();
         }
-        event.preventDefault();
         break;
       default:
         break;
     }
+    this.host.requestUpdate();
   };
 
-  /**
-   * handles change to options given previous options array
-   * @param oldOptions previous options list
-   */
-  #optionsChanged(oldOptions: Item[]) {
-    const setSize = this.#items.length;
-    if (setSize !== oldOptions.length
-     || !oldOptions.every((element, index) => element === this.#items[index])) {
-      this._options.a11yController.updateItems(this.options);
-    }
-  }
-
-  /**
-   * updates option selections for single select listbox
-   */
-  #updateSingleselect() {
-    if (!this._options.multi && !this.disabled) {
-      this.#getEnabledOptions()
-          .forEach(option =>
-            this._options.requestSelect(
-              option,
-              option === this._options.a11yController.activeItem,
-            ));
-    }
-  }
-
-  /**
-   * updates option selections for multiselectable listbox:
-   * toggles all options between active descendant and target
-   * @param currentItem item being added
-   * @param referenceItem item already selected.
-   * @param ctrlA is ctrl-a held down?
-   */
-  #updateMultiselect(
-    currentItem?: Item,
-    referenceItem = this.activeItem,
-    ctrlA = false,
-  ) {
-    if (referenceItem && this._options.multi && !this.disabled && currentItem) {
-      // select all options between active descendant and target
-      const [start, end] = [
-        this.options.indexOf(referenceItem),
-        this.options.indexOf(currentItem),
-      ].sort();
-      const options = [...this.options].slice(start, end + 1);
-
-      // by default CTRL+A will select all options
-      // if all options are selected, CTRL+A will deselect all options
-      const allSelected = this.#getEnabledOptions(options)
-          .filter(option => !this._options.isSelected(option))?.length === 0;
-
-      // whether options will be selected (true) or deselected (false)
-      const selected = ctrlA ? !allSelected : this._options.isSelected(referenceItem);
-      this.#getEnabledOptions(options).forEach(option =>
-        this._options.requestSelect(option, selected));
-
+  #selectItem(item: Item, shiftDown = false) {
+    if (this.#options.isItemDisabled.call(item)) {
+      return;
+    } else if (this.multi && shiftDown) {
       // update starting item for other multiselect
-      this.#shiftStartingItem = currentItem;
+      this.selected = [...this.selected, item];
+    } else if (this.multi && this.#selectedItems.has(item)) {
+      this.selected = this.selected.filter(x => x !== item);
+    } else if (this.multi) {
+      this.selected = this.selected.concat(item);
+    } else {
+      this.selected = [item];
     }
   }
-
-  /**
-   * sets the listbox value based on selected options
-   * @param value item or items
-   */
-  setValue(value: Item | Item[]): void {
-    const selected = Array.isArray(value) ? value : [value];
-    const [firstItem = null] = selected;
-    for (const option of this.options) {
-      this._options.requestSelect(option, (
-          !!this._options.multi && Array.isArray(value) ? value?.includes(option)
-        : firstItem === option
-      ));
-    }
-  }
-
-  /**
-   * register's the host's Item elements as listbox controller items
-   * @param options items
-   */
-  setOptions(options: Item[]): void {
-    const oldOptions = [...this.#items];
-    this.#items = options;
-    this.#optionsChanged(oldOptions);
-  }
 }
diff --git a/core/pfe-core/controllers/property-observer-controller.ts b/core/pfe-core/controllers/property-observer-controller.ts
index faac228bec..1b9234bd24 100644
--- a/core/pfe-core/controllers/property-observer-controller.ts
+++ b/core/pfe-core/controllers/property-observer-controller.ts
@@ -1,5 +1,7 @@
 import type { ReactiveController, ReactiveElement } from 'lit';
 
+import { notEqual } from 'lit';
+
 export type ChangeCallback<T extends ReactiveElement, V = T[keyof T]> = (
   this: T,
   old?: V,
@@ -12,20 +14,43 @@ export interface PropertyObserverOptions<T extends ReactiveElement> {
   waitFor?: 'connected' | 'updated' | 'firstUpdated';
 }
 
+const UNINITIALIZED = Symbol('uninitialized');
+
 export class PropertyObserverController<
   T extends ReactiveElement
 > implements ReactiveController {
-  private oldVal: T[keyof T];
+  private oldVal: T[keyof T] = UNINITIALIZED as T[keyof T];
 
   constructor(
     private host: T,
     private options: PropertyObserverOptions<T>
   ) {
-    this.oldVal = host[options.propertyName];
+  }
+
+  #neverRan = true;
+
+  hostConnected(): void {
+    this.#init();
+  }
+
+  /**
+   * Because of how typescript transpiles private fields,
+   * the __accessPrivate helper might not be entirely initialized
+   * by the time this constructor runs (in `addInitializer`'s instance callback')
+   * Therefore, we pull this shtick.
+   *
+   * When browser support improves to the point we can ship decorated private fields,
+   * we'll be able to get rid of this.
+   */
+  #init() {
+    if (this.oldVal === UNINITIALIZED) {
+      this.oldVal = this.host[this.options.propertyName];
+    }
   }
 
   /** Set any cached valued accumulated between constructor and connectedCallback */
   async hostUpdate(): Promise<void> {
+    this.#init();
     const { oldVal, options: { waitFor, propertyName, callback } } = this;
     if (!callback) {
       throw new Error(`no callback for ${propertyName}`);
@@ -54,6 +79,13 @@ export class PropertyObserverController<
           break;
       }
     }
-    callback.call(this.host, oldVal as T[keyof T], newVal);
+    const Class = (this.host.constructor as typeof ReactiveElement);
+    const hasChanged = Class
+        .getPropertyOptions(this.options.propertyName)
+        .hasChanged ?? notEqual;
+    if (this.#neverRan || hasChanged(oldVal, newVal)) {
+      callback.call(this.host, oldVal as T[keyof T], newVal);
+      this.#neverRan = false;
+    }
   }
 }
diff --git a/core/pfe-core/controllers/roving-tabindex-controller.ts b/core/pfe-core/controllers/roving-tabindex-controller.ts
index afaa2fcaa3..6d47fb68cc 100644
--- a/core/pfe-core/controllers/roving-tabindex-controller.ts
+++ b/core/pfe-core/controllers/roving-tabindex-controller.ts
@@ -1,18 +1,9 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type { RequireProps } from '../core.js';
+import { isServer, type ReactiveControllerHost } from 'lit';
+import { ATFocusController, type ATFocusControllerOptions } from './at-focus-controller.js';
+import { Logger } from './logger.js';
 
-const isFocusableElement = (el: Element): el is HTMLElement =>
-  !!el
-  && !el.ariaHidden
-  && !el.hasAttribute('hidden');
-
-export interface RovingTabindexControllerOptions<Item extends HTMLElement> {
-  /** @deprecated use getHTMLElement */
-  getElement?: () => Element | null;
-  getHTMLElement?: () => HTMLElement | null;
-  getItems?: () => Item[];
-  getItemContainer?: () => HTMLElement;
-}
+export type RovingTabindexControllerOptions<Item extends HTMLElement> =
+  ATFocusControllerOptions<Item>;
 
 /**
  * Implements roving tabindex, as described in WAI-ARIA practices, [Managing Focus Within
@@ -22,286 +13,81 @@ export interface RovingTabindexControllerOptions<Item extends HTMLElement> {
  */
 export class RovingTabindexController<
   Item extends HTMLElement = HTMLElement
-> implements ReactiveController {
-  private static hosts = new WeakMap<ReactiveControllerHost, RovingTabindexController>();
-
+> extends ATFocusController<Item> {
   static of<Item extends HTMLElement>(
     host: ReactiveControllerHost,
-    options: RovingTabindexControllerOptions<Item> & { getItems(): Item[] },
+    options: RovingTabindexControllerOptions<Item>,
   ): RovingTabindexController<Item> {
     return new RovingTabindexController(host, options);
   }
 
-  /** @internal */
-  static elements: WeakMap<Element, RovingTabindexController<HTMLElement>> =
-    new WeakMap<Element, RovingTabindexController>();
-
-  /** active focusable element */
-  #activeItem?: Item;
-
-  /** closest ancestor containing items */
-  #itemsContainer?: Element;
+  #logger = new Logger(this.host);
 
-  /** array of all focusable elements */
-  #items: Item[] = [];
-
-  /** flags whether the host's element has gained focus at least once */
   #gainedInitialFocus = false;
 
-  /**
-   * finds focusable items from a group of items
-   */
-  get #focusableItems(): Item[] {
-    return this.#items.filter(isFocusableElement);
-  }
-
-  /**
-   * index of active item in array of focusable items
-   */
-  get #activeIndex(): number {
-    return !!this.#focusableItems
-      && !!this.activeItem ? this.#focusableItems.indexOf(this.activeItem) : -1;
-  }
-
-  /**
-   * index of active item in array of items
-   */
-  get #itemIndex(): number {
-    return this.activeItem ? this.#items.indexOf(this.activeItem) : -1;
-  }
-
-  /**
-   * active item of array of items
-   */
-  get activeItem(): Item | undefined {
-    return this.#activeItem;
-  }
-
-  /**
-   * all items from array
-   */
-  get items(): Item[] {
-    return this.#items;
-  }
-
-  /**
-   * all focusable items from array
-   */
-  get focusableItems(): Item[] {
-    return this.#focusableItems;
-  }
-
-  /**
-   * first item in array of focusable items
-   */
-  get firstItem(): Item | undefined {
-    return this.#focusableItems[0];
-  }
-
-  /**
-   * last item in array of focusable items
-   */
-  get lastItem(): Item | undefined {
-    return this.#focusableItems.at(-1);
-  }
+  #itemsSet = new Set<Item>();
 
-  /**
-   * next item  after active item in array of focusable items
-   */
-  get nextItem(): Item | undefined {
-    return (
-      this.#activeIndex >= this.#focusableItems.length - 1 ? this.firstItem
-        : this.#focusableItems[this.#activeIndex + 1]
-    );
+  get atFocusedItemIndex(): number {
+    return super.atFocusedItemIndex;
   }
 
   /**
-   * previous item  after active item in array of focusable items
+   * Sets the DOM Focus on the item with assistive technology focus
+   * @param item item
    */
-  get prevItem(): Item | undefined {
-    return (
-      this.#activeIndex > 0 ? this.#focusableItems[this.#activeIndex - 1]
-        : this.lastItem
-    );
-  }
-
-  #options: RequireProps<RovingTabindexControllerOptions<Item>, 'getHTMLElement'>;
-
-  constructor(
-    public host: ReactiveControllerHost,
-    options?: RovingTabindexControllerOptions<Item>,
-  ) {
-    this.#options = {
-      getHTMLElement: options?.getHTMLElement
-        ?? (options?.getElement as (() => HTMLElement | null))
-        ?? (() => host instanceof HTMLElement ? host : null),
-      getItems: options?.getItems,
-      getItemContainer: options?.getItemContainer,
-    };
-    const instance = RovingTabindexController.hosts.get(host);
-    if (instance) {
-      return instance as RovingTabindexController<Item>;
-    }
-    RovingTabindexController.hosts.set(host, this);
-    this.host.addController(this);
-    this.updateItems();
-  }
-
-  hostUpdated(): void {
-    const oldContainer = this.#itemsContainer;
-    const newContainer = this.#options.getHTMLElement();
-    if (oldContainer !== newContainer) {
-      oldContainer?.removeEventListener('keydown', this.#onKeydown);
-      RovingTabindexController.elements.delete(oldContainer!);
-      this.updateItems();
+  set atFocusedItemIndex(index: number) {
+    super.atFocusedItemIndex = index;
+    const item = this.items.at(this.atFocusedItemIndex);
+    for (const i of this.items) {
+      i.tabIndex = item === i ? 0 : -1;
     }
-    if (newContainer) {
-      this.#initContainer(newContainer);
+    if (this.#gainedInitialFocus) {
+      item?.focus();
     }
+    this.host.requestUpdate();
   }
 
-  /**
-   * removes event listeners from items container
-   */
-  hostDisconnected(): void {
-    this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);
-    this.#itemsContainer = undefined;
-    this.#gainedInitialFocus = false;
-  }
-
-  #initContainer(container: Element) {
-    RovingTabindexController.elements.set(container, this);
-    this.#itemsContainer = container;
-    this.#itemsContainer.addEventListener('keydown', this.#onKeydown);
-    this.#itemsContainer.addEventListener('focusin', () => {
-      this.#gainedInitialFocus = true;
-    }, { once: true });
+  get items() {
+    return this._items;
   }
 
-  /**
-   * handles keyboard navigation
-   * @param event keydown event
-   */
-  #onKeydown = (event: Event) => {
-    if (!(event instanceof KeyboardEvent)
-        || event.ctrlKey
-        || event.altKey
-        || event.metaKey
-        || !this.#focusableItems.length
-        || !event.composedPath().some(x =>
-          this.#focusableItems.includes(x as Item))) {
-      return;
-    }
-
-    const orientation = this.#options.getHTMLElement()?.getAttribute('aria-orientation');
-
-    const item = this.activeItem;
-    let shouldPreventDefault = false;
-    const horizontalOnly =
-      !item ? false
-        : item.tagName === 'SELECT'
-        || item.getAttribute('role') === 'spinbutton' || orientation === 'horizontal';
-    const verticalOnly = orientation === 'vertical';
-    switch (event.key) {
-      case 'ArrowLeft':
-        if (verticalOnly) {
-          return;
-        }
-        this.setActiveItem(this.prevItem);
-        shouldPreventDefault = true;
-        break;
-      case 'ArrowRight':
-        if (verticalOnly) {
-          return;
-        }
-
-        this.setActiveItem(this.nextItem);
-        shouldPreventDefault = true;
-        break;
-      case 'ArrowUp':
-        if (horizontalOnly) {
-          return;
-        }
-        this.setActiveItem(this.prevItem);
-        shouldPreventDefault = true;
-        break;
-      case 'ArrowDown':
-        if (horizontalOnly) {
-          return;
-        }
-        this.setActiveItem(this.nextItem);
-        shouldPreventDefault = true;
-        break;
-      case 'Home':
-        this.setActiveItem(this.firstItem);
-        shouldPreventDefault = true;
-        break;
-      case 'End':
-        this.setActiveItem(this.lastItem);
-        shouldPreventDefault = true;
-        break;
-      default:
-        break;
-    }
-
-    if (shouldPreventDefault) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  };
-
-  /**
-   * Sets the active item and focuses it
-   * @param item tabindex item
-   */
-  setActiveItem(item?: Item): void {
-    this.#activeItem = item;
-    for (const item of this.#focusableItems) {
-      item.tabIndex = this.#activeItem === item ? 0 : -1;
-    }
+  public set items(items: Item[]) {
+    this._items = items;
+    this.#itemsSet = new Set(items);
+    const pivot = Math.max(0, this.atFocusedItemIndex);
+    const [firstFocusable] = this.atFocusableItems;
+    const firstFocusableIndex = firstFocusable ? items.indexOf(firstFocusable) : -1;
+    const pivotFocusableIndex = items.indexOf(this.items
+        .slice(pivot)
+        .concat(this.items.slice(0, pivot))
+        .find(item => this.atFocusableItems.includes(item))!);
+    this.atFocusedItemIndex = Math.max(firstFocusableIndex, pivotFocusableIndex);
     this.host.requestUpdate();
-    if (this.#gainedInitialFocus) {
-      this.#activeItem?.focus();
-    }
-  }
-
-  /**
-   * Focuses next focusable item
-   * @param items tabindex items
-   */
-  updateItems(items: Item[] = this.#options.getItems?.() ?? []): void {
-    this.#items = items;
-    const sequence = [
-      ...this.#items.slice(this.#itemIndex - 1),
-      ...this.#items.slice(0, this.#itemIndex - 1),
-    ];
-    const first = sequence.find(item => this.#focusableItems.includes(item));
-    const [focusableItem] = this.#focusableItems;
-    const activeItem = focusableItem ?? first ?? this.firstItem;
-    this.setActiveItem(activeItem);
   }
 
-  /**
-   * @deprecated use setActiveItem
-   * @param item tabindex item
-   */
-  focusOnItem(item?: Item): void {
-    this.setActiveItem(item);
+  private constructor(
+    public host: ReactiveControllerHost,
+    options: RovingTabindexControllerOptions<Item>,
+  ) {
+    super(host, options);
+    this.initItems();
+    const container = options.getItemsContainer?.() ?? this.host;
+    if (!isServer) {
+      if (container instanceof HTMLElement) {
+        container.addEventListener('focusin', () =>
+          this.#gainedInitialFocus = true, { once: true });
+      } else {
+        this.#logger.warn('RovingTabindexController requires a getItemsContainer function');
+      }
+    }
   }
 
-  /**
-   * from array of HTML items, and sets active items
-   * @deprecated use getItems and getItemContainer option functions
-   * @param items tabindex items
-   * @param itemsContainer
-   */
-  initItems(items: Item[], itemsContainer?: Element): void {
-    const element = itemsContainer
-      ?? this.#options?.getItemContainer?.()
-      ?? this.#options.getHTMLElement();
-    if (element) {
-      this.#initContainer(element);
-    }
-    this.updateItems(items);
+  protected override isRelevantKeyboardEvent(event: Event): event is KeyboardEvent {
+    return ((event instanceof KeyboardEvent)
+            && !event.ctrlKey
+            && !event.altKey
+            && !event.metaKey
+            && !!this.atFocusableItems.length
+            && !!event.composedPath().some(node => this.#itemsSet.has(node as Item)));
   }
 }
diff --git a/core/pfe-core/controllers/test/combobox-controller.spec.ts b/core/pfe-core/controllers/test/combobox-controller.spec.ts
new file mode 100644
index 0000000000..062021fe94
--- /dev/null
+++ b/core/pfe-core/controllers/test/combobox-controller.spec.ts
@@ -0,0 +1,247 @@
+/* eslint-disable lit-a11y/accessible-name */
+import { expect, fixture } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import { a11ySnapshot, querySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+
+import { customElement } from 'lit/decorators/custom-element.js';
+import { query } from 'lit/decorators/query.js';
+import { state } from 'lit/decorators/state.js';
+import { LitElement, html } from 'lit';
+
+import { ComboboxController } from '../combobox-controller.js';
+import { SlotController } from '../slot-controller.js';
+
+function press(key: string) {
+  return async function() {
+    await sendKeys({ press: key });
+  };
+}
+
+
+describe('ComboboxController', function() {
+  describe('With toggle and combobox in shadow root but items in light DOM', function() {
+    let element: XComboboxShadow;
+
+    @customElement('x-combobox-shadow')
+    class XComboboxShadow extends LitElement {
+      @query('#listbox') private _listbox?: HTMLElement;
+      @query('#button') private _button?: HTMLElement;
+      @query('#combobox') private _combobox?: HTMLInputElement;
+      @query('#placeholder') private _placeholder?: HTMLOptionElement;
+
+      @state() expanded = false;
+
+      /** List of options */
+      get options(): HTMLOptionElement[] {
+        return [this._placeholder, ...Array.from(this.querySelectorAll('option'))].filter(x => !!x);
+      }
+
+      #combobox = ComboboxController.of(this, {
+        multi: false,
+        getItems: () => this.options,
+        isItem: item => item instanceof HTMLOptionElement,
+        getFallbackLabel: () => 'options',
+        getListboxElement: () => this._listbox ?? null,
+        getToggleButton: () => this._button ?? null,
+        getComboboxInput: () => this._combobox ?? null,
+        isExpanded: () => this.expanded,
+        requestShowListbox: () => this.expanded ||= true,
+        requestHideListbox: () => ((this.expanded &&= false), true),
+        setItemActive(active) {
+          this.classList.toggle('active', !!active);
+        },
+        setItemSelected(selected) {
+          this.selected = selected;
+        },
+      });
+
+      override render() {
+        const { canControlLightDom } = ComboboxController;
+        return html`
+            <div id="toggle">
+              <input id="combobox">
+              <button id="button">Show Options</button>
+            </div>
+            <div id="listbox" ?hidden="${!this.expanded}">
+              <option id="placeholder"
+                      aria-disabled="true"
+                      aria-hidden="${String(!!(this.#combobox.selected.length)) as 'true' | 'false'}">
+                Select an Option
+              </option>
+              ${this.#combobox.renderItemsToShadowRoot()}
+              <div ?hidden=${!canControlLightDom}>
+                <slot></slot>
+              </div>
+            </div>
+          `;
+      }
+    }
+
+    beforeEach(async function() {
+      element = await fixture<XComboboxShadow>(html`
+        <x-combobox-shadow>${Array.from({ length: 10 }, (_, i) => html`
+          <option>${i + 1}</option>`)}
+        </x-combobox-shadow>
+      `);
+      await element.updateComplete;
+    });
+
+    describe('tabbing to the combobox', function() {
+      beforeEach(press('Tab'));
+      it('focuses the combobox', async function() {
+        const snapshot = await a11ySnapshot();
+        expect(querySnapshot(snapshot, { focused: true })?.role).to.equal('combobox');
+      });
+      describe('tabbing out of the combobox', function() {
+        beforeEach(press('Tab'));
+        it('does not focus the toggle button', async function() {
+          const snapshot = await a11ySnapshot();
+          expect(querySnapshot(snapshot, { focused: true })).to.equal(null);
+        });
+      });
+      describe('pressing ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
+
+        it('expands the listbox', async function() {
+          const snapshot = await a11ySnapshot();
+          expect(querySnapshot(snapshot, { role: 'listbox' })?.children, 'listbox children').to.have.length(11);
+          expect(querySnapshot(snapshot, { role: 'combobox' })?.expanded, 'expanded').to.equal(true);
+        });
+
+        it('maintains DOM focus on the combobox', async function() {
+          const snapshot = await a11ySnapshot();
+          expect(querySnapshot(snapshot, { focused: true })?.role).to.equal('combobox');
+        });
+
+        it.skip('sets active state on the first option', async function() {
+          // maybe this is a problem with the demo element
+          await element.updateComplete;
+          expect(element.querySelector('option')?.classList.contains('active')).to.equal(true);
+        });
+
+        describe('pressing Escape', function() {
+          beforeEach(press('Escape'));
+          it('collapses the listbox', async function() {
+            const snapshot = await a11ySnapshot();
+            expect(querySnapshot(snapshot, { role: 'combobox' })?.expanded, 'expanded').to.equal(undefined);
+          });
+          it('maintains DOM focus on the combobox', async function() {
+            const snapshot = await a11ySnapshot();
+            expect(querySnapshot(snapshot, { focused: true })?.role).to.equal('combobox');
+          });
+        });
+      });
+    });
+  });
+
+  describe('With input, listbox, and options in the lightdom', function() {
+    let element: XComboboxLight;
+
+    @customElement('x-combobox-light')
+    class XComboboxLight extends LitElement {
+      #slots = new SlotController(this, null, 'input', 'button');
+
+      /** List of options */
+      get options(): HTMLOptionElement[] {
+        return [...Array.from(this.querySelectorAll('option'))].filter(x => !!x);
+      }
+
+      #canControlLightDom = ComboboxController.canControlLightDom;
+
+      #combobox = ComboboxController.of(this, {
+        multi: false,
+        isExpanded: () => this.expanded,
+        requestShowListbox: () => this.expanded ||= true,
+        requestHideListbox: () => ((this.expanded &&= false), true),
+        getListboxElement: () => this.#canControlLightDom ? this._listbox as HTMLElement : [...this.#slots.getSlotted()].shift() as HTMLElement,
+        getToggleButton: () => [...this.#slots.getSlotted('button')].shift() as HTMLElement,
+        getComboboxInput: () => [...this.#slots.getSlotted('input')].shift() as HTMLElement,
+        getFallbackLabel: () => 'options',
+        getItems: () => this.options,
+      });
+
+      @query('#listbox') private _listbox?: HTMLElement;
+
+      @state() expanded = false;
+
+      override render() {
+        return html`
+            <div id="toggle">
+              <slot name="input"></slot>
+              <slot name="button"></slot>
+            </div>
+            <div ?hidden=${this.#canControlLightDom} id="listbox" role="listbox">
+              <option id="placeholder"
+                      aria-disabled="true"
+                      aria-hidden="${String(!!(this.#combobox.selected.length)) as 'true' | 'false'}">
+                Select an Option
+              </option>
+              ${this.#combobox.renderItemsToShadowRoot()}
+            </div>
+          </div>
+            <div ?hidden=${!this.#canControlLightDom}>
+              <slot></slot>
+            </div>
+          `;
+      }
+    }
+
+    beforeEach(async function() {
+      element = await fixture<XComboboxLight>(html`
+        <x-combobox-light>
+          <input slot="input">
+          <button slot="button">Show Options</button>
+          ${Array.from({ length: 10 }, (_, i) => html`<option>${i + 1}</option>`)}å
+        </x-combobox-light>
+      `);
+      await element.updateComplete;
+    });
+
+    describe('tabbing to the combobox', function() {
+      beforeEach(press('Tab'));
+      it('focuses the combobox', async function() {
+        const snapshot = await a11ySnapshot();
+        expect(querySnapshot(snapshot, { focused: true })?.role).to.equal('combobox');
+      });
+      describe('tabbing out of the combobox', function() {
+        beforeEach(press('Tab'));
+        it('does not focus the toggle button', async function() {
+          const snapshot = await a11ySnapshot();
+          expect(querySnapshot(snapshot, { focused: true })).to.equal(null);
+        });
+      });
+      describe('pressing ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
+        it('expands the listbox', async function() {
+          const snapshot = await a11ySnapshot();
+          expect(querySnapshot(snapshot, { role: 'listbox' })?.children, 'listbox children').to.have.length(11);
+          expect(querySnapshot(snapshot, { role: 'combobox' })?.expanded, 'expanded').to.equal(true);
+        });
+        it('maintains DOM focus on the combobox', async function() {
+          const snapshot = await a11ySnapshot();
+          expect(querySnapshot(snapshot, { focused: true })?.role).to.equal('combobox');
+        });
+        it.skip('sets active state on the first option', async function() {
+          // maybe this is a problem with the demo element
+          await element.updateComplete;
+          expect(element.querySelector('option')?.classList.contains('active')).to.equal(true);
+        });
+        describe('pressing Escape', function() {
+          beforeEach(press('Escape'));
+          it('collapses the listbox', async function() {
+            const snapshot = await a11ySnapshot();
+            expect(querySnapshot(snapshot, { role: 'combobox' })?.expanded, 'expanded').to.equal(undefined);
+          });
+          it('maintains DOM focus on the combobox', async function() {
+            const snapshot = await a11ySnapshot();
+            expect(querySnapshot(snapshot, { focused: true })?.role).to.equal('combobox');
+          });
+        });
+      });
+    });
+  });
+
+  describe('All options are in the shadowdom', function() {
+    /* test here */
+  });
+});
diff --git a/core/pfe-core/decorators/observes.ts b/core/pfe-core/decorators/observes.ts
index 485ddd7809..943b84962e 100644
--- a/core/pfe-core/decorators/observes.ts
+++ b/core/pfe-core/decorators/observes.ts
@@ -20,7 +20,7 @@ import {
  */
 export function observes<T extends ReactiveElement>(
   propertyName: string & keyof T,
-  options?: Partial<Pick<PropertyObserverOptions<T>, 'waitFor'>>,
+  options?: Partial<Exclude<PropertyObserverOptions<T>, 'callback' | 'propertyName'>>,
 ) {
   return function(proto: T, methodName: string): void {
     const callback = proto[methodName as keyof T] as ChangeCallback<T>;
diff --git a/core/pfe-core/functions/arraysAreEquivalent.ts b/core/pfe-core/functions/arraysAreEquivalent.ts
new file mode 100644
index 0000000000..475520cd1e
--- /dev/null
+++ b/core/pfe-core/functions/arraysAreEquivalent.ts
@@ -0,0 +1,24 @@
+/**
+ * Whether the two arrays are equivalent
+ * Arrays are equivalent when they are both empty, or when their lengths are equal and each of
+ * their members is equal (===) to the corresponding member in the other array.
+ * If either argument is not an array, the result will be strict equivalence (===)
+ * @param a first array
+ * @param b second array
+ */
+export function arraysAreEquivalent(a: unknown, b: unknown): boolean {
+  if (!Array.isArray(a) || !Array.isArray(b)) {
+    return a === b;
+  } else if (a.length !== b.length) { // lengths are different
+    return false;
+  } else if (!a.length && !b.length) { // both are empty
+    return true;
+  } else { // multi and length of both is equal
+    for (const [i, element] of a.entries()) {
+      if (element !== b[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
diff --git a/core/pfe-core/package.json b/core/pfe-core/package.json
index 67706c9ef9..ff8cd3b2ed 100644
--- a/core/pfe-core/package.json
+++ b/core/pfe-core/package.json
@@ -16,6 +16,7 @@
     "./functions/*": "./functions/*",
     "./core.js": "./core.js",
     "./decorators.js": "./decorators.js",
+    "./controllers/activedescendant-controller.js": "./controllers/activedescendant-controller.js",
     "./controllers/cascade-controller.js": "./controllers/cascade-controller.js",
     "./controllers/css-variable-controller.js": "./controllers/css-variable-controller.js",
     "./controllers/floating-dom-controller.js": "./controllers/floating-dom-controller.js",
@@ -35,8 +36,10 @@
     "./decorators/deprecation.js": "./decorators/deprecation.js",
     "./decorators/initializer.js": "./decorators/initializer.js",
     "./decorators/observed.js": "./decorators/observed.js",
+    "./decorators/observes.js": "./decorators/observes.js",
     "./decorators/time.js": "./decorators/time.js",
     "./decorators/trace.js": "./decorators/trace.js",
+    "./functions/arraysAreEquivalent.js": "./functions/arraysAreEquivalent.js",
     "./functions/context.js": "./functions/context.js",
     "./functions/containsDeep.js": "./functions/containsDeep.js",
     "./functions/debounce.js": "./functions/debounce.js",
diff --git a/core/pfe-core/test/decorators.spec.ts b/core/pfe-core/test/decorators.spec.ts
index a96b5efd97..51bde2874b 100644
--- a/core/pfe-core/test/decorators.spec.ts
+++ b/core/pfe-core/test/decorators.spec.ts
@@ -26,7 +26,7 @@ describe('@observes', function() {
     element = await fixture(html`<x-observes-host></x-observes-host>`);
   });
   it('initializes with old and new values', function() {
-    expect(element.old, 'old').to.equal(undefined);
+    expect(element.old, 'old').to.equal(0);
     expect(element.current, 'current').to.equal(0);
   });
   describe('setting the observed prop', function() {
@@ -60,7 +60,7 @@ describe('@observed', function() {
     element = await fixture(html`<x-observed-bare-host></x-observed-bare-host>`);
   });
   it('initializes with old and new values', function() {
-    expect(element.old, 'old').to.equal(undefined);
+    expect(element.old, 'old').to.equal(0);
     expect(element.current, 'current').to.equal(0);
   });
   describe('setting the observed prop', function() {
@@ -94,7 +94,7 @@ describe('@observed(\'_myCallback\')', function() {
     element = await fixture(html`<x-observed-configured-host></x-observed-configured-host>`);
   });
   it('initializes with old and new values', function() {
-    expect(element.old, 'old').to.equal(undefined);
+    expect(element.old, 'old').to.equal(0);
     expect(element.current, 'current').to.equal(0);
   });
   describe('setting the observed prop', function() {
@@ -124,7 +124,7 @@ describe('@observed(() => {...})', function() {
   });
 
   it('initializes with old and new values', function() {
-    expect(dump).to.have.been.calledWith(undefined, 0);
+    expect(dump).to.have.been.calledWith(0, 0);
   });
   describe('setting the observed prop', function() {
     beforeEach(function() {
diff --git a/core/pfe-core/tsconfig.json b/core/pfe-core/tsconfig.json
index fdd9d94497..c47017aa80 100644
--- a/core/pfe-core/tsconfig.json
+++ b/core/pfe-core/tsconfig.json
@@ -7,5 +7,10 @@
     "declaration": true,
     "composite": true,
     "allowJs": false
-  }
+  },
+  "references": [
+    {
+      "path": "../../tools/pfe-tools"
+    }
+  ]
 }
diff --git a/elements/pf-accordion/demo/nested.html b/elements/pf-accordion/demo/nested.html
index f0e56bf5c2..e7fd5ad477 100644
--- a/elements/pf-accordion/demo/nested.html
+++ b/elements/pf-accordion/demo/nested.html
@@ -1,5 +1,4 @@
 <article>
-  <h2>Nested Accordion</h2>
   <pf-accordion single>
     <pf-accordion-header>
       <h3>Level One - Item one (single attr: true)</h3>
@@ -116,6 +115,6 @@ <h3>Level One - Item five</h3>
 
 <style>
 article {
-  margin-inline: 4em;
+  margin: 4em;
 }
 </style>
diff --git a/elements/pf-accordion/demo/pf-accordion.html b/elements/pf-accordion/demo/pf-accordion.html
index dc76ddd6c0..c0d0b08395 100644
--- a/elements/pf-accordion/demo/pf-accordion.html
+++ b/elements/pf-accordion/demo/pf-accordion.html
@@ -1,34 +1,34 @@
 <article>
   <pf-accordion>
     <pf-accordion-header expanded>
-      <h3>Level One - Item one</h3>
+      <h3>Item one</h3>
     </pf-accordion-header>
     <pf-accordion-panel>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      <p>Lorem ipsum <a href="$">dolor</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna aliqua.</p>
     </pf-accordion-panel>
     <pf-accordion-header>
-      <h3>Level One - Item two</h3>
+      <h3>Item two</h3>
     </pf-accordion-header>
     <pf-accordion-panel>
-      <p>Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
+      <p>Vivamus et tortor <a href="#">sed</a> arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices,
         faucibus erat id, maximus nunc.</p>
     </pf-accordion-panel>
     <pf-accordion-header>
-      <h3>Level One - Item three</h3>
+      <h3>Item three</h3>
     </pf-accordion-header>
     <pf-accordion-panel>
-      <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
+      <p>Morbi vitae urna quis <a href="#">nunc</a> convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
     </pf-accordion-panel>
     <pf-accordion-header>
-      <h3>Level One - Item four</h3>
+      <h3>Item four</h3>
     </pf-accordion-header>
     <pf-accordion-panel>
       <p>
         Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
         sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
         cubilia Curae;
-        Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
+        Vestibulum ultricies nulla <a href="#">nibh</a>. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi
         tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
         Mauris
         et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam
@@ -38,17 +38,14 @@ <h3>Level One - Item four</h3>
       </p>
     </pf-accordion-panel>
     <pf-accordion-header>
-      <h3>Level One - Item five</h3>
+      <h3>Item five</h3>
     </pf-accordion-header>
     <pf-accordion-panel>
-      <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
+      <p>Vivamus finibus <a href="#">dictum</a> ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
     </pf-accordion-panel>
   </pf-accordion>
 </article>
 
-<link rel="stylesheet" href="acc-lightdom.css">
-
-
 <script type="module">
   import '@patternfly/elements/pf-accordion/pf-accordion.js';
 </script>
diff --git a/elements/pf-accordion/pf-accordion-header.ts b/elements/pf-accordion/pf-accordion-header.ts
index 3ae5f97612..f703ba2aca 100644
--- a/elements/pf-accordion/pf-accordion-header.ts
+++ b/elements/pf-accordion/pf-accordion-header.ts
@@ -125,7 +125,6 @@ export class PfAccordionHeader extends LitElement {
 
   override connectedCallback(): void {
     super.connectedCallback();
-    this.hidden = true;
     this.id ||= getRandomId(this.localName);
     this.#initHeader();
   }
@@ -144,10 +143,11 @@ export class PfAccordionHeader extends LitElement {
           <slot name="accents"></slot>
         </span>
         <pf-icon part="icon"
-                  icon="${this.icon ?? 'angle-right'}"
-                  set="${this.iconSet ?? 'fas'}"
-                  class="icon"
-                  size="lg"></pf-icon>
+                 class="icon"
+                 size="lg"
+                 set="${this.iconSet ?? 'fas'}"
+                 icon="${this.icon ?? 'angle-right'}"
+        ></pf-icon>
       </button>
     `;
     switch (this.headingTag) {
diff --git a/elements/pf-accordion/pf-accordion.ts b/elements/pf-accordion/pf-accordion.ts
index f5e2795cc6..52c56a695f 100644
--- a/elements/pf-accordion/pf-accordion.ts
+++ b/elements/pf-accordion/pf-accordion.ts
@@ -128,10 +128,7 @@ export class PfAccordion extends LitElement {
    * </pf-accordion>
    * ```
    */
-  @property({
-    attribute: 'expanded-index',
-    converter: NumberListConverter,
-  })
+  @property({ attribute: 'expanded-index', converter: NumberListConverter })
   get expandedIndex(): number[] {
     return this.#expandedIndex;
   }
@@ -139,6 +136,7 @@ export class PfAccordion extends LitElement {
   set expandedIndex(value) {
     const old = this.#expandedIndex;
     this.#expandedIndex = value;
+    this.#tabindex.atFocusedItemIndex = value.at(-1) ?? -1;
     if (JSON.stringify(old) !== JSON.stringify(value)) {
       this.requestUpdate('expandedIndex', old);
       this.collapseAll().then(async () => {
@@ -157,7 +155,7 @@ export class PfAccordion extends LitElement {
 
   #mo = new MutationObserver(() => this.#init());
 
-  #headerIndex = new RovingTabindexController<PfAccordionHeader>(this, {
+  #tabindex = RovingTabindexController.of(this, {
     getItems: () => this.headers,
   });
 
@@ -233,15 +231,14 @@ export class PfAccordion extends LitElement {
    */
   async #init() {
     this.#initialized ||= !!await this.updateComplete;
-    // Event listener to the accordion header after the accordion
-    // has been initialized to add the roving tabindex
     this.updateAccessibility();
   }
 
   @listen('focusin')
   protected updateActiveHeader(): void {
-    if (this.#activeHeader !== this.#headerIndex.activeItem) {
-      this.#headerIndex.setActiveItem(this.#activeHeader);
+    if (this.#activeHeader
+        && this.#activeHeader !== this.headers.at(this.#tabindex.atFocusedItemIndex)) {
+      this.#tabindex.atFocusedItemIndex = this.headers.indexOf(this.#activeHeader);
     }
   }
 
@@ -322,7 +319,6 @@ export class PfAccordion extends LitElement {
   }
 
   public updateAccessibility(): void {
-    this.#headerIndex.updateItems();
     const { headers } = this;
 
     // For each header in the accordion, attach the aria connections
@@ -367,8 +363,6 @@ export class PfAccordion extends LitElement {
     this.#expandHeader(header, index);
     this.#expandPanel(panel);
 
-    header.focus();
-
     this.dispatchEvent(new PfAccordionExpandEvent(header, panel));
 
     await this.updateComplete;
diff --git a/elements/pf-accordion/test/pf-accordion.spec.ts b/elements/pf-accordion/test/pf-accordion.spec.ts
index f5fb3a215e..dae0f0ee09 100644
--- a/elements/pf-accordion/test/pf-accordion.spec.ts
+++ b/elements/pf-accordion/test/pf-accordion.spec.ts
@@ -1,5 +1,4 @@
-import { expect, html, aTimeout, nextFrame } from '@open-wc/testing';
-import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { expect, fixture, html, aTimeout, nextFrame } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 
 import { allUpdates, clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';
@@ -71,7 +70,7 @@ describe('<pf-accordion>', function() {
   });
 
   it('simply instantiating', async function() {
-    element = await createFixture<PfAccordion>(html`<pf-accordion></pf-accordion>`);
+    element = await fixture<PfAccordion>(html`<pf-accordion></pf-accordion>`);
     expect(element, 'pf-accordion should be an instance of PfAccordion')
         .to.be.an.instanceof(customElements.get('pf-accordion'))
         .and
@@ -80,29 +79,29 @@ describe('<pf-accordion>', function() {
 
   describe('in typical usage', function() {
     beforeEach(async function() {
-      element = await createFixture<PfAccordion>(html`
+      element = await fixture<PfAccordion>(html`
         <pf-accordion>
           <pf-accordion-header id="header1" data-index="0">
-            <h3>Consetetur sadipscing elitr?</h3>
+            <h3>Header1 Consetetur sadipscing elitr?</h3>
           </pf-accordion-header>
           <pf-accordion-panel id="panel1" data-index="0">
-            <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+            <p>Panel1 <a href="#">Panel1 link Lorem ipsum dolor</a>, sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
               ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
               rebum.</p>
           </pf-accordion-panel>
           <pf-accordion-header data-index="1">
-            <h3>Labore et dolore magna aliquyam erat?</h3>
+            <h3>Header2 Labore et dolore magna aliquyam erat?</h3>
           </pf-accordion-header>
           <pf-accordion-panel data-index="1">
-            <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+            <p>Panel2 <a href="#">Panel2 link Lorem ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
               ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
               rebum.</p>
           </pf-accordion-panel>
           <pf-accordion-header data-index="2">
-            <h3>Incididunt in Lorem voluptate eiusmod dolor?</h3>
+            <h3>Header3 Incididunt in Lorem voluptate eiusmod dolor?</h3>
           </pf-accordion-header>
           <pf-accordion-panel data-index="2">
-            <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+            <p>Panel3<a href="#">Panel3 link Lorem ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
               ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
               rebum.</p>
           </pf-accordion-panel>
@@ -112,9 +111,10 @@ describe('<pf-accordion>', function() {
       panels = Array.from(element.querySelectorAll('pf-accordion-panel'));
       [header, secondHeader] = headers;
       [panel, secondPanel] = panels;
-      await allUpdates(element);
     });
 
+    beforeEach(() => allUpdates(element));
+
     it('randomly generates ids on children', function() {
       expect(secondHeader.id).to.match(/pf-/);
       expect(secondPanel.id).to.match(/panel-/);
@@ -130,8 +130,8 @@ describe('<pf-accordion>', function() {
 
       it('expands first pair', async function() {
         const snapshot = await a11ySnapshot();
-        const expanded = snapshot?.children?.find(x => x.expanded);
-        const focused = snapshot?.children?.find(x => x.focused);
+        const expanded = querySnapshot(snapshot, { expanded: true });
+        const focused = querySnapshot(snapshot, { focused: true });
         expect(expanded?.name).to.equal(header.textContent?.trim());
         expect(header.expanded).to.be.true;
         expect(panel.hasAttribute('expanded')).to.be.true;
@@ -226,11 +226,11 @@ describe('<pf-accordion>', function() {
     /* ATTRIBUTE TESTS */
     describe('setting expanded-index attribute', function() {
       const indices = '1,2';
-      beforeEach(async function() {
+      beforeEach(function() {
         element.setAttribute('expanded-index', indices);
-        await allUpdates(element);
-        await nextFrame();
       });
+      beforeEach(() => allUpdates(element));
+      beforeEach(nextFrame);
 
       it('expands the pairs listed in the expanded-index attribute', function() {
         for (const idx of indices.split(',').map(x => parseInt(x))) {
@@ -245,7 +245,7 @@ describe('<pf-accordion>', function() {
     });
 
     describe('dynamically adding pairs', function() {
-      beforeEach(async function() {
+      beforeEach(function() {
         const newHeader = document.createElement('pf-accordion-header');
         newHeader.id = 'newHeader';
         newHeader.innerHTML = `<h2>New Header</h2>`;
@@ -256,10 +256,10 @@ describe('<pf-accordion>', function() {
 
         element.appendChild(newHeader);
         element.appendChild(newPanel);
-
-        await allUpdates(element);
       });
 
+      beforeEach(() => allUpdates(element));
+
       it('properly initializes new pairs', function() {
         const newHeader = headers.at(-1);
         const newPanel = panels.at(-1);
@@ -330,23 +330,22 @@ describe('<pf-accordion>', function() {
       afterEach(async function() {
         [header1, header2, header3] = [] as PfAccordionHeader[];
         [panel1, panel2, panel3] = [] as PfAccordionPanel[];
+        await fixture('');
       });
 
-      describe('with all panels closed', function() {
-        it('applies hidden attribute to all panels', function() {
-          expect(panel1.hidden, 'panel1').to.be.true;
-          expect(panel2.hidden, 'panel2').to.be.true;
-          expect(panel3.hidden, 'panel3').to.be.true;
-        });
+      it('applies hidden attribute to all panels', function() {
+        expect(panel1.hidden, 'panel1').to.be.true;
+        expect(panel2.hidden, 'panel2').to.be.true;
+        expect(panel3.hidden, 'panel3').to.be.true;
       });
 
-      describe('with all panels open', function() {
+      describe('clicking every header', function() {
         beforeEach(async function() {
           for (const header of element.querySelectorAll('pf-accordion-header')) {
             await clickElementAtCenter(header);
           }
-          await nextFrame();
         });
+        beforeEach(nextFrame);
         it('removes hidden attribute from all panels', function() {
           expect(panel1.hidden, 'panel1').to.be.false;
           expect(panel2.hidden, 'panel2').to.be.false;
@@ -354,7 +353,7 @@ describe('<pf-accordion>', function() {
         });
       });
 
-      describe('when focus is on the first header', function() {
+      describe('calling focus() on the first header', function() {
         beforeEach(function() {
           header1.focus();
         });
@@ -391,22 +390,22 @@ describe('<pf-accordion>', function() {
 
         describe('Tab', function() {
           beforeEach(press('Tab'));
-          it('moves focus to the body', function() {
-            expect(document.activeElement).to.equal(document.body);
+          it('blurs out of the accordion', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
           });
         });
 
         describe('Shift+Tab', function() {
           beforeEach(press('Shift+Tab'));
-          it('moves focus to the body', function() {
-            expect(document.activeElement).to.equal(document.body);
+          it('blurs out of the accordion', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
           });
         });
 
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
-          it('moves focus to the second header', function() {
-            expect(document.activeElement).to.equal(header2);
+          it('moves focus to the second header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header2);
           });
           it('does not open panels', function() {
             expect(panel1.expanded).to.be.false;
@@ -417,8 +416,8 @@ describe('<pf-accordion>', function() {
 
         describe('ArrowUp', function() {
           beforeEach(press('ArrowUp'));
-          it('moves focus to the last header', function() {
-            expect(document.activeElement).to.equal(header3);
+          it('moves focus to the last header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header3);
           });
           it('does not open panels', function() {
             expect(panel1.expanded).to.be.false;
@@ -429,8 +428,8 @@ describe('<pf-accordion>', function() {
 
         describe('Home', function() {
           beforeEach(press('Home'));
-          it('moves focus to the first header', function() {
-            expect(document.activeElement).to.equal(header1);
+          it('moves focus to the first header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header1);
           });
           it('does not open panels', function() {
             expect(panel1.expanded).to.be.false;
@@ -441,8 +440,8 @@ describe('<pf-accordion>', function() {
 
         describe('End', function() {
           beforeEach(press('End'));
-          it('moves focus to the last header', function() {
-            expect(document.activeElement).to.equal(header3);
+          it('moves focus to the last header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header3);
           });
           it('does not open panels', function() {
             expect(panel1.expanded).to.be.false;
@@ -452,12 +451,13 @@ describe('<pf-accordion>', function() {
         });
       });
 
-      describe('when focus is on the middle header', function() {
-        beforeEach(async function() {
+      describe('calling focus() on the middle header', function() {
+        beforeEach(function() {
           header2.focus();
-          await nextFrame();
         });
 
+        beforeEach(nextFrame);
+
         describe('Space', function() {
           beforeEach(press(' '));
           it('expands the middle panel', function() {
@@ -478,47 +478,48 @@ describe('<pf-accordion>', function() {
 
         describe('Tab', function() {
           beforeEach(press('Tab'));
-          it('moves focus to the body', function() {
-            expect(document.activeElement).to.equal(document.body);
+          it('moves focus to the body', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
           });
         });
 
 
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
-          it('moves focus to the last header', function() {
-            expect(document.activeElement).to.equal(header3);
+          it('moves focus to the last header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header3);
           });
         });
 
         describe('ArrowUp', function() {
           beforeEach(press('ArrowUp'));
-          it('moves focus to the first header', function() {
-            expect(document.activeElement).to.equal(header1);
+          it('moves focus to the first header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header1);
           });
         });
 
         describe('Home', function() {
           beforeEach(press('Home'));
-          it('moves focus to the first header', function() {
-            expect(document.activeElement).to.equal(header1);
+          it('moves focus to the first header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header1);
           });
         });
 
         describe('End', function() {
           beforeEach(press('End'));
-          it('moves focus to the last header', function() {
-            expect(document.activeElement).to.equal(header3);
+          it('moves focus to the last header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header3);
           });
         });
       });
 
-      describe('when focus is on the last header', function() {
-        beforeEach(async function() {
+      describe('calling focus() on the last header', function() {
+        beforeEach(function() {
           header3.focus();
-          await nextFrame();
         });
 
+        beforeEach(nextFrame);
+
         describe('Space', function() {
           beforeEach(press(' '));
           it('expands the last panel', function() {
@@ -555,50 +556,54 @@ describe('<pf-accordion>', function() {
 
         describe('Shift+Tab', function() {
           beforeEach(press('Shift+Tab'));
-          it('moves focus to the body', function() {
-            expect(document.activeElement).to.equal(document.body);
+          it('moves focus to the body', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
           });
         });
 
-
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
-          it('moves focus to the first header', function() {
-            expect(document.activeElement).to.equal(header1);
+          it('moves focus to the first header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header1);
           });
         });
 
         describe('ArrowUp', function() {
           beforeEach(press('ArrowUp'));
-          it('moves focus to the middle header', function() {
-            expect(document.activeElement).to.equal(header2);
+          it('moves focus to the middle header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header2);
           });
         });
 
         describe('Home', function() {
           beforeEach(press('Home'));
-          it('moves focus to the first header', function() {
-            expect(document.activeElement).to.equal(header1);
+          it('moves focus to the first header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header1);
           });
         });
 
         describe('End', function() {
           beforeEach(press('End'));
-          it('moves focus to the last header', function() {
-            expect(document.activeElement).to.equal(header3);
+          it('moves focus to the last header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(header3);
           });
         });
       });
 
-      describe('when the first panel is expanded', function() {
-        beforeEach(async function() {
+      describe('expand(0)', function() {
+        beforeEach(function() {
           element.expand(0);
-          await aTimeout(500);
         });
 
-        describe('and focus is on the first header', function() {
+        beforeEach(nextFrame);
+
+        describe('calling focus() on the first header', function() {
+          beforeEach(function() {
+            header1.focus();
+          });
           describe('Space', function() {
             beforeEach(press(' '));
+            beforeEach(nextFrame);
             it('collapses the first panel', function() {
               expect(panel1.expanded).to.be.false;
               expect(panel2.expanded).to.be.false;
@@ -617,27 +622,29 @@ describe('<pf-accordion>', function() {
 
           describe('Tab', function() {
             beforeEach(press('Tab'));
-            it('moves focus to the link in the first panel', function() {
-              expect(document.activeElement).to.equal(panel1.querySelector('a'));
+            it('moves focus to the link in the first panel', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(panel1.querySelector('a'));
             });
+
             describe('Tab', function() {
               beforeEach(press('Tab'));
-              it('moves focus to the body', function() {
-                expect(document.activeElement).to.equal(document.body);
+              it('moves focus to the body', async function() {
+                expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
               });
               describe('Shift+Tab', function() {
                 beforeEach(press('Shift+Tab'));
-                it('keeps focus on the link in the first panel', function() {
-                  expect(document.activeElement).to.equal(panel1.querySelector('a'));
+                it('keeps focus on the link in the first panel', async function() {
+                  expect(await a11ySnapshot()).to.have.axTreeFocusOn(panel1.querySelector('a'));
                 });
               });
             });
+
             describe('Space', function() {
               beforeEach(press(' '));
               describe('ArrowDown', function() {
                 beforeEach(press('ArrowDown'));
-                it('keeps focus on the link in the first panel', function() {
-                  expect(document.activeElement).to.equal(panel1.querySelector('a'));
+                it('keeps focus on the link in the first panel', async function() {
+                  expect(await a11ySnapshot()).to.have.axTreeFocusOn(panel1.querySelector('a'));
                 });
                 it('does not open other panels', function() {
                   expect(panel1.expanded).to.be.true;
@@ -648,8 +655,8 @@ describe('<pf-accordion>', function() {
 
               describe('ArrowUp', function() {
                 beforeEach(press('ArrowUp'));
-                it('keeps focus on the link in the first panel', function() {
-                  expect(document.activeElement).to.equal(panel1.querySelector('a'));
+                it('keeps focus on the link in the first panel', async function() {
+                  expect(await a11ySnapshot()).to.have.axTreeFocusOn(panel1.querySelector('a'));
                 });
                 it('does not open other panels', function() {
                   expect(panel1.expanded).to.be.true;
@@ -661,8 +668,8 @@ describe('<pf-accordion>', function() {
               describe('Home', function() {
                 beforeEach(press('Home'));
 
-                it('keeps focus on the link in the first panel', function() {
-                  expect(document.activeElement).to.equal(panel1.querySelector('a'));
+                it('keeps focus on the link in the first panel', async function() {
+                  expect(await a11ySnapshot()).to.have.axTreeFocusOn(panel1.querySelector('a'));
                 });
 
                 it('does not open other panels', function() {
@@ -674,8 +681,8 @@ describe('<pf-accordion>', function() {
 
               describe('End', function() {
                 beforeEach(press('End'));
-                it('keeps focus on the link in the first panel', function() {
-                  expect(document.activeElement).to.equal(panel1.querySelector('a'));
+                it('keeps focus on the link in the first panel', async function() {
+                  expect(await a11ySnapshot()).to.have.axTreeFocusOn(panel1.querySelector('a'));
                 });
                 it('does not open other panels', function() {
                   expect(panel1.expanded).to.be.true;
@@ -688,16 +695,17 @@ describe('<pf-accordion>', function() {
 
           describe('Shift+Tab', function() {
             beforeEach(press('Shift+Tab'));
-            it('moves focus to the body', function() {
-              expect(document.activeElement).to.equal(document.body);
+            it('moves focus to the body', async function() {
+              const snapshot = await a11ySnapshot();
+              expect(querySnapshot(snapshot, { focused: true })).to.not.be.ok;
             });
           });
 
           describe('ArrowDown', function() {
             beforeEach(press('ArrowDown'));
 
-            it('moves focus to the second header', function() {
-              expect(document.activeElement).to.equal(header2);
+            it('moves focus to the second header', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(header2);
             });
 
             it('does not open other panels', function() {
@@ -710,8 +718,8 @@ describe('<pf-accordion>', function() {
           describe('ArrowUp', function() {
             beforeEach(press('ArrowUp'));
 
-            it('moves focus to the last header', function() {
-              expect(document.activeElement).to.equal(header3);
+            it('moves focus to the last header', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(header3);
             });
 
             it('does not open other panels', function() {
@@ -723,8 +731,8 @@ describe('<pf-accordion>', function() {
 
           describe('Home', function() {
             beforeEach(press('Home'));
-            it('moves focus to the first header', function() {
-              expect(document.activeElement).to.equal(header1);
+            it('moves focus to the first header', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(header1);
             });
 
             it('does not open other panels', function() {
@@ -736,8 +744,8 @@ describe('<pf-accordion>', function() {
 
           describe('End', function() {
             beforeEach(press('End'));
-            it('moves focus to the last header', function() {
-              expect(document.activeElement).to.equal(header3);
+            it('moves focus to the last header', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(header3);
             });
             it('does not open other panels', function() {
               expect(panel1.expanded).to.be.true;
@@ -747,23 +755,29 @@ describe('<pf-accordion>', function() {
           });
         });
 
-        describe('and focus is on the middle header', function() {
-          beforeEach(press('Tab'));
-          beforeEach(press('Tab'));
+        describe('calling focus() on the middle header', function() {
+          beforeEach(function() {
+            header2.focus();
+          });
 
           describe('Shift+Tab', function() {
             beforeEach(press('Shift+Tab'));
+            beforeEach(nextFrame);
             it('moves focus to the link in first panel', async function() {
-              expect(document.activeElement).to.equal(panel1.querySelector('a'));
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(panel1.querySelector('a'));
             });
           });
         });
       });
 
-      describe('when the middle panel is expanded', function() {
-        beforeEach(async function() {
+      describe('expand(1)', function() {
+        beforeEach(function() {
           element.expand(1);
-          await nextFrame();
+        });
+
+        beforeEach(nextFrame);
+
+        it('sets the expanded property on the second panel', function() {
           expect(panel2.expanded).to.be.true;
         });
 
@@ -773,12 +787,13 @@ describe('<pf-accordion>', function() {
           expect(panel3.hidden, 'panel3').to.be.true;
         });
 
-        describe('and focus is on the middle header', function() {
-          beforeEach(async function() {
+        describe('calling focus() on the middle header', function() {
+          beforeEach(function() {
             header2.focus();
-            await nextFrame();
           });
 
+          beforeEach(nextFrame);
+
           describe('Space', function() {
             beforeEach(press(' '));
             it('collapses the second panel', function() {
@@ -799,65 +814,71 @@ describe('<pf-accordion>', function() {
 
           describe('Tab', function() {
             beforeEach(press('Tab'));
-            it('moves focus to the link in the second panel', function() {
-              expect(document.activeElement).to.equal(panel2.querySelector('a'));
+            it('moves focus to the link in the second panel', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(panel2.querySelector('a'));
             });
           });
 
           describe('Shift+Tab', function() {
             beforeEach(press('Shift+Tab'));
-            it('moves focus to the body', function() {
-              expect(document.activeElement).to.equal(document.body);
+            it('moves focus to the body', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
             });
           });
 
           describe('ArrowUp', function() {
             beforeEach(press('ArrowUp'));
-            it('moves focus to the first header', function() {
-              expect(document.activeElement).to.equal(header1);
+            it('moves focus to the first header', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(header1);
             });
           });
 
           describe('ArrowDown', function() {
             beforeEach(press('ArrowDown'));
-            it('moves focus to the last header', function() {
-              expect(document.activeElement).to.equal(header3);
+            it('moves focus to the last header', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(header3);
             });
           });
         });
 
-        describe('and focus is on the last header', function() {
-          beforeEach(async function() {
+        describe('calling focus() on the last header', function() {
+          beforeEach(function() {
             header3.focus();
-            await nextFrame();
           });
 
+          beforeEach(nextFrame);
+
           describe('Shift+Tab', function() {
             beforeEach(press('Shift+Tab'));
-            it('moves focus to the link in middle panel', function() {
-              expect(document.activeElement).to.equal(panel2.querySelector('a'));
+            it('moves focus to the link in middle panel', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(panel2.querySelector('a'));
             });
           });
         });
       });
 
-      describe('when the last panel is expanded', function() {
-        beforeEach(async function() {
+      describe('expand(2)', function() {
+        beforeEach(function() {
           element.expand(2);
-          await nextFrame();
+        });
+
+        beforeEach(nextFrame);
+
+        it('sets the expanded property on the last panel', function() {
           expect(panel3.expanded).to.be.true;
         });
 
-        describe('when focus is on the last header', function() {
-          beforeEach(async function() {
+        describe('calling focus() is on the last header', function() {
+          beforeEach(function() {
             header3.focus();
-            await nextFrame();
           });
 
+          beforeEach(nextFrame);
+
           describe('Tab', function() {
             beforeEach(press('Tab'));
-            it('moves focus to the link in last panel', function() {
-              expect(document.activeElement).to.equal(panel3.querySelector('a'));
+            it('moves focus to the link in last panel', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(panel3.querySelector('a'));
             });
           });
         });
@@ -867,7 +888,7 @@ describe('<pf-accordion>', function() {
 
   describe('with single attribute', function() {
     beforeEach(async function() {
-      element = await createFixture<PfAccordion>(html`
+      element = await fixture<PfAccordion>(html`
         <pf-accordion single>
           <pf-accordion-header id="header1" data-index="0">
             <h3>Consetetur sadipscing elitr?</h3>
@@ -931,7 +952,7 @@ describe('<pf-accordion>', function() {
 
   describe('with expanded attribute on two headers', function() {
     beforeEach(async function() {
-      element = await createFixture<PfAccordion>(html`
+      element = await fixture<PfAccordion>(html`
         <pf-accordion>
           <pf-accordion-header data-index="0" expanded><h2>h</h2></pf-accordion-header>
           <pf-accordion-panel data-index="0"><p>p</p></pf-accordion-panel>
@@ -960,7 +981,7 @@ describe('<pf-accordion>', function() {
 
   describe('with single attribute and expanded attribute on two headers', function() {
     beforeEach(async function() {
-      element = await createFixture<PfAccordion>(html`
+      element = await fixture<PfAccordion>(html`
         <pf-accordion single>
           <pf-accordion-header data-index="0" expanded><h2>h</h2></pf-accordion-header>
           <pf-accordion-panel data-index="0"><p>p</p></pf-accordion-panel>
@@ -990,7 +1011,7 @@ describe('<pf-accordion>', function() {
 
   describe('with no h* tag in heading lightdom', function() {
     beforeEach(async function() {
-      element = await createFixture<PfAccordion>(html`
+      element = await fixture<PfAccordion>(html`
       <pf-accordion id="badHeader">
         <pf-accordion-header id="bad-header-element">
           Bad Header
@@ -1008,116 +1029,94 @@ describe('<pf-accordion>', function() {
     });
   });
 
-  describe('with nested pf-accordion', function() {
-    let topLevelHeaderOne: PfAccordionHeader;
-    let topLevelHeaderTwo: PfAccordionHeader;
+  describe('with nested <pf-accordion>', function() {
+    let topLevelHeader1: PfAccordionHeader;
+    let topLevelHeader2: PfAccordionHeader;
 
-    let topLevelPanelOne: PfAccordionPanel;
-    let topLevelPanelTwo: PfAccordionPanel;
+    let topLevelPanel1: PfAccordionPanel;
+    let topLevelPanel2: PfAccordionPanel;
 
-    let nestedHeaderOne: PfAccordionHeader;
-    let nestedHeaderTwo: PfAccordionHeader;
-    let nestedHeaderThree: PfAccordionHeader;
+    let nestedHeader1: PfAccordionHeader;
+    let nestedHeader2: PfAccordionHeader;
+    let nestedHeader3: PfAccordionHeader;
 
-    let nestedPanelOne: PfAccordionPanel;
-    let nestedPanelTwo: PfAccordionPanel;
-    let nestedPanelThree: PfAccordionPanel;
+    let nestedPanel1: PfAccordionPanel;
+    let nestedPanel2: PfAccordionPanel;
+    let nestedPanel3: PfAccordionPanel;
 
     beforeEach(async function() {
-      element = await createFixture<PfAccordion>(html`
+      element = await fixture<PfAccordion>(html`
         <pf-accordion>
-          <pf-accordion-header id="header-1" data-index="0">
-            top-header-1
-          </pf-accordion-header>
+          <pf-accordion-header id="header-1" data-index="0">top-header-1</pf-accordion-header>
           <pf-accordion-panel id="panel-1" data-index="0">
             top-panel-1
             <pf-accordion>
-              <pf-accordion-header id="header-1-1" data-index="0-1">
-                nest-1-header-1
-              </pf-accordion-header>
-              <pf-accordion-panel id="panel-1-1" data-index="0-1">
-                nest-1-panel-1
-              </pf-accordion-panel>
+              <pf-accordion-header id="header-1-1" data-index="0-1">nest-1-header-1</pf-accordion-header>
+              <pf-accordion-panel id="panel-1-1" data-index="0-1">nest-1-panel-1</pf-accordion-panel>
             </pf-accordion>
           </pf-accordion-panel>
-          <pf-accordion-header id="header-2" data-index="2">
-            top-header-2
-          </pf-accordion-header>
+          <pf-accordion-header id="header-2" data-index="2">top-header-2</pf-accordion-header>
           <pf-accordion-panel id="panel-2" data-panel="2">
             top-panel-2
             <pf-accordion single>
-              <pf-accordion-header id="header-2-1" data-index="1-0">
-                nest-2-header-1
-              </pf-accordion-header>
-              <pf-accordion-panel id="panel-2-1" data-index="1-0">
-                nest-2-header-1
-              </pf-accordion-panel>
-              <pf-accordion-header id="header-2-2" data-index="1-1">
-                nest-2-header-2
-              </pf-accordion-header>
-              <pf-accordion-panel id="panel-2-2" data-index="1-1">
-                nest-2-panel-2
-              </pf-accordion-panel>
-              <pf-accordion-header id="header-2-3" data-index="1-2">
-                nest-2-header-3
-              </pf-accordion-header>
-              <pf-accordion-panel id="panel-2-3" data-index="1-2">
-                nest-2-panel-3
-              </pf-accordion-panel>
+              <pf-accordion-header id="header-2-1" data-index="1-0">nest-2-header-1</pf-accordion-header>
+              <pf-accordion-panel id="panel-2-1" data-index="1-0">nest-2-header-1</pf-accordion-panel>
+              <pf-accordion-header id="header-2-2" data-index="1-1">nest-2-header-2</pf-accordion-header>
+              <pf-accordion-panel id="panel-2-2" data-index="1-1">nest-2-panel-2</pf-accordion-panel>
+              <pf-accordion-header id="header-2-3" data-index="1-2">nest-2-header-3</pf-accordion-header>
+              <pf-accordion-panel id="panel-2-3" data-index="1-2">nest-2-panel-3</pf-accordion-panel>
             </pf-accordion>
           </pf-accordion-panel>
-          <pf-accordion-header id="header-3" data-index="2">
-            top-header-3
-          </pf-accordion-header>
-          <pf-accordion-panel id="panel-3" data-index="2">
-            top-panel-3
-          </pf-accordion-panel>
+          <pf-accordion-header id="header-3" data-index="2">top-header-3</pf-accordion-header>
+          <pf-accordion-panel id="panel-3" data-index="2">top-panel-3</pf-accordion-panel>
         </pf-accordion>
       `);
-      topLevelHeaderOne = document.getElementById('header-1') as PfAccordionHeader;
-      topLevelHeaderTwo = document.getElementById('header-2') as PfAccordionHeader;
-
-      topLevelPanelOne = document.getElementById('panel-1') as PfAccordionPanel;
-      topLevelPanelTwo = document.getElementById('panel-2') as PfAccordionPanel;
+      topLevelHeader1 = document.getElementById('header-1') as PfAccordionHeader;
+      topLevelHeader2 = document.getElementById('header-2') as PfAccordionHeader;
 
-      nestedHeaderOne = document.getElementById('header-2-1') as PfAccordionHeader;
-      nestedHeaderTwo = document.getElementById('header-2-2') as PfAccordionHeader;
-      nestedHeaderThree = document.getElementById('header-2-3') as PfAccordionHeader;
+      topLevelPanel1 = document.getElementById('panel-1') as PfAccordionPanel;
+      topLevelPanel2 = document.getElementById('panel-2') as PfAccordionPanel;
 
-      nestedPanelOne = document.getElementById('panel-2-1') as PfAccordionPanel;
-      nestedPanelTwo = document.getElementById('panel-2-2') as PfAccordionPanel;
-      nestedPanelThree = document.getElementById('panel-2-3') as PfAccordionPanel;
+      nestedHeader1 = document.getElementById('header-2-1') as PfAccordionHeader;
+      nestedHeader2 = document.getElementById('header-2-2') as PfAccordionHeader;
+      nestedHeader3 = document.getElementById('header-2-3') as PfAccordionHeader;
 
-      await allUpdates(element);
+      nestedPanel1 = document.getElementById('panel-2-1') as PfAccordionPanel;
+      nestedPanel2 = document.getElementById('panel-2-2') as PfAccordionPanel;
+      nestedPanel3 = document.getElementById('panel-2-3') as PfAccordionPanel;
     });
 
+    beforeEach(() => allUpdates(element));
+
     describe('clicking the first top-level heading', function() {
       beforeEach(async function() {
-        await clickElementAtCenter(topLevelHeaderOne);
-        await allUpdates(element);
+        await clickElementAtCenter(topLevelHeader1);
       });
+
+      beforeEach(() => allUpdates(element));
+
       describe('then clicking the second top-level heading', function() {
         beforeEach(async function() {
-          await clickElementAtCenter(topLevelHeaderTwo);
-          await allUpdates(element);
+          await clickElementAtCenter(topLevelHeader2);
         });
+        beforeEach(() => allUpdates(element));
         describe('then clicking the first nested heading', function() {
           beforeEach(async function() {
-            await clickElementAtCenter(nestedHeaderOne);
-            await allUpdates(element);
+            await clickElementAtCenter(nestedHeader1);
           });
+          beforeEach(() => allUpdates(element));
           describe('then clicking the second nested heading', function() {
             beforeEach(async function() {
-              await clickElementAtCenter(nestedHeaderTwo);
-              await allUpdates(element);
+              await clickElementAtCenter(nestedHeader2);
             });
+            beforeEach(() => allUpdates(element));
             it('expands the first top-level pair', async function() {
               const snapshot = await a11ySnapshot();
               const expanded = snapshot?.children?.find(x => x.expanded);
-              expect(expanded?.name).to.equal(topLevelHeaderOne.textContent?.trim());
-              expect(topLevelHeaderOne.expanded).to.be.true;
-              expect(topLevelPanelOne.hasAttribute('expanded')).to.be.true;
-              expect(topLevelPanelOne.expanded).to.be.true;
+              expect(expanded?.name).to.equal(topLevelHeader1.textContent?.trim());
+              expect(topLevelHeader1.expanded).to.be.true;
+              expect(topLevelPanel1.hasAttribute('expanded')).to.be.true;
+              expect(topLevelPanel1.expanded).to.be.true;
             });
             it('collapses the second top-level pair', async function() {
               const snapshot = await a11ySnapshot();
@@ -1137,145 +1136,163 @@ describe('<pf-accordion>', function() {
       });
     });
 
-    describe('for assistive technology', function() {
-      describe('with all panels closed', function() {
-        it('applies hidden attribute to all panels', function() {
-          expect(topLevelPanelOne.hidden, 'panel-1').to.be.true;
-          expect(topLevelPanelTwo.hidden, 'panel-2').to.be.true;
-          expect(nestedPanelOne.hidden, 'panel-1-1').to.be.true;
-          expect(nestedPanelTwo.hidden, 'panel-2-2').to.be.true;
-          expect(nestedPanelThree.hidden, 'panel-2-3').to.be.true;
-        });
+    describe('with all panels closed', function() {
+      it('applies hidden attribute to all panels', function() {
+        expect(topLevelPanel1.hidden, 'panel-1').to.be.true;
+        expect(topLevelPanel2.hidden, 'panel-2').to.be.true;
+        expect(nestedPanel1.hidden, 'panel-1-1').to.be.true;
+        expect(nestedPanel2.hidden, 'panel-2-2').to.be.true;
+        expect(nestedPanel3.hidden, 'panel-2-3').to.be.true;
       });
+    });
 
-      describe('with all panels open', function() {
-        beforeEach(async function() {
-          await Promise.all(Array.from(
-            document.querySelectorAll('pf-accordion'),
-            accordion => accordion.expandAll(),
-          ));
-          await nextFrame();
-        });
-        it('removes hidden attribute from all panels', function() {
-          expect(topLevelPanelOne.hidden, 'panel-1').to.be.false;
-          expect(topLevelPanelTwo.hidden, 'panel-2').to.be.false;
-          expect(nestedPanelOne.hidden, 'panel-1-1').to.be.false;
-          expect(nestedPanelTwo.hidden, 'panel-2-2').to.be.false;
-          expect(nestedPanelThree.hidden, 'panel-2-3').to.be.false;
-        });
+    describe('calling expandAll() on all accordions', function() {
+      beforeEach(() => Promise.all(Array.from(document.querySelectorAll('pf-accordion'), a =>
+        a.expandAll())));
+
+      beforeEach(nextFrame);
+
+      it('removes hidden attribute from all panels', function() {
+        expect(topLevelPanel1.hidden, 'panel-1').to.be.false;
+        expect(topLevelPanel2.hidden, 'panel-2').to.be.false;
+        expect(nestedPanel1.hidden, 'panel-1-1').to.be.false;
+        expect(nestedPanel2.hidden, 'panel-2-2').to.be.false;
+        expect(nestedPanel3.hidden, 'panel-2-3').to.be.false;
       });
+    });
 
-      describe('when focus is on the first header of the parent accordion', function() {
-        beforeEach(async function() {
-          topLevelHeaderOne.focus();
-          await nextFrame();
-        });
+    describe('calling focus() on the first header of the parent accordion', function() {
+      beforeEach(function() {
+        topLevelHeader1.focus();
+      });
 
-        describe('Space', function() {
-          beforeEach(press(' '));
-          it('expands the first panel', function() {
-            expect(topLevelPanelOne.expanded).to.be.true;
-            expect(topLevelPanelTwo.expanded).to.be.false;
-            expect(nestedPanelOne.expanded).to.be.false;
-            expect(nestedPanelTwo.expanded).to.be.false;
-          });
-          it('removes hidden attribute from the first panel', function() {
-            expect(topLevelPanelOne.hidden, 'panel-1').to.be.false;
-            expect(topLevelPanelTwo.hidden, 'panel-2').to.be.true;
-            expect(nestedPanelOne.hidden, 'panel-1-1').to.be.true;
-            expect(nestedPanelTwo.hidden, 'panel-2-2').to.be.true;
-          });
-        });
+      beforeEach(nextFrame);
 
-        describe('Tab', function() {
-          beforeEach(press('Tab'));
-          it('moves focus to the body', function() {
-            expect(document.activeElement).to.equal(document.body);
-          });
+      describe('Space', function() {
+        beforeEach(press(' '));
+        it('expands the first panel', function() {
+          expect(topLevelPanel1.expanded).to.be.true;
+          expect(topLevelPanel2.expanded).to.be.false;
+          expect(nestedPanel1.expanded).to.be.false;
+          expect(nestedPanel2.expanded).to.be.false;
+        });
+        it('removes hidden attribute from the first panel', function() {
+          expect(topLevelPanel1.hidden, 'panel-1').to.be.false;
+          expect(topLevelPanel2.hidden, 'panel-2').to.be.true;
+          expect(nestedPanel1.hidden, 'panel-1-1').to.be.true;
+          expect(nestedPanel2.hidden, 'panel-2-2').to.be.true;
         });
       });
 
-      describe('when focus is on the last header of the parent accordion', function() {
-        beforeEach(async function() {
-          topLevelHeaderTwo.focus();
-          await nextFrame();
+      describe('Tab', function() {
+        beforeEach(press('Tab'));
+        it('moves focus to the body', async function() {
+          expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
         });
+      });
+    });
 
-        describe('Space', function() {
-          beforeEach(press(' '));
-          it('expands the first panel', function() {
-            expect(topLevelPanelOne.expanded).to.be.false;
-            expect(topLevelPanelTwo.expanded).to.be.true;
-            expect(nestedPanelOne.expanded).to.be.false;
-            expect(nestedPanelTwo.expanded).to.be.false;
-          });
-          it('removes hidden attribute from the first panel', function() {
-            expect(topLevelPanelOne.hidden, 'panel-2').to.be.true;
-            expect(topLevelPanelTwo.hidden, 'panel-1').to.be.false;
-            expect(nestedPanelOne.hidden, 'panel-1-1').to.be.true;
-            expect(nestedPanelTwo.hidden, 'panel-2-2').to.be.true;
-          });
+    describe('calling focus() on the second header of the parent accordion', function() {
+      beforeEach(function() {
+        topLevelHeader2.focus();
+      });
+
+      beforeEach(nextFrame);
+
+      describe('Space', function() {
+        beforeEach(press(' '));
+        beforeEach(nextFrame);
+        it('expands the panel containing the nested <pf-accordion>', async function() {
+          expect(await a11ySnapshot()).to.have.axContainName('nest-2-header-1');
         });
+        describe('Tab', function() {
+          beforeEach(press('Tab'));
+          beforeEach(nextFrame);
 
-        describe('Navigating from parent to child accordion', function() {
-          describe('Opening the panel containing the nested accordion and pressing TAB', function() {
-            beforeEach(press('Space'));
-            beforeEach(press('Tab'));
-            it('moves focus to the nested accordion header', function() {
-              expect(document.activeElement).to.equal(nestedHeaderOne);
-            });
+          it('moves focus to the first nested header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(nestedHeader1);
+          });
 
-            describe('ArrowUp', function() {
-              beforeEach(press('ArrowUp'));
-              it('moves focus to the last header', function() {
-                expect(document.activeElement).to.equal(nestedHeaderThree);
-              });
+          describe('ArrowUp', function() {
+            beforeEach(press('ArrowUp'));
+            beforeEach(nextFrame);
+            it('moves focus to the last nested header', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(nestedHeader3);
             });
+          });
 
-            describe('ArrowLeft', function() {
-              beforeEach(press('ArrowLeft'));
-              it('moves focus to the last header', function() {
-                expect(document.activeElement).to.equal(nestedHeaderThree);
-              });
+          describe('ArrowLeft', function() {
+            beforeEach(press('ArrowLeft'));
+            beforeEach(nextFrame);
+            it('moves focus to the last nested header', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(nestedHeader3);
             });
+          });
 
-            describe('ArrowDown', function() {
-              beforeEach(press('ArrowDown'));
-              it('moves focus to the second header', function() {
-                expect(document.activeElement).to.equal(nestedHeaderTwo);
-              });
+          describe('ArrowDown', function() {
+            beforeEach(press('ArrowDown'));
+            beforeEach(nextFrame);
+            it('moves focus to the second nested header', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(nestedHeader2);
             });
+          });
 
-            describe('ArrowRight', function() {
-              beforeEach(press('ArrowRight'));
-              it('moves focus to the second header', function() {
-                expect(document.activeElement).to.equal(nestedHeaderTwo);
-              });
+          describe('ArrowRight', function() {
+            beforeEach(press('ArrowRight'));
+            beforeEach(nextFrame);
+            it('moves focus to the second nested header', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(nestedHeader2);
             });
+          });
 
-            describe('Tab', function() {
-              beforeEach(press('Tab'));
-              it('should move focus back to the body', function() {
-                expect(document.activeElement).to.equal(document.body);
-              });
+          describe('Tab', function() {
+            beforeEach(press('Tab'));
+            beforeEach(nextFrame);
+            it('should move focus back to the body', async function() {
+              expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
             });
           });
         });
       });
     });
+
+    describe('calling focus() on the last header of the parent accordion', function() {
+      beforeEach(function() {
+        topLevelHeader2.focus();
+      });
+
+      beforeEach(nextFrame);
+
+      describe('Space', function() {
+        beforeEach(press(' '));
+        it('expands the first panel', function() {
+          expect(topLevelPanel1.expanded).to.be.false;
+          expect(topLevelPanel2.expanded).to.be.true;
+          expect(nestedPanel1.expanded).to.be.false;
+          expect(nestedPanel2.expanded).to.be.false;
+        });
+
+        it('removes hidden attribute from the first panel', function() {
+          expect(topLevelPanel1.hidden, 'panel-2').to.be.true;
+          expect(topLevelPanel2.hidden, 'panel-1').to.be.false;
+          expect(nestedPanel1.hidden, 'panel-1-1').to.be.true;
+          expect(nestedPanel2.hidden, 'panel-2-2').to.be.true;
+        });
+      });
+    });
   });
 
-  describe('with multiple pf-accordion', function() {
+  describe('with multiple <pf-accordion> elements', function() {
     let multipleAccordionElements: HTMLElement;
 
-    let accordionOneHeaderOne: PfAccordionHeader;
-    let accordionOnePanelOne: PfAccordionPanel;
+    let accordion1Header1: PfAccordionHeader;
+    let accordion1Panel1: PfAccordionPanel;
 
-    let accordionTwoHeaderOne: PfAccordionHeader;
-    let accordionTwoPanelOne: PfAccordionPanel;
+    let accordion2Header1: PfAccordionHeader;
+    let accordion2Panel1: PfAccordionPanel;
 
     beforeEach(async function() {
-      multipleAccordionElements = await createFixture<HTMLElement>(html`
+      multipleAccordionElements = await fixture<HTMLElement>(html`
       <div>
         <pf-accordion>
           <pf-accordion-header id="header-1-1" data-index="0"></pf-accordion-header>
@@ -1287,64 +1304,62 @@ describe('<pf-accordion>', function() {
         </pf-accordion>
       </div>
       `);
-      accordionOneHeaderOne = document.getElementById('header-1-1') as PfAccordionHeader;
+      accordion1Header1 = document.getElementById('header-1-1') as PfAccordionHeader;
 
-      accordionOnePanelOne = document.getElementById('panel-1-1') as PfAccordionPanel;
+      accordion1Panel1 = document.getElementById('panel-1-1') as PfAccordionPanel;
 
-      accordionTwoHeaderOne = document.getElementById('header-2-1') as PfAccordionHeader;
+      accordion2Header1 = document.getElementById('header-2-1') as PfAccordionHeader;
 
-      accordionTwoPanelOne = document.getElementById('panel-2-1') as PfAccordionPanel;
+      accordion2Panel1 = document.getElementById('panel-2-1') as PfAccordionPanel;
     });
 
-    describe('for assistive technology', function() {
-      describe('with all panels closed', function() {
-        it('applies hidden attribute to all panels', function() {
-          expect(accordionOnePanelOne.hidden, 'panel-1-1').to.be.true;
-          expect(accordionTwoPanelOne.hidden, 'panel-2-1').to.be.true;
-        });
+    it('applies hidden attribute to all panels', function() {
+      expect(accordion1Panel1.hidden, 'panel-1-1').to.be.true;
+      expect(accordion2Panel1.hidden, 'panel-2-1').to.be.true;
+    });
+
+    describe('clicking every header', function() {
+      beforeEach(async function() {
+        for (const header of multipleAccordionElements.querySelectorAll('pf-accordion-header')) {
+          await clickElementAtCenter(header);
+        }
       });
 
-      describe('with all panels open', function() {
-        beforeEach(async function() {
-          for (const header of multipleAccordionElements.querySelectorAll('pf-accordion-header')) {
-            await clickElementAtCenter(header);
-          }
-          await nextFrame();
-        });
-        it('removes hidden attribute from all panels', function() {
-          expect(accordionOnePanelOne.hidden, 'panel-1-1').to.be.false;
-          expect(accordionTwoPanelOne.hidden, 'panel-2-1').to.be.false;
-        });
+      beforeEach(nextFrame);
+
+      it('removes hidden attribute from all panels', function() {
+        expect(accordion1Panel1.hidden, 'panel-1-1').to.be.false;
+        expect(accordion2Panel1.hidden, 'panel-2-1').to.be.false;
       });
+    });
 
-      describe('when focus is on the first header of the first accordion', function() {
-        beforeEach(async function() {
-          accordionOneHeaderOne.focus();
-          await nextFrame();
-        });
+    describe('calling focus() on the first header of the first accordion', function() {
+      beforeEach(function() {
+        accordion1Header1.focus();
+      });
+      beforeEach(nextFrame);
 
-        describe('Space', function() {
-          beforeEach(press(' '));
-          it('expands the first panel', function() {
-            expect(accordionOnePanelOne.expanded).to.be.true;
-            expect(accordionTwoPanelOne.expanded).to.be.false;
-          });
-          it('removes hidden attribute from the first panel', function() {
-            expect(accordionOnePanelOne.hidden, 'panel-1-1').to.be.false;
-            expect(accordionTwoPanelOne.hidden, 'panel-1-1').to.be.true;
-          });
+      describe('Space', function() {
+        beforeEach(press(' '));
+        it('expands the first panel', function() {
+          expect(accordion1Panel1.expanded).to.be.true;
+          expect(accordion2Panel1.expanded).to.be.false;
+        });
+        it('removes hidden attribute from the first panel', function() {
+          expect(accordion1Panel1.hidden, 'panel-1-1').to.be.false;
+          expect(accordion2Panel1.hidden, 'panel-1-1').to.be.true;
         });
+      });
 
-        describe('Tab', function() {
-          beforeEach(press('Tab'));
-          it('moves focus to the second accordion', function() {
-            expect(document.activeElement).to.equal(accordionTwoHeaderOne);
-          });
-          describe('Shift+Tab', function() {
-            beforeEach(press('Shift+Tab'));
-            it('moves focus back to the first accordion', function() {
-              expect(document.activeElement).to.equal(accordionOneHeaderOne);
-            });
+      describe('Tab', function() {
+        beforeEach(press('Tab'));
+        it('moves focus to the second accordion', async function() {
+          expect(await a11ySnapshot()).to.have.axTreeFocusOn(accordion2Header1);
+        });
+        describe('Shift+Tab', function() {
+          beforeEach(press('Shift+Tab'));
+          it('moves focus to the first accordion, first header', async function() {
+            expect(await a11ySnapshot()).to.have.axTreeFocusOn(accordion1Header1);
           });
         });
       });
@@ -1359,7 +1374,7 @@ describe('<pf-accordion>', function() {
     let accordionPanelOne: PfAccordionPanel;
 
     beforeEach(async function() {
-      element = await createFixture<PfAccordion>(html`
+      element = await fixture<PfAccordion>(html`
           <pf-accordion>
             <pf-accordion-header expanded id="header-1-1" data-index="0"></pf-accordion-header>
             <pf-accordion-panel id="panel-1-1" data-index="0">
diff --git a/elements/pf-chip/pf-chip-group.css b/elements/pf-chip/pf-chip-group.css
index c3561c316a..71a072df48 100644
--- a/elements/pf-chip/pf-chip-group.css
+++ b/elements/pf-chip/pf-chip-group.css
@@ -80,12 +80,15 @@ svg {
   height: var(--pf-global--FontSize--sm, 14px);
 }
 
-.offscreen {
-  position: absolute;
-  left: -99999;
-  width: 0;
-  height: 0;
-  opacity: 0;
+.visually-hidden {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  block-size: 1px;
+  margin: -1px;
   overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
 }
 
diff --git a/elements/pf-chip/pf-chip-group.ts b/elements/pf-chip/pf-chip-group.ts
index 2ca7a6abcd..266a734e2a 100644
--- a/elements/pf-chip/pf-chip-group.ts
+++ b/elements/pf-chip/pf-chip-group.ts
@@ -1,10 +1,11 @@
-import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';
+import { LitElement, html, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
 import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
 import { classMap } from 'lit/directives/class-map.js';
 
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
 
 import { PfChip, PfChipRemoveEvent } from './pf-chip.js';
@@ -86,23 +87,55 @@ export class PfChipGroup extends LitElement {
    */
   @property({ reflect: true, type: Boolean }) closeable = false;
 
-  @query('#overflow') private _overflowChip?: HTMLButtonElement;
+  @query('#overflow') private _overflowChip?: PfChip;
 
   @query('#close-button') private _button?: HTMLButtonElement;
 
   @queryAssignedNodes({ slot: 'category-name', flatten: true }) private _categorySlotted?: Node[];
 
-  #chips: PfChip[] = [];
-
-  #buttons: HTMLElement[] = [];
+  get #chips(): NodeListOf<PfChip> {
+    return this.querySelectorAll<PfChip>('pf-chip:not([slot]):not([overflow-chip])');
+  }
 
-  #tabindex = new RovingTabindexController(this, {
-    getItems: () => this.#buttons.filter(x => !x.hidden),
+  #tabindex = RovingTabindexController.of(this, {
+    getItems: () => [
+      ...Array.prototype.slice.call(this.#chips, 0, this.open ? this.#chips.length
+                            : Math.min(this.#chips.length, this.numChips)),
+      this._overflowChip,
+      this._button,
+    ].filter(x => !!x),
   });
 
+  /**
+   * active chip that receives focus when group receives focus
+   */
+  get activeChip() {
+    const button = this.#tabindex.items.at(this.#tabindex.atFocusedItemIndex);
+    const shadow = button?.getRootNode() as ShadowRoot;
+    return shadow?.host as PfChip;
+  }
+
+  set activeChip(chip: HTMLElement) {
+    const button = chip.shadowRoot?.querySelector('button');
+    if (button) {
+      this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(button);
+    }
+  }
+
+  /**
+   * whether or not group has a category
+   */
+  get hasCategory(): boolean {
+    return (this._categorySlotted || []).length > 0;
+  }
+
+  get remaining(): number {
+    return this.#chips.length - this.numChips;
+  }
+
   constructor() {
     super();
-    this.addEventListener('remove', this.#onChipRemoved);
+    this.addEventListener('remove', this.#onRemove);
   }
 
   render(): TemplateResult<1> {
@@ -114,13 +147,10 @@ export class PfChipGroup extends LitElement {
         <slot id="category"
               name="category-name"
               @slotchange="${this.#onSlotchange}">
-          <span class="offscreen"
+          <span class="visually-hidden"
                 ?hidden="${!this.accessibleLabel}">${this.accessibleLabel ?? ''}</span>
         </slot>
-        <slot id="chips"
-              @slotchange="${this.#onSlotchange}"
-              @remove="${this.#updateChips}"
-        ></slot>
+        <slot id="chips" @slotchange="${this.#onSlotchange}"></slot>
         <pf-chip id="overflow"
                  aria-controls="chips"
                  overflow-chip
@@ -141,70 +171,15 @@ export class PfChipGroup extends LitElement {
     `;
   }
 
-  override updated(changed: PropertyValues<this>): void {
-    if (changed.has('accessibleCloseLabel')
-        || changed.has('numChips')
-        || changed.has('closeable')
-        || changed.has('open')) {
-      this.#handleChipsChanged();
-    }
-  }
-
-  /**
-   * active chip that receives focus when group receives focus
-   */
-  get activeChip() {
-    const button = this.#tabindex.activeItem as HTMLElement;
-    const shadow = button?.getRootNode() as ShadowRoot;
-    return shadow?.host as PfChip;
-  }
-
-  set activeChip(chip: HTMLElement) {
-    const button = chip.shadowRoot?.querySelector('button') as HTMLElement;
-    this.#tabindex.setActiveItem(button);
-  }
-
-  /**
-   * whether or not group has a category
-   */
-  get hasCategory(): boolean {
-    return (this._categorySlotted || []).length > 0;
-  }
-
-  get remaining(): number {
-    return this.#chips.length - this.numChips;
-  }
-
   /**
    * updates chips when they change
    */
-  #handleChipsChanged() {
-    if (this.#chips.length > 0) {
-      const oldButtons = [...(this.#tabindex.items || [])];
-      const max = this.open ? this.#chips.length : Math.min(this.#chips.length, this.numChips);
-      this.#buttons = [
-        ...this.#chips.slice(0, max),
-        this._overflowChip,
-        this._button,
-      ].filter((x): x is PfChip => !!x);
-      if (oldButtons.length !== this.#buttons.length
-          || !oldButtons.every((element, index) => element === this.#buttons[index])) {
-        this.#tabindex.updateItems();
-      }
-      this.#updateOverflow();
-    }
-  }
-
-  /**
-   * handles a chip's `chip-remove` event
-   * @param event remove event
-   */
-  async #onChipRemoved(event: Event) {
-    if (event instanceof PfChipRemoveEvent) {
-      await this.#updateChips();
-      await this.updateComplete;
-      this.#tabindex.setActiveItem(this.#tabindex.activeItem);
-    }
+  @observes('accessibleCloseLabel')
+  @observes('numChips')
+  @observes('closeable')
+  @observes('open')
+  private chipsChanged(): void {
+    this.#updateOverflow();
   }
 
   /**
@@ -212,7 +187,6 @@ export class PfChipGroup extends LitElement {
    */
   #onCloseClick() {
     this.dispatchEvent(new PfChipGroupRemoveEvent());
-    this.remove();
   }
 
   /**
@@ -223,7 +197,7 @@ export class PfChipGroup extends LitElement {
     event.stopPropagation();
     this.open = !this.open;
     await this.updateComplete;
-    this.#handleChipsChanged();
+    this.chipsChanged();
     if (this._overflowChip) {
       this.focusOnChip(this._overflowChip);
     }
@@ -231,21 +205,18 @@ export class PfChipGroup extends LitElement {
   }
 
   #onSlotchange() {
-    this.#updateChips();
     this.requestUpdate();
   }
 
-  /**
-   * updates which chips variable
-   */
-  async #updateChips() {
-    await this.updateComplete;
-    this.#chips = [...this.querySelectorAll<PfChip>('pf-chip:not([slot]):not([overflow-chip])')];
-    this.requestUpdate();
-    await this.updateComplete;
-    this.#tabindex.updateItems(this.#chips);
-    this.#handleChipsChanged();
-    return this.#chips;
+  #onRemove(event: Event) {
+    if (event instanceof PfChipRemoveEvent) {
+      const index = this.#tabindex.atFocusedItemIndex;
+      if (event.chip) {
+        this.#tabindex.atFocusedItemIndex = index + 1;
+      }
+    } else if (event instanceof PfChipGroupRemoveEvent) {
+      this.remove();
+    }
   }
 
   /**
@@ -263,8 +234,8 @@ export class PfChipGroup extends LitElement {
    * Activates the specified chip and sets focus on it
    * @param chip pf-chip element
    */
-  focusOnChip(chip: HTMLElement): void {
-    this.#tabindex.setActiveItem(chip);
+  focusOnChip(chip: PfChip): void {
+    this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(chip);
   }
 }
 
diff --git a/elements/pf-chip/test/pf-chip-group.spec.ts b/elements/pf-chip/test/pf-chip-group.spec.ts
index 4c59672e15..b844d77a56 100644
--- a/elements/pf-chip/test/pf-chip-group.spec.ts
+++ b/elements/pf-chip/test/pf-chip-group.spec.ts
@@ -1,6 +1,6 @@
-import { expect, html } from '@open-wc/testing';
+import { expect, html, nextFrame } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { a11ySnapshot, type A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { a11ySnapshot, querySnapshot, querySnapshotAll, type A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
 import { PfChipGroup } from '../pf-chip-group.js';
 import { PfChip } from '../pf-chip.js';
 import { sendKeys } from '@web/test-runner-commands';
@@ -29,7 +29,7 @@ describe('<pf-chip-group>', async function() {
     });
   });
 
-  describe('with 3 chips', function() {
+  describe('with 4 chips', function() {
     let element: PfChipGroup;
     const updateComplete = () => element.updateComplete;
 
@@ -44,28 +44,46 @@ describe('<pf-chip-group>', async function() {
       `);
     });
 
-    it('only 3 chips and an overflow should be visible', async function() {
+    it('displays 3 chips and an overflow button', async function() {
       const snapshot = await a11ySnapshot();
-      expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(3);
-      expect(snapshot.children?.filter(x => x.role === 'button')?.length).to.equal(4);
+      expect(querySnapshotAll(snapshot, { name: /^Chip/ })).to.have.length(3);
+      expect(querySnapshotAll(snapshot, { role: 'button' })).to.have.length(4);
     });
 
-    describe('clicking overflow chip', function() {
-      beforeEach(() => element.focus());
-      beforeEach(press('ArrowLeft'));
-      beforeEach(press('Enter'));
-      beforeEach(updateComplete);
-      it('should show all chips', async function() {
-        const snapshot = await a11ySnapshot();
-        expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(4);
-      });
-      it('should show collapse button', async function() {
+    describe('Tab', function() {
+      beforeEach(press('Tab'));
+      beforeEach(nextFrame);
+      it('focuses the first close button', async function() {
         const snapshot = await a11ySnapshot();
-        expect(snapshot.children?.filter(x => x.role === 'button')?.length).to.equal(5);
+        const focused = querySnapshot(snapshot, { focused: true });
+        expect(focused).to.have.property('name', 'Close');
+        expect(focused).to.have.property('description', 'Chip 1');
       });
-      it('should focus collapse button', async function() {
-        const snapshot = await a11ySnapshot();
-        expect(snapshot.children?.find(x => x.focused)?.name).to.equal('show less');
+      describe('ArrowLeft', function() {
+        beforeEach(press('ArrowLeft'));
+        it('focuses the show less button', async function() {
+          const snapshot = await a11ySnapshot();
+          const focused = querySnapshot(snapshot, { focused: true });
+          expect(focused).to.have.property('name', '1 more');
+        });
+        describe('Enter', function() {
+          beforeEach(press('Enter'));
+          beforeEach(updateComplete);
+          it('should show all chips', async function() {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children?.filter(x => x.name.startsWith('Chip'))?.length).to.equal(4);
+          });
+          it('should show collapse button', async function() {
+            const snapshot = await a11ySnapshot();
+            const buttons = querySnapshotAll(snapshot, { role: 'button' });
+            expect(buttons).to.have.length(5);
+          });
+          it('should focus collapse button', async function() {
+            const snapshot = await a11ySnapshot();
+            expect(querySnapshot(snapshot, { focused: true }))
+                .to.have.property('name', 'show less');
+          });
+        });
       });
     });
   });
@@ -100,7 +118,7 @@ describe('<pf-chip-group>', async function() {
       beforeEach(updateComplete);
       it('should remove element', async function() {
         const snapshot = await a11ySnapshot();
-        expect(snapshot.children).to.be.undefined;
+        expect(snapshot.children).to.not.be.ok;
       });
     });
   });
@@ -205,7 +223,9 @@ describe('<pf-chip-group>', async function() {
 
       it('should focus on close button', async function() {
         const snapshot = await a11ySnapshot();
-        expect(snapshot.children?.find(x => x.focused)?.name).to.equal('Close');
+        expect(querySnapshot(snapshot, { focused: true }))
+            .to.be.ok
+            .and.have.property('name', 'Close');
       });
     });
   });
diff --git a/elements/pf-dropdown/pf-dropdown-menu.ts b/elements/pf-dropdown/pf-dropdown-menu.ts
index 80c5d2d927..36a3390040 100644
--- a/elements/pf-dropdown/pf-dropdown-menu.ts
+++ b/elements/pf-dropdown/pf-dropdown-menu.ts
@@ -39,26 +39,28 @@ export class PfDropdownMenu extends LitElement {
 
   #internals = InternalsController.of(this, { role: 'menu' });
 
-  #tabindex = new RovingTabindexController(this, {
-    getItems: () => this.items.map(x => x.menuItem),
+  get #items() {
+    return this.items.map(x => x.menuItem);
+  }
+
+  #tabindex = RovingTabindexController.of(this, {
+    getItems: () => this.#items,
   });
 
   /**
    * current active descendant in menu
    */
-  get activeItem(): HTMLElement | undefined {
-    return this.#tabindex.activeItem ?? this.#tabindex.firstItem;
+  get activeItem(): HTMLElement | null {
+    return this.#tabindex.items.at(this.#tabindex.atFocusedItemIndex)
+        ?? this.#tabindex.atFocusableItems.at(0)
+        ?? null;
   }
 
   /**
    * index of current active descendant in menu
    */
   get activeIndex(): number {
-    if (!this.#tabindex.activeItem) {
-      return -1;
-    } else {
-      return this.#tabindex.items.indexOf(this.#tabindex.activeItem);
-    }
+    return this.#tabindex.atFocusedItemIndex;
   }
 
   get items(): PfDropdownItem[] {
@@ -90,7 +92,7 @@ export class PfDropdownMenu extends LitElement {
    */
   #onItemChange(event: Event) {
     if (event instanceof DropdownItemChange) {
-      this.#tabindex.updateItems();
+      this.#onSlotChange();
     }
   }
 
@@ -98,7 +100,7 @@ export class PfDropdownMenu extends LitElement {
    * handles slot change event
    */
   #onSlotChange() {
-    this.#tabindex.updateItems();
+    this.#tabindex.items = this.#items;
   }
 
   /**
@@ -110,9 +112,8 @@ export class PfDropdownMenu extends LitElement {
     if (this.ctx?.disabled) {
       event.preventDefault();
       event.stopPropagation();
-    } else if (event.target instanceof PfDropdownItem
-        && event.target.menuItem !== this.#tabindex.activeItem) {
-      this.#tabindex.setActiveItem(event.target.menuItem);
+    } else if (event.target instanceof PfDropdownItem) {
+      this.#focusItem(event.target.menuItem);
     }
   }
 
@@ -126,9 +127,15 @@ export class PfDropdownMenu extends LitElement {
     if (this.ctx?.disabled || isDisabledItemClick(event)) {
       event.preventDefault();
       event.stopPropagation();
-    } else if (event.target instanceof PfDropdownItem
-        && event.target.menuItem !== this.#tabindex.activeItem) {
-      this.#tabindex.setActiveItem(event.target.menuItem);
+    } else if (event.target instanceof PfDropdownItem) {
+      this.#focusItem(event.target.menuItem);
+    }
+  }
+
+  #focusItem(item: HTMLElement) {
+    const itemIndex = this.#tabindex.items.indexOf(item);
+    if (itemIndex !== this.#tabindex.atFocusedItemIndex) {
+      this.#tabindex.atFocusedItemIndex = itemIndex;
     }
   }
 
diff --git a/elements/pf-dropdown/pf-dropdown.ts b/elements/pf-dropdown/pf-dropdown.ts
index 4cbef2ab97..b1f8395d81 100644
--- a/elements/pf-dropdown/pf-dropdown.ts
+++ b/elements/pf-dropdown/pf-dropdown.ts
@@ -63,7 +63,6 @@ export class PfDropdown extends LitElement {
     delegatesFocus: true,
   };
 
-
   /**
    * When disabled, the dropdown can still be toggled open and closed via keyboard, but menu items cannot be activated.
    */
diff --git a/elements/pf-icon/pf-icon.ts b/elements/pf-icon/pf-icon.ts
index fad725eda8..f1c77c578d 100644
--- a/elements/pf-icon/pf-icon.ts
+++ b/elements/pf-icon/pf-icon.ts
@@ -180,7 +180,7 @@ export class PfIcon extends LitElement {
 
   async #contentChanged() {
     await this.updateComplete;
-    this.dispatchEvent(new Event('load', { bubbles: true }));
+    this.dispatchEvent?.(new Event('load', { bubbles: true }));
   }
 
   connectedCallback(): void {
@@ -219,7 +219,7 @@ export class PfIcon extends LitElement {
         this.#contentChanged();
       } catch (error: unknown) {
         this.#logger.error((error as IconResolveError).message);
-        this.dispatchEvent(new IconResolveError(set, icon, error as Error));
+        this.dispatchEvent?.(new IconResolveError(set, icon, error as Error));
       }
     }
   }
diff --git a/elements/pf-jump-links/pf-jump-links-item.ts b/elements/pf-jump-links/pf-jump-links-item.ts
index 380a697f7d..50d699017b 100644
--- a/elements/pf-jump-links/pf-jump-links-item.ts
+++ b/elements/pf-jump-links/pf-jump-links-item.ts
@@ -33,9 +33,7 @@ export class PfJumpLinksItem extends LitElement {
   /** hypertext reference for this link */
   @property({ reflect: true }) href?: string;
 
-  #internals = InternalsController.of(this, {
-    role: 'listitem',
-  });
+  #internals = InternalsController.of(this, { role: 'listitem' });
 
   render(): TemplateResult<1> {
     return html`
diff --git a/elements/pf-jump-links/pf-jump-links.ts b/elements/pf-jump-links/pf-jump-links.ts
index e9b7120459..9f9ba022a7 100644
--- a/elements/pf-jump-links/pf-jump-links.ts
+++ b/elements/pf-jump-links/pf-jump-links.ts
@@ -77,7 +77,17 @@ export class PfJumpLinks extends LitElement {
 
   #kids = this.querySelectorAll?.<LitElement>(':is(pf-jump-links-item, pf-jump-links-list)');
 
-  #tabindex?: RovingTabindexController<HTMLAnchorElement>;
+  get #items() {
+    return Array.from(this.#kids ?? [])
+        .flatMap(i => [
+          ...i.shadowRoot?.querySelectorAll?.('a') ?? [],
+          ...i.querySelectorAll?.('a') ?? [],
+        ]);
+  }
+
+  #tabindex = RovingTabindexController.of<HTMLAnchorElement>(this, {
+    getItems: () => this.#items,
+  });
 
   #spy = new ScrollSpyController(this, {
     rootMargin: `${this.offset}px 0px 0px 0px`,
@@ -92,21 +102,11 @@ export class PfJumpLinks extends LitElement {
 
   override connectedCallback(): void {
     super.connectedCallback();
-    this.addEventListener('slotchange', this.#updateItems);
+    this.addEventListener('slotchange', this.#onSlotChange);
     this.addEventListener('select', this.#onSelect);
   }
 
   override firstUpdated(): void {
-    this.#tabindex = new RovingTabindexController<HTMLAnchorElement>(this, {
-      getItems: () => {
-        const items = Array.from(this.#kids)
-            .flatMap(i => [
-              ...i.shadowRoot?.querySelectorAll?.('a') ?? [],
-              ...i.querySelectorAll?.('a') ?? [],
-            ]);
-        return items;
-      },
-    });
     const active = this.querySelector?.<PfJumpLinksItem>('pf-jump-links-item[active]');
     if (active) {
       this.#setActiveItem(active);
@@ -139,8 +139,8 @@ export class PfJumpLinks extends LitElement {
     `;
   }
 
-  #updateItems() {
-    this.#tabindex?.updateItems();
+  #onSlotChange() {
+    this.#tabindex.items = this.#items;
   }
 
   #onSelect(event: Event) {
@@ -150,8 +150,11 @@ export class PfJumpLinks extends LitElement {
   }
 
   #setActiveItem(item: PfJumpLinksItem) {
-    this.#tabindex?.setActiveItem(item.shadowRoot?.querySelector?.('a') ?? undefined);
-    this.#spy.setActive(item);
+    const itemLink = item.shadowRoot?.querySelector?.('a') ?? null;
+    if (itemLink) {
+      this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(itemLink);
+      this.#spy.setActive(item);
+    }
   }
 
   #onToggle(event: Event) {
diff --git a/elements/pf-select/demo/checkbox-input-no-badge.html b/elements/pf-select/demo/checkbox-input-no-badge.html
index b40dd536db..f1561396fc 100644
--- a/elements/pf-select/demo/checkbox-input-no-badge.html
+++ b/elements/pf-select/demo/checkbox-input-no-badge.html
@@ -1,13 +1,24 @@
-<pf-select variant="checkbox"
-           placeholder="Select Input"
-           accessible-label="Level"
-           checkbox-selection-badge-hidden>
-  <pf-option>Debug</pf-option>
-  <pf-option>Info</pf-option>
-  <pf-option>Warn</pf-option>
-  <pf-option>Error</pf-option>
-</pf-select>
+<section id="checkbox-input-demo">
+  <pf-select variant="checkbox"
+             placeholder="Select Input"
+             accessible-label="Level"
+             checkbox-selection-badge-hidden>
+    <pf-option>Debug</pf-option>
+    <pf-option>Info</pf-option>
+    <pf-option>Warn</pf-option>
+    <pf-option>Error</pf-option>
+  </pf-select>
+</section>
 
 <script type="module">
   import '@patternfly/elements/pf-select/pf-select.js';
 </script>
+
+<style>
+#checkbox-input-demo {
+  padding: 1em;
+  & pf-select {
+    max-width: 300px;
+  }
+}
+</style>
diff --git a/elements/pf-select/demo/checkbox-input.html b/elements/pf-select/demo/checkbox-input.html
index 962bede1f6..cd7003192b 100644
--- a/elements/pf-select/demo/checkbox-input.html
+++ b/elements/pf-select/demo/checkbox-input.html
@@ -1,14 +1,23 @@
-<pf-select variant="checkbox"
+<section id="checkbox-select-demo">
+  <pf-select variant="checkbox"
            accessible-label="Status"
            placeholder="Filter by status">
-  <pf-option description="This is a description">Active</pf-option>
-  <pf-option>Cancelled</pf-option>
-  <pf-option>Paused</pf-option>
-  <hr>
-  <pf-option>Warning</pf-option>
-  <pf-option>Restarted</pf-option>
-</pf-select>
+    <pf-option description="This is a description">Active</pf-option>
+    <pf-option>Cancelled</pf-option>
+    <pf-option>Paused</pf-option>
+    <hr>
+    <pf-option>Warning</pf-option>
+    <pf-option>Restarted</pf-option>
+  </pf-select>
+</section>
 
 <script type="module">
   import '@patternfly/elements/pf-select/pf-select.js';
 </script>
+
+<style>
+  #checkbox-select-demo {
+    padding: 1em;
+    max-width: 400px;
+  }
+</style>
diff --git a/elements/pf-select/demo/grouped-checkbox-input.html b/elements/pf-select/demo/grouped-checkbox-input.html
index 535c746a95..2cf471d318 100644
--- a/elements/pf-select/demo/grouped-checkbox-input.html
+++ b/elements/pf-select/demo/grouped-checkbox-input.html
@@ -1,19 +1,31 @@
-<pf-select variant="checkbox" accessible-label="Status">
-  <pf-option-group label="Status" key="group1">
-    <pf-option value="0">Running</pf-option>
-    <pf-option value="1">Stopped</pf-option>
-    <pf-option value="2">Down</pf-option>
-    <pf-option value="3">Degraded</pf-option>
-    <pf-option value="4">Needs maintenance</pf-option>
-  </pf-option-group>
-  <hr>
-  <pf-option-group label="Vendor names" key="group2">
-    <pf-option value="5">Dell</pf-option>
-    <pf-option value="6" disabled>Samsung</pf-option>
-    <pf-option value="7">Hewlett-Packard</pf-option>
-  </pf-option-group>
-</pf-select>
+<section id="checkbox-input-demo">
+  <pf-select variant="checkbox" accessible-label="Status">
+    <pf-option-group label="Status" key="group1">
+      <pf-option value="0">Running</pf-option>
+      <pf-option value="1">Stopped</pf-option>
+      <pf-option value="2">Down</pf-option>
+      <pf-option value="3">Degraded</pf-option>
+      <pf-option value="4">Needs maintenance</pf-option>
+    </pf-option-group>
+    <hr>
+    <pf-option-group label="Vendor names" key="group2">
+      <pf-option value="5">Dell</pf-option>
+      <pf-option value="6" disabled>Samsung</pf-option>
+      <pf-option value="7">Hewlett-Packard</pf-option>
+    </pf-option-group>
+  </pf-select>
+</section>
 
 <script type="module">
   import '@patternfly/elements/pf-select/pf-select.js';
 </script>
+
+
+<style>
+#checkbox-input-demo {
+  padding: 1em;
+  & pf-select {
+    max-width: 300px;
+  }
+}
+</style>
diff --git a/elements/pf-select/demo/grouped-single.html b/elements/pf-select/demo/grouped-single.html
index d929374fc8..727c547764 100644
--- a/elements/pf-select/demo/grouped-single.html
+++ b/elements/pf-select/demo/grouped-single.html
@@ -1,19 +1,30 @@
-<pf-select accessible-label="Status">
-  <pf-option-group label="Status" key="group1">
-    <pf-option value="0">Running</pf-option>
-    <pf-option value="1">Stopped</pf-option>
-    <pf-option value="2">Down</pf-option>
-    <pf-option value="3">Degraded</pf-option>
-    <pf-option value="4">Needs maintenance</pf-option>
-  </pf-option-group>
-  <hr>
-  <pf-option-group label="Vendor names" key="group2">
-    <pf-option value="5">Dell</pf-option>
-    <pf-option value="6" disabled>Samsung</pf-option>
-    <pf-option value="7">Hewlett-Packard</pf-option>
-  </pf-option-group>
-</pf-select>
+<section id="grouped-select-demo">
+  <pf-select accessible-label="Status">
+    <pf-option-group label="Status" key="group1">
+      <pf-option value="0">Running</pf-option>
+      <pf-option value="1">Stopped</pf-option>
+      <pf-option value="2">Down</pf-option>
+      <pf-option value="3">Degraded</pf-option>
+      <pf-option value="4">Needs maintenance</pf-option>
+    </pf-option-group>
+    <hr>
+    <pf-option-group label="Vendor names" key="group2">
+      <pf-option value="5">Dell</pf-option>
+      <pf-option value="6" disabled>Samsung</pf-option>
+      <pf-option value="7">Hewlett-Packard</pf-option>
+    </pf-option-group>
+  </pf-select>
+</section>
 
 <script type="module">
   import '@patternfly/elements/pf-select/pf-select.js';
 </script>
+
+<style>
+#grouped-select-demo {
+  padding: 1em;
+  & pf-select {
+    max-width: 300px;
+  }
+}
+</style>
diff --git a/elements/pf-select/demo/pf-select.html b/elements/pf-select/demo/pf-select.html
index de62d6e2de..b279eaeb79 100644
--- a/elements/pf-select/demo/pf-select.html
+++ b/elements/pf-select/demo/pf-select.html
@@ -1,14 +1,26 @@
-<pf-select placeholder="Select a title"
-           accessible-label="Title">
-  <pf-option>Mr</pf-option>
-  <pf-option>Miss</pf-option>
-  <pf-option>Mrs</pf-option>
-  <pf-option>Ms</pf-option>
-  <hr>
-  <pf-option>Dr</pf-option>
-  <pf-option>Other</pf-option>
-</pf-select>
+<section id="select-demo">
+  <pf-select placeholder="Select a title"
+             accessible-label="Title">
+    <pf-option>Mr</pf-option>
+    <pf-option>Miss</pf-option>
+    <pf-option>Mrs</pf-option>
+    <pf-option>Ms</pf-option>
+    <hr>
+    <pf-option>Dr</pf-option>
+    <pf-option>Other</pf-option>
+  </pf-select>
+</section>
 
 <script type="module">
   import '@patternfly/elements/pf-select/pf-select.js';
 </script>
+
+
+<style>
+#select-demo {
+  padding: 1em;
+  & pf-select {
+    max-width: 300px;
+  }
+}
+</style>
diff --git a/elements/pf-select/demo/single-with-description.html b/elements/pf-select/demo/single-with-description.html
index a939a5e328..a757de8bf3 100644
--- a/elements/pf-select/demo/single-with-description.html
+++ b/elements/pf-select/demo/single-with-description.html
@@ -1,14 +1,25 @@
-<pf-select accessible-label="Title">
-  <pf-option description="This is a description">Mr</pf-option>
-  <pf-option description="This is a description">Miss</pf-option>
-  <pf-option description="This is a description">Mrs</pf-option>
-  <pf-option description="This is a description">Ms</pf-option>
-  <pf-option>Dr
-    <span slot="description">Descriptions can <em>also</em> be HTML</span>
-  </pf-option>
-  <pf-option description="This is a description">Other</pf-option>
-</pf-select>
+<section id="description-demo">
+  <pf-select accessible-label="Title">
+    <pf-option description="This is a description">Mr</pf-option>
+    <pf-option description="This is a description">Miss</pf-option>
+    <pf-option description="This is a description">Mrs</pf-option>
+    <pf-option description="This is a description">Ms</pf-option>
+    <pf-option>Dr
+      <span slot="description">Descriptions can <em>also</em> be HTML</span>
+    </pf-option>
+    <pf-option description="This is a description">Other</pf-option>
+  </pf-select>
+</section>
 
 <script type="module">
   import '@patternfly/elements/pf-select/pf-select.js';
 </script>
+
+<style>
+#description-demo {
+  padding: 1em;
+  & pf-select {
+    max-width: 300px;
+  }
+}
+</style>
diff --git a/elements/pf-select/demo/typeahead.html b/elements/pf-select/demo/typeahead.html
new file mode 100644
index 0000000000..303fa43faa
--- /dev/null
+++ b/elements/pf-select/demo/typeahead.html
@@ -0,0 +1,29 @@
+<section id="typeahead-demo">
+  <label for="state">State</label>
+  <pf-select id="state"
+             variant="typeahead"
+             placeholder="Select a state">
+    <pf-option value="Alabama"
+               description="The heart of Dixie"></pf-option>
+    <pf-option value="Florida"
+               description="The sunshine state"
+               disabled></pf-option>
+    <pf-option value="New Jersey"></pf-option>
+    <pf-option value="New York"></pf-option>
+    <pf-option value="New Mexico"></pf-option>
+    <pf-option value="North Carolina"></pf-option>
+  </pf-select>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-select/pf-select.js';
+</script>
+
+<style>
+#typeahead-demo {
+  padding: 1em;
+  & pf-select {
+    max-width: 300px;
+  }
+}
+</style>
diff --git a/elements/pf-select/demos-to-implement-later/typeahead.html b/elements/pf-select/demos-to-implement-later/typeahead.html
deleted file mode 100644
index e6e50e1477..0000000000
--- a/elements/pf-select/demos-to-implement-later/typeahead.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<label>
-  Select a state
-  <pf-select variant="typeahead">
-    <pf-option>Alabama</pf-option>
-    <pf-option description="Florida man does whatever a Florida can">Florida</pf-option>
-    <pf-option>New Jersey</pf-option>
-    <pf-option>New Mexico</pf-option>
-    <pf-option>New York</pf-option>
-    <pf-option>North Carolina</pf-option>
-  </pf-select>
-</label>
-
-<script type="module">
-  import '@patternfly/elements/pf-select/pf-select.js';
-</script>
diff --git a/elements/pf-select/pf-option.css b/elements/pf-select/pf-option.css
index 1b6172987b..93063af5d8 100644
--- a/elements/pf-select/pf-option.css
+++ b/elements/pf-select/pf-option.css
@@ -14,7 +14,7 @@
 
 :host(:focus) #outer,
 :host(:hover) #outer,
-:host([aria-selected="true"]) {
+#outer.selected {
   background-color: #e0e0e0;
 }
 
diff --git a/elements/pf-select/pf-option.ts b/elements/pf-select/pf-option.ts
index 46ccfe4a13..e36bd2aca0 100644
--- a/elements/pf-select/pf-option.ts
+++ b/elements/pf-select/pf-option.ts
@@ -1,12 +1,13 @@
-import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';
+import { LitElement, html, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
+
 import styles from './pf-option.css';
 
 /**
@@ -36,10 +37,10 @@ export class PfOption extends LitElement {
   }
 
   /** whether option is selected */
-  @property({ type: Boolean }) selected = false;
+  @property({ type: Boolean, reflect: true }) selected = false;
 
   /** whether option is active descendant */
-  @property({ type: Boolean }) active = false;
+  @property({ type: Boolean, reflect: true }) active = false;
 
   /** Optional option description; overridden by description slot. */
   @property() description = '';
@@ -83,17 +84,12 @@ export class PfOption extends LitElement {
 
   #internals = InternalsController.of(this, { role: 'option' });
 
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.id ||= getRandomId();
-  }
-
   render(): TemplateResult<1> {
-    const { disabled, active } = this;
+    const { disabled, active, selected } = this;
     return html`
-      <div id="outer" class="${classMap({ active, disabled })}">
+      <div id="outer" class="${classMap({ active, disabled, selected })}">
         <input type="checkbox"
-               aria-hidden="true"
+               inert
                role="presentation"
                tabindex="-1"
                ?checked="${this.selected}"
@@ -101,7 +97,7 @@ export class PfOption extends LitElement {
         <slot name="icon"></slot>
         <span>
           <slot name="create"></slot>
-          <slot></slot>
+          <slot>${this.value}</slot>
         </span>
         <svg ?hidden="${!this.selected}"
              viewBox="0 0 512 512"
@@ -114,15 +110,14 @@ export class PfOption extends LitElement {
     `;
   }
 
-  willUpdate(changed: PropertyValues<this>): void {
-    if (changed.has('selected')
-      // don't fire on initialization
-      && !(changed.get('selected') === undefined) && this.selected === false) {
-      this.#internals.ariaSelected = this.selected ? 'true' : 'false';
-    }
-    if (changed.has('disabled')) {
-      this.#internals.ariaDisabled = String(!!this.disabled);
-    }
+  @observes('selected')
+  private selectedChanged() {
+    this.#internals.ariaSelected = String(!!this.selected);
+  }
+
+  @observes('disabled')
+  private disabledChanged() {
+    this.#internals.ariaDisabled = String(!!this.disabled);
   }
 
   /**
diff --git a/elements/pf-select/pf-select.css b/elements/pf-select/pf-select.css
index 2f462bc676..fac2bf294c 100644
--- a/elements/pf-select/pf-select.css
+++ b/elements/pf-select/pf-select.css
@@ -278,6 +278,11 @@
   padding: var(--pf-global--spacer--sm, 0.5rem);
 }
 
+#toggle-button:focus:before {
+  border-bottom-color: var(--pf-c-select__toggle--focus--before--BorderBottomColor);
+  border-bottom-width: var(--pf-c-select__toggle--focus--before--BorderBottomWidth);
+}
+
 #outer.typeahead #toggle-button {
   flex: 0 0 auto;
 }
@@ -323,13 +328,16 @@ pf-badge {
   display: none !important;
 }
 
-.offscreen {
-  position: absolute;
-  left: -99999;
-  width: 0;
-  height: 0;
-  opacity: 0;
+.visually-hidden {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  block-size: 1px;
+  margin: -1px;
   overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
 }
 
 ::slotted(hr) {
diff --git a/elements/pf-select/pf-select.ts b/elements/pf-select/pf-select.ts
index 817327facc..21c4802c02 100644
--- a/elements/pf-select/pf-select.ts
+++ b/elements/pf-select/pf-select.ts
@@ -1,4 +1,8 @@
-import { LitElement, html, isServer, type PropertyValues, type TemplateResult } from 'lit';
+import type { PfChipGroup } from '../pf-chip/pf-chip-group.js';
+import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import type { TemplateResult } from 'lit';
+
+import { LitElement, html, isServer } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
@@ -7,23 +11,18 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { ListboxController } from '@patternfly/pfe-core/controllers/listbox-controller.js';
-import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { ComboboxController } from '@patternfly/pfe-core/controllers/combobox-controller.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
-import {
-  FloatingDOMController,
-  type Placement,
-} from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+
+import { arraysAreEquivalent } from '@patternfly/pfe-core/functions/arraysAreEquivalent.js';
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 
 import { PfOption } from './pf-option.js';
+import { type PfChip, PfChipRemoveEvent } from '../pf-chip/pf-chip.js';
 
 import styles from './pf-select.css';
-import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
-
-export interface PfSelectUserOptions {
-  id: string;
-  value: string;
-}
 
 export class PfSelectChangeEvent extends Event {
   constructor() {
@@ -31,11 +30,6 @@ export class PfSelectChangeEvent extends Event {
   }
 }
 
-// NOTE: this file contains numerous // comments, which ordinarily would be deleted
-// They are here to save the work already done on typeahead, which has a much more complex
-// accessibility model, and which is planned for the next release
-// * @fires filter - when the filter value changes. used to perform custom filtering
-
 /**
  * A select list enables users to select one or more items from a list.
  *
@@ -51,60 +45,38 @@ export class PfSelectChangeEvent extends Event {
 export class PfSelect extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];
 
+  static readonly formAssociated = true;
+
   static override readonly shadowRootOptions: ShadowRootInit = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
   };
 
-  static readonly formAssociated = true;
-
-  #internals = InternalsController.of(this);
-
-  #float = new FloatingDOMController(this, {
-    content: () => this.shadowRoot?.getElementById('listbox-container') ?? null,
-  });
-
-  #slots = new SlotController(this, null, 'placeholder');
-
-  #listbox?: ListboxController<PfOption>; /* | ListboxActiveDescendantController */
-
   /** Variant of rendered Select */
-  @property() variant: 'single' | 'checkbox' /* | 'typeahead' | 'typeaheadmulti' */ = 'single';
+  @property() variant: 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti' = 'single';
 
-  /**
-   * Accessible label for the select
-   */
+  /** Accessible label for the select */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
-  /**
-   * Accessible label for chip group used to describe chips
-   */
+  /** Accessible label for chip group used to describe chips */
   @property({
     attribute: 'accessible-current-selections-label',
   }) accessibleCurrentSelectionsLabel = 'Current selections';
 
-  /**
-   * multi listbox button text
-   */
+  /** Multi listbox button text */
   @property({ attribute: 'items-selected-text' }) itemsSelectedText = 'items selected';
 
-  /**
-   * whether select is disabled
-   */
+  /** Whether the select is disabled */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /**
-   * Whether the select listbox is expanded
-   */
+  /** Whether the select listbox is expanded */
   @property({ type: Boolean, reflect: true }) expanded = false;
 
   /**
-   * enable to flip listbox when it reaches boundary
+   * Enable to flip listbox when it reaches boundary
    */
   @property({ attribute: 'enable-flip', type: Boolean }) enableFlip = false;
 
-  // @property() filter = '';
-
   /** Current form value */
   @property() value?: string;
 
@@ -124,120 +96,119 @@ export class PfSelect extends LitElement {
     type: Boolean,
   }) checkboxSelectionBadgeHidden = false;
 
-  // @property({ attribute: false }) customFilter?: (option: PfOption) => boolean;
+  @query('pf-chip-group') private _chipGroup?: PfChipGroup;
+
+  @query('#toggle-input') private _toggleInput?: HTMLInputElement;
+
+  @query('#toggle-button') private _toggleButton?: HTMLButtonElement;
+
+  @query('#listbox') private _listbox?: HTMLElement;
+
+  @query('#listbox-container') private _listboxContainer?: HTMLElement;
+
+  @query('#placeholder') private _placeholder?: PfOption;
+
+  #isNotPlaceholderOption = (option: PfOption) => option !== this._placeholder;
+
+  #internals = InternalsController.of(this);
+
+  #float = new FloatingDOMController(this, { content: () => this._listboxContainer });
+
+  #slots = new SlotController(this, null, 'placeholder');
+
+  #combobox = ComboboxController.of(this, {
+    multi: this.variant === 'typeaheadmulti' || this.variant === 'checkbox',
+    getItems: () => this.options,
+    getFallbackLabel: () => this.accessibleLabel
+                         || this.#internals.computedLabelText
+                         || this.placeholder
+                         || this.#slots.getSlotted('placeholder').map(x => x.textContent).join(''),
+    getListboxElement: () => this._listbox ?? null,
+    getToggleButton: () => this._toggleButton ?? null,
+    getComboboxInput: () => this._toggleInput ?? null,
+    isExpanded: () => this.expanded,
+    requestShowListbox: () =>
+      this.expanded ||= true,
+    requestHideListbox: () =>
+      ((this.expanded &&= false), true),
+    setItemHidden(hidden) {
+      if (this.id !== 'placeholder') {
+        this.hidden = hidden;
+      }
+    },
+    isItem: item => item instanceof PfOption,
+    setItemActive(active) {
+      this.active = active;
+    },
+    setItemSelected(selected) {
+      this.selected = selected;
+    },
+  });
 
   /**
    * Single select option value for single select menus,
    * or array of select option values for multi select.
    */
-  set selected(optionsList: PfOption | PfOption[]) {
-    this.#listbox?.setValue(optionsList);
+  @property({ hasChanged: (a, b) => !arraysAreEquivalent(a, b) })
+  set selected(selected: PfOption | PfOption[]) {
+    const list = Array.isArray(selected) ? selected : [selected];
+    this.#combobox.selected = list;
   }
 
-  get selected(): PfOption | PfOption[] | undefined {
-    return this.#listbox?.value;
+  get selected(): PfOption[] {
+    return this.#combobox.selected;
   }
 
-  /**
-   * array of slotted options
-   */
+  /** List of options */
   get options(): PfOption[] {
     if (isServer) {
       return []; // TODO: expose a DOM property to allow setting options in SSR scenarios
     } else {
-      const opts = Array.from(this.querySelectorAll('pf-option'));
-      const placeholder = this.shadowRoot?.getElementById('placeholder') as PfOption | null;
-      if (placeholder) {
-        return [placeholder, ...opts];
-      } else {
-        return opts;
-      }
+      return [
+        this._placeholder,
+        ...Array.from(this.querySelectorAll('pf-option')),
+      ].filter((x): x is PfOption => !!x && !x.hidden);
     }
   }
 
-  // @query('pf-chip-group') private _chipGroup?: PfChipGroup;
-
-  // @query('#toggle-input') private _input?: HTMLInputElement;
-
-  @query('#toggle-button') private _toggle?: HTMLButtonElement;
-
-  #lastSelected = this.selected;
-
-  get #listboxElement() {
-    return this.shadowRoot?.getElementById('listbox') ?? null;
-  }
-
-  /**
-   * whether select has badge for number of selected items
-   */
+  /** Whether select has badge for number of selected items */
   get #hasBadge() {
     // NOTE: revisit this in v5
     return this.variant === 'checkbox' && !this.checkboxSelectionBadgeHidden;
   }
 
-  get #buttonLabel() {
+  get #buttonLabel(): string {
+    const { selected } = this.#combobox;
     switch (this.variant) {
-      // TODO: implement typeaheadmulti with ActiveDescendantController
-      // case 'typeaheadmulti':
-      //   return `${this.#listbox?.selectedOptions?.length ?? 0} ${this.itemsSelectedText}`
+      case 'typeaheadmulti':
+        return `${selected?.length ?? 0} ${this.itemsSelectedText}`;
       case 'checkbox':
-        return this.#listbox
-            ?.selectedOptions
-            ?.map?.(option => option.optionText || '')
-            ?.join(' ')
-            ?.trim()
-          || this.#computePlaceholderText()
+        return this.#computePlaceholderText()
           || 'Options';
       default:
-        return (this.selected ? this.value : '')
+        return (selected ? this.value : '')
           || this.#computePlaceholderText()
           || 'Select a value';
     }
   }
 
-  override willUpdate(changed: PropertyValues<this>): void {
-    if (this.variant === 'checkbox') {
-      import('@patternfly/elements/pf-badge/pf-badge.js');
-    }
-    if (changed.has('variant')) {
-      this.#variantChanged();
-    }
-    if (changed.has('value')) {
-      this.#internals.setFormValue(this.value ?? '');
-    }
-    if (changed.has('disabled')) {
-      this.#listbox!.disabled = this.disabled;
-    }
-    // TODO: handle filtering in the element, not the controller
-    // if (changed.has('filter')) {
-    //   this.#listbox.filter = this.filter;
-    // }
-  }
-
   override render(): TemplateResult<1> {
-    const { disabled, expanded, variant } = this;
+    const { disabled, expanded, variant, placeholder } = this;
     const { anchor = 'bottom', alignment = 'start', styles = {} } = this.#float;
-    const { computedLabelText } = this.#internals;
     const { height, width } = this.getBoundingClientRect?.() || {};
-    const buttonLabel = this.#buttonLabel;
     const hasBadge = this.#hasBadge;
-    const selectedOptions = this.#listbox?.selectedOptions ?? [];
+    const selectedOptions = this.#combobox.selected ?? [];
     const typeahead = variant.startsWith('typeahead');
     const checkboxes = variant === 'checkbox';
-    const offscreen = typeahead && 'offscreen';
     const badge = hasBadge && 'badge';
     const hasSelection = !!(Array.isArray(this.selected) ? this.selected.length : this.selected);
+    const hideLightDomItems = typeahead && !ComboboxController.canControlLightDom;
+    const placeholderIsInert = !placeholder && this.#slots.isEmpty('placeholder');
 
     return html`
       <div id="outer"
            style="${styleMap(styles)}"
-           class="${classMap({
-             disabled,
-             typeahead,
-             expanded,
-             [anchor]: !!anchor,
-             [alignment]: !!alignment,
-           })}">
+           class="${classMap({ disabled, typeahead, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}">
         <div id="toggle">
           ${!(typeahead && selectedOptions.length < 1) ? '' : html`
           <pf-chip-group label="${this.accessibleCurrentSelectionsLabel}">
@@ -246,29 +217,15 @@ export class PfSelect extends LitElement {
                      .readonly="${this.disabled}"
                      @remove="${this.#onChipRemove.bind(this, opt)}">${opt.textContent}</pf-chip>`)}
           </pf-chip-group>`}
-          ${!typeahead ? '' : /* TODO: aria attrs */ html`
+          ${!typeahead ? '' : html`
           <input id="toggle-input"
-                 aria-label="${this.accessibleLabel ?? (computedLabelText || buttonLabel)}"
-                 aria-autocomplete="both"
-                 ?disabled="${disabled}"
                  ?hidden="${!typeahead}"
-                 placeholder="${buttonLabel}"
-                 @input="${this.#onTypeaheadInput}">
-          `}
-          <button id="toggle-button"
-                  role="combobox"
-                  aria-hidden="${typeahead.toString() as 'true' | 'false'}"
-                  aria-label="${ifDefined(this.accessibleLabel || this.#internals.computedLabelText || undefined)}"
-                  aria-describedby="placeholder"
-                  aria-controls="listbox"
-                  aria-haspopup="listbox"
-                  aria-expanded="${String(this.expanded) as 'true' | 'false'}"
-                  @keydown="${this.#onButtonKeydown}"
-                  @click="${() => !typeahead && this.toggle()}"
-                  tabindex="${ifDefined(typeahead ? -1 : undefined)}">
+                 ?disabled="${disabled}"
+                 placeholder="${placeholder || this.#buttonLabel}">`}
+          <button id="toggle-button">
             <span id="button-text" style="display: contents;">
               <span id="toggle-text"
-                    class="${classMap({ offscreen, badge })}">${buttonLabel}</span>${!hasBadge ? '' : html`
+                    class="${classMap({ 'visually-hidden': !!typeahead, badge })}">${this.#buttonLabel}</span>${!hasBadge ? '' : html`
               <span id="toggle-badge">
                 <pf-badge number="${selectedOptions.length}">${selectedOptions.length}</pf-badge>
               </span>`}
@@ -286,151 +243,100 @@ export class PfSelect extends LitElement {
                marginTop: `${height || 0}px`,
                width: width ? `${width}px` : 'auto',
              })}">
-          <div id="listbox"
-               @focusout="${this.#onListboxFocusout}"
-               @keydown="${this.#onListboxKeydown}"
-               class="${classMap({ checkboxes })}">
+          <div id="listbox" class="${classMap({ checkboxes })}">
             <pf-option id="placeholder"
                        disabled
-                       aria-hidden="${ifDefined(hasSelection ? 'true' : undefined)}"
-                       ?hidden="${!this.placeholder && !this.#slots.hasSlotted('placeholder')}">
-              <slot name="placeholder">${this.placeholder}</slot>
-            </pf-option>
-            <slot @slotchange="${this.#onListboxSlotchange}"></slot>
+                       ?inert="${placeholderIsInert}"
+                       aria-hidden="${ifDefined(placeholderIsInert ? undefined : String(!!hasSelection))}"
+                       ?hidden="${!placeholder && this.#slots.isEmpty('placeholder')}"
+            ><slot name="placeholder">${placeholder ?? ''}</slot></pf-option>
+            ${this.#combobox.renderItemsToShadowRoot()}
+            <slot ?hidden="${hideLightDomItems}"></slot>
           </div>
         </div>
       </div>
     `;
   }
 
-  override updated(changed: PropertyValues<this>): void {
-    if (changed.has('expanded')) {
-      this.#expandedChanged();
-    }
-    if (changed.has('value')) {
-      this.dispatchEvent(new PfSelectChangeEvent());
-    }
-    // whether select has removable chips for selected items
-    // NOTE: revisit this in v5
-    // const hasChips = this.variant === 'typeaheadmulti';
-    // reset input if chip has been added
-    // if (this.hasChips && this._input?.value) {
-    //   const chip = this.shadowRoot?.querySelector(`pf-chip#chip-${this._input?.value}`) as HTMLElement;
-    //   if (chip && this._chipGroup) {
-    //     this._chipGroup.focusOnChip(chip);
-    //     this._input.value = '';
-    //   }
-    // }
-  }
-
-  override firstUpdated(): void {
-    // kick the renderer to that the placeholder gets picked up
-    this.requestUpdate();
-    // TODO: don't do filtering in the controller
-    // if (this.variant === 'typeaheadmulti') {
-    //   this.#listbox.filter = this.filter;
-    // }
-  }
-
-  #variantChanged() {
-    this.#listbox?.hostDisconnected();
-    const getHTMLElement = () => this.#listboxElement;
-    switch (this.variant) {
-      // TODO
-      // case 'typeahead':
-      // case 'typeaheadmulti':
-      //   this.#controller = new ListboxController.of<PfOption>(this, {
-      //     multi: this.variant==='typeaheadmulti',
-      //     a11yController: ActiveDescendantController.of(this)
-      //   });
-      //   break;
-      default:
-        this.#listbox = ListboxController.of<PfOption>(this, {
-          multi: this.variant === 'checkbox',
-          getHTMLElement,
-          isSelected: option => option.selected,
-          requestSelect: (option, selected) => {
-            this.#lastSelected = this.selected;
-            option.selected = !option.disabled && !!selected;
-            this.#selectedChanged();
-            return true;
-          },
-          a11yController: RovingTabindexController.of(this, {
-            getHTMLElement,
-            getItems: () => this.options,
-          }),
-        });
-        break;
-    }
+  @observes('disabled')
+  private disabledChanged() {
+    this.#combobox.disabled = this.disabled;
   }
 
-  async #expandedChanged() {
-    const will = this.expanded ? 'close' : 'open';
-    this.dispatchEvent(new Event(will));
-    if (this.expanded) {
-      await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
-      const focusableItem = this.#listbox?.activeItem ?? this.#listbox?.nextItem;
-      focusableItem?.focus();
-    } else if (this.#lastSelected === this.selected) {
-      await this.#float.hide();
-      this._toggle?.focus();
+  @observes('expanded')
+  private async expandedChanged(old: boolean, expanded: boolean) {
+    if (this.dispatchEvent(new Event(this.expanded ? 'close' : 'open'))) {
+      if (expanded) {
+        this.#doExpand();
+      } else {
+        this.#doCollapse();
+      }
     }
   }
 
-  async #selectedChanged() {
+  @observes('selected')
+  private async selectedChanged(_: PfOption[], selected: PfOption[]) {
+    this.value = selected.map(x => x.value).join();
     await this.updateComplete;
-    this.value = [this.selected]
-        .flat()
-        .filter(x => !!x)
-        .map(x => x!.value)
-        .join();
     switch (this.variant) {
       case 'single':
         this.hide();
-        this._toggle?.focus();
+        this._toggleButton?.focus();
+        break;
+      case 'typeahead':
+        this._toggleInput!.value = this.value;
     }
   }
 
-  #onListboxKeydown(event: KeyboardEvent) {
-    switch (event.key) {
-      case 'Escape':
-        this.hide();
-        this._toggle?.focus();
+  @observes('variant')
+  private async variantChanged() {
+    this.#combobox.hostDisconnected();
+    this.#combobox.multi = this.variant === 'typeaheadmulti' || this.variant === 'checkbox';
+    this.#combobox.hostConnected();
+    if (this.variant === 'checkbox') {
+      import('@patternfly/elements/pf-badge/pf-badge.js');
     }
   }
 
-  #onListboxFocusout(event: FocusEvent) {
-    switch (this.variant) {
-      case 'single':
-      case 'checkbox':
-        if (this.expanded) {
-          const root = this.getRootNode();
-          if ((root instanceof ShadowRoot || root instanceof Document)
-              && !this.options.includes(event.relatedTarget as PfOption)
-          ) {
-            this.hide();
-          }
-        }
+  @observes('value')
+  private valueChanged() {
+    this.#internals.setFormValue(this.value ?? '');
+    this.dispatchEvent(new PfSelectChangeEvent());
+  }
+
+  @observes('variant')
+  @observes('value')
+  private focusChips(): void {
+    // whether select has removable chips for selected items
+    // NOTE: revisit this in v5
+    // reset input if chip has been added
+    const hasChips = this.variant === 'typeaheadmulti';
+    if (hasChips && this._toggleInput?.value) {
+      const chip =
+        this.shadowRoot?.querySelector(`pf-chip#chip-${this._toggleInput?.value}`) as PfChip;
+      if (chip && this._chipGroup) {
+        this._chipGroup.focusOnChip(chip);
+        this._toggleInput.value = '';
+      }
     }
   }
 
-  #onButtonKeydown(event: KeyboardEvent) {
-    switch (this.variant) {
-      case 'single':
-      case 'checkbox':
-        switch (event.key) {
-          case 'ArrowDown':
-            this.show();
-        }
+  async #doExpand() {
+    try {
+      await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
+      return true;
+    } catch {
+      return false;
     }
   }
 
-  #onListboxSlotchange() {
-    this.#listbox?.setOptions(this.options);
-    this.options.forEach((option, index, options) => {
-      option.setSize = options.length;
-      option.posInSet = index;
-    });
+  async #doCollapse() {
+    try {
+      await this.#float.hide();
+      return true;
+    } catch {
+      return false;
+    }
   }
 
   /**
@@ -439,32 +345,22 @@ export class PfSelect extends LitElement {
    * @param opt pf-option
    */
   #onChipRemove(opt: PfOption, event: Event) {
-  //   if (event.chip) {
-  //     opt.selected = false;
-  //     this._input?.focus();
-  //   }
-  }
-
-  /**
-   * handles typeahead combobox input event
-   */
-  #onTypeaheadInput() {
-    // update filter
-    // if (this.filter !== this._input?.value) {
-    //   this.filter = this._input?.value || '';
-    //   this.show();
-    // }
-    // TODO: handle hiding && aria hiding options
+    if (event instanceof PfChipRemoveEvent) {
+      opt.selected = false;
+      this._toggleInput?.focus();
+    }
   }
 
   #computePlaceholderText() {
     return this.placeholder
       || this.querySelector?.<HTMLSlotElement>('[slot=placeholder]')
           ?.assignedNodes()
-          ?.reduce((acc, node) => `${acc}${node.textContent}`, '')?.trim()
-      || this.#listbox?.options
-          ?.filter(x => x !== this.shadowRoot?.getElementById('placeholder'))
-          ?.at(0)?.value
+          ?.reduce((acc, node) => `${acc}${node.textContent}`, '')
+          ?.trim()
+      || this.#combobox.items
+          .filter(this.#isNotPlaceholderOption)
+          .at(0)
+          ?.value
       || '';
   }
 
@@ -488,8 +384,11 @@ export class PfSelect extends LitElement {
    * toggles popup based on current state
    */
   async toggle(): Promise<void> {
-    this.expanded = !this.expanded;
-    await this.updateComplete;
+    if (this.expanded) {
+      await this.hide();
+    } else {
+      await this.show();
+    }
   }
 }
 
@@ -498,3 +397,4 @@ declare global {
     'pf-select': PfSelect;
   }
 }
+
diff --git a/elements/pf-select/test/pf-select.spec.ts b/elements/pf-select/test/pf-select.spec.ts
index a396b3292e..ac03a3f41f 100644
--- a/elements/pf-select/test/pf-select.spec.ts
+++ b/elements/pf-select/test/pf-select.spec.ts
@@ -1,21 +1,24 @@
-import { expect, html, nextFrame } from '@open-wc/testing';
+import { expect, html, aTimeout, nextFrame } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 import { PfSelect } from '../pf-select.js';
 import { sendKeys } from '@web/test-runner-commands';
-import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { a11ySnapshot, querySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { clickElementAtCenter, clickElementAtOffset } from '@patternfly/pfe-tools/test/utils.js';
+import type { PfOption } from '../pf-option.js';
 
-async function shiftHold() {
+async function holdShift() {
   await sendKeys({ down: 'Shift' });
 }
 
-async function shiftRelease() {
+async function releaseShift() {
   await sendKeys({ up: 'Shift' });
 }
 
-async function ctrlA() {
+async function holdCtrl() {
   await sendKeys({ down: 'Control' });
-  await sendKeys({ down: 'a' });
-  await sendKeys({ up: 'a' });
+}
+
+async function releaseCtrl() {
   await sendKeys({ up: 'Control' });
 }
 
@@ -25,272 +28,379 @@ function press(key: string) {
   };
 }
 
-function getValues(element: PfSelect) {
-  return [element.selected].flat().filter(x => !!x).map(x => x!.value);
+/**
+ * Compare selection to an array of strings
+ * @param element pf-select
+ * @returns a list of values of each selected option
+ */
+function getSelectedOptionValues(element: PfSelect): string[] {
+  return Array.from(element.querySelectorAll<PfOption>('[selected]'), x => x.value);
 }
 
-describe('<pf-select>', function() {
-  let element: PfSelect;
+// a11yShapshot does not surface the options
+function getVisibleOptionValues(element: PfSelect): string[] {
+  return element.options.filter(x => !x.hidden).map(x => x.value);
+}
 
-  const updateComplete = () => element.updateComplete;
+// a11yShapshot does not surface the options
+function getActiveOption(element: PfSelect) {
+  return element.options.find(x => x.active);
+}
 
-  const focus = () => element.focus();
+/**
+ * NOTE because of the copy-to-shadow-root shtick in ActivedescendantController,
+ * we can't just pick an option (from light dom);
+ * @param element pf-select
+ * @param index item index
+ */
+async function clickItemAtIndex(element: PfSelect, index: number) {
+  const itemHeight = 44;
+  await clickElementAtOffset(element, [
+    10,
+    element.offsetHeight + (itemHeight * (index + 1)) - itemHeight / 2,
+  ], {
+    allowOutOfBounds: true,
+  });
+}
 
-  describe('simply instantiating', function() {
-    it('imperatively instantiates', function() {
-      expect(document.createElement('pf-select')).to.be.an.instanceof(PfSelect);
-    });
+describe('<pf-select>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-select')).to.be.an.instanceof(PfSelect);
+  });
 
-    it('should upgrade', async function() {
-      element = await createFixture<PfSelect>(html`<pf-select></pf-select>`);
-      const klass = customElements.get('pf-select');
-      expect(element)
-          .to.be.an.instanceOf(klass)
-          .and
-          .to.be.an.instanceOf(PfSelect);
-    });
+  it('should upgrade', async function() {
+    expect(await createFixture<PfSelect>(html`<pf-select></pf-select>`))
+        .to.be.an.instanceOf(customElements.get('pf-select'))
+        .and
+        .to.be.an.instanceOf(PfSelect);
   });
 
-  describe('variant="single"', function() {
+  describe('with accessible-label attribute and 3 items', function() {
+    let element: PfSelect;
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus;
+
     beforeEach(async function() {
       element = await createFixture<PfSelect>(html`
-        <pf-select variant="single"
-                   accessible-label="Choose a number"
-                   placeholder="Choose a number">
+        <pf-select accessible-label="label">
           <pf-option value="1">1</pf-option>
           <pf-option value="2">2</pf-option>
           <pf-option value="3">3</pf-option>
-          <pf-option value="4">4</pf-option>
-          <pf-option value="5">5</pf-option>
-          <pf-option value="6">6</pf-option>
-          <pf-option value="7">7</pf-option>
-          <pf-option value="8">8</pf-option>
         </pf-select>`);
     });
 
-    it('is accessible', async function() {
+    it('passes aXe audit', async function() {
       await expect(element).to.be.accessible();
     });
 
-    describe('without accessible label', function() {
-      beforeEach(function() {
-        element.accessibleLabel = undefined;
-      });
-      beforeEach(updateComplete);
-      it('fails accessibility audit', async function() {
-        await expect(element).to.not.be.accessible();
+    it('labels the combobox with the accessible-label attribuet', async function() {
+      expect(await a11ySnapshot()).to.axContainQuery({
+        role: 'combobox',
+        name: 'label',
       });
     });
 
-    describe('calling focus())', function() {
-      beforeEach(function() {
-        element.focus();
+    it('does not have redundant role', async function() {
+      expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+    });
+
+    it('sets aria-setsize="3" and aria-posinset on items', function() {
+      element.options.forEach((option, i) => {
+        expect(option).to.have.attr('aria-setsize', '3');
+        expect(option).to.have.attr('aria-posinset', `${i + 1}`);
       });
+    });
 
+    describe('focus()', function() {
+      beforeEach(focus);
       beforeEach(updateComplete);
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
 
-      describe('pressing Enter', function() {
-        beforeEach(press('Enter'));
-        beforeEach(updateComplete);
+        it('labels the listbox with the accessible-label attribute', async function() {
+          expect(await a11ySnapshot()).to.axContainQuery({
+            role: 'listbox',
+            name: 'label',
+          });
+        });
 
-        it('expands', async function() {
-          expect(element.expanded).to.be.true;
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          expect(listbox).to.be.ok;
+        it('focuses on the first item', async function() {
+          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
         });
 
-        it('focuses on the placeholder', async function() {
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          const focused = listbox?.children?.find(x => x.focused);
-          expect(focused?.name).to.equal('Choose a number');
+        describe('Space', function() {
+          beforeEach(press(' '));
+          beforeEach(updateComplete);
+          it('selects option 1', function() {
+            expect(getSelectedOptionValues(element)).to.deep.equal([
+              '1',
+            ]);
+          });
+          it('exposes selection to assistive technology', async function() {
+            expect(await a11ySnapshot()).to.axContainQuery({
+              role: 'combobox',
+              value: '1',
+            });
+          });
         });
       });
+    });
+  });
 
-      describe('pressing Space', function() {
-        beforeEach(press(' '));
-        beforeEach(updateComplete);
+  describe('with `placeholder` attribute and 3 items', function() {
+    let element: PfSelect;
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus;
 
-        it('expands', async function() {
-          expect(element.expanded).to.be.true;
-          const snapshot = await a11ySnapshot();
-          expect(snapshot.children?.at(1)).to.be.ok;
-          expect(snapshot.children?.at(1)?.role).to.equal('listbox');
-        });
+    beforeEach(async function() {
+      element = await createFixture<PfSelect>(html`
+        <pf-select placeholder="placeholder">
+          <pf-option value="1">1</pf-option>
+          <pf-option value="2">2</pf-option>
+          <pf-option value="3">3</pf-option>
+        </pf-select>`);
+    });
 
-        it('focuses on the placeholder', async function() {
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          const focused = listbox?.children?.find(x => x.focused);
-          expect(focused?.name).to.equal('Choose a number');
-        });
+    it('passes aXe audit', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('labels the combobox with the placeholder attribute', async function() {
+      expect(await a11ySnapshot()).to.axContainQuery({
+        role: 'combobox',
+        name: 'placeholder',
       });
+    });
 
-      describe('pressing ArrowDown', function() {
-        beforeEach(press('ArrowDown'));
-        beforeEach(updateComplete);
+    it('does not have redundant role', async function() {
+      expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+    });
 
-        it('expands', async function() {
-          expect(element.expanded).to.be.true;
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          expect(listbox).to.be.ok;
-        });
+    it('sets aria-setsize="4" and aria-posinset on items', function() {
+      element.options.forEach((option, i) => {
+        expect(option).to.have.attr('aria-setsize', '4');
+        expect(option).to.have.attr('aria-posinset', `${i + 1}`);
+      });
+    });
 
-        it('focuses on option 1', async function() {
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          const focused = listbox?.children?.find(x => x.focused);
-          expect(focused?.name).to.equal('Choose a number');
-        });
+    describe('focus()', function() {
+      beforeEach(focus);
+      beforeEach(updateComplete);
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
 
-        describe('then pressing ArrowUp', function() {
-          beforeEach(press('ArrowUp'));
-          beforeEach(updateComplete);
-          it('focuses on the last option', async function() {
-            const snapshot = await a11ySnapshot();
-            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-            const focused = listbox?.children?.find(x => x.focused);
-            expect(focused?.name).to.equal('8');
-          });
-          describe('then pressing ArrowDown', function() {
-            beforeEach(press('ArrowDown'));
-            beforeEach(updateComplete);
-            it('focuses on the placeholder', async function() {
-              const snapshot = await a11ySnapshot();
-              const listbox = snapshot.children?.find(x => x.role === 'listbox');
-              const focused = listbox?.children?.find(x => x.focused);
-              expect(focused?.name).to.equal('Choose a number');
-            });
+        it('labels the listbox with the placeholder attribute', async function() {
+          expect(await a11ySnapshot()).to.axContainQuery({
+            role: 'listbox',
+            name: 'placeholder',
           });
         });
 
-        describe('then pressing ArrowDown', function() {
-          beforeEach(press('ArrowDown'));
+        it('focuses on the placeholder item', async function() {
+          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('placeholder');
+        });
+
+        describe('Space', function() {
+          beforeEach(press(' '));
           beforeEach(updateComplete);
 
-          it('focuses on option 1', async function() {
-            const snapshot = await a11ySnapshot();
-            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-            const focused = listbox?.children?.find(x => x.focused);
-            expect(focused?.name).to.equal('1');
+          it('selects nothing', async function() {
+            expect(await a11ySnapshot()).to.axContainRole('listbox');
           });
 
-          describe('then pressing ArrowUp', function() {
-            beforeEach(press('ArrowUp'));
-            beforeEach(updateComplete);
-            it('focuses on the placeholder', async function() {
-              const snapshot = await a11ySnapshot();
-              const listbox = snapshot.children?.find(x => x.role === 'listbox');
-              const focused = listbox?.children?.find(x => x.focused);
-              expect(focused?.name).to.equal('Choose a number');
-            });
+          it('does not close the listbox nothing', function() {
+            expect(getSelectedOptionValues(element)).to.deep.equal([]);
           });
 
-          describe('then pressing Enter', function() {
-            beforeEach(press('Enter'));
+          describe('ArrowDown', function() {
+            beforeEach(press('ArrowDown'));
             beforeEach(updateComplete);
 
-            it('selects option 1', function() {
-              expect(getValues(element)).to.deep.equal(['1']);
+            it('focuses on the first item', async function() {
+              expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+            });
+
+            describe('Space', function() {
+              beforeEach(press(' '));
+              beforeEach(updateComplete);
+              it('selects option 1', function() {
+                expect(getSelectedOptionValues(element)).to.deep.equal([
+                  '1',
+                ]);
+              });
+              it('exposes selection to assistive technology', async function() {
+                expect(await a11ySnapshot()).to.axContainQuery({
+                  role: 'combobox',
+                  value: '1',
+                });
+              });
             });
           });
         });
+      });
+    });
+  });
 
-        describe('then pressing Space', function() {
-          beforeEach(press(' '));
-          beforeEach(updateComplete);
+  describe('with 3 items and associated <label> elements', function() {
+    let element: PfSelect;
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus;
 
-          it('closes', function() {
-            expect(element.expanded).to.be.false;
-          });
+    beforeEach(async function() {
+      element = await createFixture<PfSelect>(html`
+        <pf-select id="select">
+          <pf-option value="1">1</pf-option>
+          <pf-option value="2">2</pf-option>
+          <pf-option value="3">3</pf-option>
+        </pf-select>
+        <label for="select">label1</label>
+        <label for="select">label2</label>
+        `);
+    });
 
-          it('hides the listbox', async function() {
-            const snapshot = await a11ySnapshot();
-            expect(snapshot.children?.find(x => x.role === 'listbox')).to.be.undefined;
-          });
+    it('passes aXe audit', async function() {
+      await expect(element).to.be.accessible();
+    });
 
-          it('focuses the button', async function() {
-            const snapshot = await a11ySnapshot();
-            const focused = snapshot.children?.find(x => x.focused);
-            expect(focused?.role).to.equal('combobox');
-            expect(focused?.haspopup).to.equal('listbox');
-          });
+    it('does not have redundant role', async function() {
+      expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+    });
 
-          it('does not select anything', async function() {
-            // because the placeholder was focused
-            expect(getValues(element)).to.deep.equal([]);
+    it('labels the combobox with the label elements', async function() {
+      expect(await a11ySnapshot()).to.axContainQuery({
+        role: 'combobox',
+        name: 'label1label2',
+      });
+    });
+
+    it('sets aria-setsize="3" and aria-posinset on items', function() {
+      element.options.forEach((option, i) => {
+        expect(option).to.have.attr('aria-setsize', '3');
+        expect(option).to.have.attr('aria-posinset', `${i + 1}`);
+      });
+    });
+
+    describe('focus()', function() {
+      beforeEach(focus);
+      beforeEach(updateComplete);
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
+
+        it('labels the listbox with the label elements', async function() {
+          expect(await a11ySnapshot()).to.axContainQuery({
+            role: 'listbox',
+            name: 'label1label2',
           });
         });
 
-        describe('then pressing Tab', function() {
-          beforeEach(press('Tab'));
-          beforeEach(nextFrame);
-          beforeEach(updateComplete);
-          it('closes', function() {
-            expect(element.expanded).to.be.false;
-          });
-          it('hides the listbox', async function() {
-            const snapshot = await a11ySnapshot();
-            expect(snapshot.children?.at(1)).to.be.undefined;
-          });
-          it('focuses the button', async function() {
-            const snapshot = await a11ySnapshot();
-            const focused = snapshot.children?.find(x => x.focused);
-            expect(focused?.role).to.equal('combobox');
-            expect(focused?.haspopup).to.equal('listbox');
-          });
+        it('focuses on the first item', async function() {
+          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
         });
 
-        describe('then pressing Shift+Tab', function() {
-          beforeEach(shiftHold);
-          beforeEach(press('Tab'));
-          beforeEach(shiftRelease);
+        describe('Space', function() {
+          beforeEach(press(' '));
           beforeEach(updateComplete);
-          it('closes', function() {
-            expect(element.expanded).to.be.false;
-          });
-          it('hides the listbox', async function() {
-            const snapshot = await a11ySnapshot();
-            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-            expect(listbox).to.be.undefined;
+          it('selects option 1', function() {
+            expect(getSelectedOptionValues(element)).to.deep.equal([
+              '1',
+            ]);
           });
-          it('focuses the button', async function() {
-            const snapshot = await a11ySnapshot();
-            const focused = snapshot.children?.find(x => x.focused);
-            expect(focused?.role).to.equal('combobox');
-            expect(focused?.haspopup).to.equal('listbox');
+          it('exposes selection to assistive technology', async function() {
+            expect(await a11ySnapshot()).to.axContainQuery({
+              role: 'combobox',
+              value: '1',
+            });
           });
         });
+      });
+    });
+  });
 
-        describe('then pressing Escape', function() {
-          beforeEach(press('Escape'));
-          beforeEach(nextFrame);
+  describe('in a deep shadow root', function() {
+    let element: PfSelect;
+    const focus = () => element.focus();
+    const updateComplete = () => element.updateComplete;
+    beforeEach(async function() {
+      const fixture = await createFixture(html`
+      <shadow-root>
+        <template shadowrootmode="open">
+          <shadow-root>
+            <template shadowrootmode="open">
+              <pf-select variant="single"
+                         accessible-label="Choose a number"
+                         placeholder="Choose a number">
+                <pf-option value="1">1</pf-option>
+                <pf-option value="2">2</pf-option>
+                <pf-option value="3">3</pf-option>
+                <pf-option value="4">4</pf-option>
+                <pf-option value="5">5</pf-option>
+                <pf-option value="6">6</pf-option>
+                <pf-option value="7">7</pf-option>
+                <pf-option value="8">8</pf-option>
+              </pf-select>
+            </template>
+          </shadow-root>
+        </template>
+      </shadow-root>`);
+
+      function attachShadowRoots(root?: Document | ShadowRoot) {
+        root?.querySelectorAll<HTMLTemplateElement>('template[shadowrootmode]').forEach(template => {
+          const mode = template.getAttribute('shadowrootmode') as 'open' | 'closed';
+          const shadowRoot = template.parentElement?.attachShadow?.({ mode });
+          shadowRoot?.appendChild(template.content);
+          template.remove();
+          attachShadowRoots(shadowRoot);
+        });
+      }
+      attachShadowRoots(document);
+
+      const select = fixture.shadowRoot?.firstElementChild?.shadowRoot?.querySelector('pf-select');
+      if (select) {
+        element = select;
+        await element?.updateComplete;
+      } else {
+        throw new Error('no element!');
+      }
+    });
+
+    describe('expanding', function() {
+      beforeEach(focus);
+      beforeEach(press('Enter'));
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
+        beforeEach(updateComplete);
+        it('remains expanded', function() {
+          expect(element.expanded).to.be.true;
+        });
+        describe('ArrowDown', function() {
+          beforeEach(press('ArrowDown'));
           beforeEach(updateComplete);
-          it('closes', function() {
-            expect(element.expanded).to.be.false;
-          });
-          it('hides the listbox', async function() {
-            const snapshot = await a11ySnapshot();
-            expect(snapshot.children?.at(1)).to.be.undefined;
+          it('remains expanded', function() {
+            expect(element.expanded).to.be.true;
           });
-          it('focuses the button', async function() {
-            const snapshot = await a11ySnapshot();
-            const focused = snapshot.children?.find(x => x.focused);
-            expect(focused?.role).to.equal('combobox');
-            expect(focused?.haspopup).to.equal('listbox');
+          describe('Space', function() {
+            beforeEach(press(' '));
+            beforeEach(updateComplete);
+            it('closes', function() {
+              expect(element.expanded).to.be.false;
+            });
+            it('sets value', function() {
+              expect(element.value).to.equal('2');
+            });
           });
         });
       });
     });
   });
 
-  describe('variant="checkbox"', function() {
+  describe('with 8 items', function() {
+    let element: PfSelect;
+    const updateComplete = () => element.updateComplete;
+    const focus = () => element.focus();
+
     beforeEach(async function() {
       element = await createFixture<PfSelect>(html`
-        <pf-select variant="checkbox"
-                   accessible-label="Check it out">
+        <pf-select>
           <pf-option value="1">1</pf-option>
           <pf-option value="2">2</pf-option>
           <pf-option value="3">3</pf-option>
@@ -302,725 +412,1346 @@ describe('<pf-select>', function() {
         </pf-select>`);
     });
 
-    it('is accessible', async function() {
-      await expect(element).to.be.accessible();
+    it('does not pass aXe audit', async function() {
+      await expect(element).to.not.be.accessible();
     });
 
-    describe('calling focus())', function() {
-      beforeEach(function() {
-        element.focus();
+    it('sets aria-setsize and aria-posinset on items', function() {
+      element.options.forEach((option, i) => {
+        expect(option).to.have.attr('aria-setsize', '8');
+        expect(option).to.have.attr('aria-posinset', `${i + 1}`);
+      });
+    });
+
+    describe('click combobox button', function() {
+      beforeEach(() => clickElementAtCenter(element));
+      beforeEach(updateComplete);
+
+      it('does not pass aXe audit', async function() {
+        await expect(element).to.not.be.accessible();
+      });
+
+      it('expands the listbox', async function() {
+        expect(await a11ySnapshot()).to.axContainRole('listbox');
       });
 
+      it('focuses on the first item', async function() {
+        expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+      });
+
+      describe('Tab', function() {
+        beforeEach(press('Tab'));
+        it('does not focus the combobox button', async function() {
+          expect(await a11ySnapshot()).to.not.have.axTreeFocusedNode;
+        });
+      });
+    });
+
+    describe('focus()', function() {
+      beforeEach(focus);
       beforeEach(updateComplete);
-      describe('pressing Enter', function() {
+
+      it('focuses on the combobox button', async function() {
+        expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+      });
+
+      it('does not expand the listbox', async function() {
+        expect(element.expanded).to.be.false;
+        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+      });
+
+      describe('Enter', function() {
         beforeEach(press('Enter'));
         beforeEach(updateComplete);
 
-        it('expands', async function() {
+        it('expands the listbox', async function() {
           expect(element.expanded).to.be.true;
-          const snapshot = await a11ySnapshot();
-          expect(snapshot.children?.at(1)).to.be.ok;
-          expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
         });
 
-        it('should NOT use checkbox role for options', async function() {
-          const snapshot = await a11ySnapshot();
-          expect(snapshot.children?.at(1)?.children?.filter(x => x.role === 'checkbox')?.length)
-              .to.equal(0);
+        it('focuses on the first item', async function() {
+          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
         });
       });
 
-      describe('pressing Space', function() {
+      describe('Space', function() {
+        beforeEach(function() {
+          document.body.style.height = '8000px';
+        });
+        afterEach(function() {
+          document.body.style.height = 'initial';
+        });
+
         beforeEach(press(' '));
         beforeEach(updateComplete);
-        it('expands', async function() {
-          expect(element.expanded).to.be.true;
-          const snapshot = await a11ySnapshot();
-          expect(snapshot.children?.at(1)).to.be.ok;
-          expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+        beforeEach(() => aTimeout(300));
+
+        it('expands the listbox', async function() {
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
         });
-      });
 
-      describe('pressing ArrowDown', function() {
-        beforeEach(press('ArrowDown'));
-        beforeEach(updateComplete);
-        it('expands', async function() {
-          expect(element.expanded).to.be.true;
-          const snapshot = await a11ySnapshot();
-          expect(snapshot.children?.at(1)).to.be.ok;
-          expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+        it('focuses on the first item', async function() {
+          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
         });
 
-        describe('then pressing Shift+Tab', function() {
-          beforeEach(shiftHold);
-          beforeEach(press('Tab'));
-          beforeEach(shiftRelease);
-          beforeEach(updateComplete);
+        it('does not scroll the screen', function() {
+          expect(window.scrollY).to.equal(0);
+        });
+      });
 
-          it('closes', async function() {
-            expect(element.expanded).to.be.false;
-          });
+      describe('Home', function() {
+        beforeEach(press('Home'));
+        beforeEach(updateComplete);
 
-          it('hides the listbox', async function() {
-            const snapshot = await a11ySnapshot();
-            expect(snapshot.children?.at(1)).to.be.undefined;
-          });
+        it('expands the listbox', async function() {
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
+        });
 
-          it('focuses the button', async function() {
-            const snapshot = await a11ySnapshot();
-            expect(snapshot.children?.at(0)?.role).to.equal('combobox');
-            expect(snapshot.children?.at(0)?.focused).to.be.true;
-          });
+        it('focuses on option 1', async function() {
+          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+        });
+      });
+
+      describe('End', function() {
+        beforeEach(press('End'));
+        beforeEach(updateComplete);
+
+        it('expands the listbox', async function() {
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
         });
 
-        describe('then pressing Tab', function() {
-          beforeEach(press('Tab'));
-          beforeEach(nextFrame);
-          beforeEach(updateComplete);
-          // a little extra sleep to de-flake this test
-          beforeEach(nextFrame);
-          beforeEach(updateComplete);
-          it('closes', function() {
-            expect(element.expanded).to.be.false;
-          });
-          it('hides the listbox', async function() {
-            const snapshot = await a11ySnapshot();
-            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-            expect(listbox).to.be.undefined;
-          });
+        it('focuses on option 8', async function() {
+          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('8');
         });
+      });
 
-        describe('then pressing Escape', function() {
-          beforeEach(press('Escape'));
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
+        beforeEach(updateComplete);
+
+        it('expands the listbox', async function() {
+          expect(element.expanded).to.be.true;
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
+        });
+
+        it('focuses on the first item', async function() {
+          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+        });
+
+        describe('ArrowUp', function() {
+          beforeEach(press('ArrowUp'));
           beforeEach(updateComplete);
-          it('closes', function() {
-            expect(element.expanded).to.be.false;
-          });
-          it('hides the listbox', async function() {
-            const snapshot = await a11ySnapshot();
-            expect(snapshot.children?.at(1)).to.be.undefined;
+          it('focuses on the last option', async function() {
+            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('8');
           });
-          it('focuses the button', async function() {
-            const snapshot = await a11ySnapshot();
-            const focused = snapshot.children?.find(x => x.focused);
-            expect(focused?.role).to.equal('combobox');
+          describe('ArrowDown', function() {
+            beforeEach(press('ArrowDown'));
+            beforeEach(updateComplete);
+            it('focuses on option 1', async function() {
+              expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+            });
           });
         });
 
-        describe('then pressing Space', function() {
-          beforeEach(press(' '));
+        describe('ArrowDown', function() {
+          beforeEach(press('ArrowDown'));
           beforeEach(updateComplete);
 
-          it('selects option 1', function() {
-            // because the placeholder was focused
-            expect(getValues(element)).to.deep.equal(['1']);
+          it('focuses on option 2', async function() {
+            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('2');
           });
 
-          it('remains expanded', async function() {
-            expect(element.expanded).to.be.true;
-            const snapshot = await a11ySnapshot();
-            expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+          describe('ArrowUp', function() {
+            beforeEach(press('ArrowUp'));
+            beforeEach(updateComplete);
+            it('focuses on option 1', async function() {
+              expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
+            });
           });
 
-          describe('then pressing ArrowDown', function() {
+          describe('ArrowDown', function() {
             beforeEach(press('ArrowDown'));
             beforeEach(updateComplete);
-            it('focuses option 1', async function() {
-              const snapshot = await a11ySnapshot();
-              const listbox = snapshot.children?.find(x => x.role === 'listbox');
-              const focused = listbox?.children?.find(x => x.focused);
-              expect(focused?.name).to.equal('2');
+            it('focuses on option 3', async function() {
+              expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('3');
             });
-            describe('then pressing Enter', function() {
+
+            describe('Enter', function() {
               beforeEach(press('Enter'));
               beforeEach(updateComplete);
-              it('adds option 2 to selection', function() {
-                expect(getValues(element)).to.deep.equal([
-                  '1',
-                  '2',
+
+              it('selects option 3', function() {
+                expect(getSelectedOptionValues(element)).to.deep.equal([
+                  '3',
                 ]);
               });
 
-              it('remains expanded', async function() {
-                expect(element.expanded).to.be.true;
-                const snapshot = await a11ySnapshot();
-                expect(snapshot.children?.at(1)?.role).to.equal('listbox');
+              it('exposes selection to assistive technology', async function() {
+                expect(await a11ySnapshot()).to.axContainQuery({
+                  role: 'combobox',
+                  value: '3',
+                });
               });
 
-              describe('then holding Shift and pressing down arrow / enter twice in a row', function() {
-                beforeEach(shiftHold);
-                beforeEach(press('ArrowDown'));
-                beforeEach(press('Enter'));
+              it('hides the listbox', async function() {
+                expect(element.expanded).to.be.false;
+                expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+              });
+
+              describe('ArrowDown', function() {
                 beforeEach(press('ArrowDown'));
-                beforeEach(press('Enter'));
-                beforeEach(shiftRelease);
                 beforeEach(updateComplete);
 
-                it('adds options 2 and 3 to the selected list', function() {
-                  expect(getValues(element)).to.deep.equal([
-                    '1',
-                    '2',
-                    '3',
-                    '4',
-                  ]);
+                it('expands the listbox', async function() {
+                  expect(element.expanded).to.be.true;
+                  expect(await a11ySnapshot()).to.axContainRole('listbox');
                 });
 
-                describe('then pressing ArrowUp and Enter', function() {
-                  beforeEach(press('ArrowUp'));
-                  beforeEach(press('Enter'));
+                describe('Home', function() {
+                  beforeEach(press('Home'));
                   beforeEach(updateComplete);
 
-                  it('deselects option 3', function() {
-                    expect(getValues(element)).to.deep.equal([
-                      '1',
-                      '2',
-                      '4',
-                    ]);
+                  it('focuses on option 1', async function() {
+                    expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
                   });
 
-                  describe('then holding down Shift and pressing arrow up / enter twice in a row', function() {
-                    beforeEach(press('ArrowUp'));
-                    beforeEach(press('Enter'));
-                    beforeEach(updateComplete);
-                    beforeEach(press('ArrowUp'));
-                    beforeEach(press('Enter'));
-                    beforeEach(updateComplete);
-                    beforeEach(shiftRelease);
+                  describe('Home', function() {
+                    beforeEach(press('Home'));
                     beforeEach(updateComplete);
 
-                    it('deselects options 1 and 2', function() {
-                      expect(getValues(element)).to.deep.equal([
-                        '4',
-                      ]);
+                    it('focuses on option 1', async function() {
+                      expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
                     });
+                  });
+                });
+              });
+            });
+          });
 
-                    describe('then pressing Ctrl+A', function() {
-                      beforeEach(ctrlA);
-                      beforeEach(updateComplete);
+          describe('Enter', function() {
+            beforeEach(press('Enter'));
+            beforeEach(updateComplete);
 
-                      it('selects all options', function() {
-                        expect(getValues(element)).to.deep.equal([
-                          '1',
-                          '2',
-                          '3',
-                          '4',
-                          '5',
-                          '6',
-                          '7',
-                          '8',
-                        ]);
-                      });
+            it('selects option 2', function() {
+              expect(getSelectedOptionValues(element)).to.deep.equal(['2']);
+            });
 
-                      describe('then pressing Ctrl+A again', function() {
-                        beforeEach(ctrlA);
-                        beforeEach(updateComplete);
-                        it('deselects all options', function() {
-                          expect(getValues(element)).to.deep.equal([]);
-                        });
-                      });
-                    });
-                  });
-                });
+            it('exposes selection to assistive technology', async function() {
+              expect(await a11ySnapshot()).to.axContainQuery({
+                role: 'combobox',
+                value: '2',
               });
             });
           });
         });
-      });
-    });
-  });
 
-  describe('in a deep shadow root', function() {
-    let element: PfSelect;
-    const focus = () => element.focus();
-    const updateComplete = () => element.updateComplete;
-    beforeEach(async function() {
-      const fixture = await createFixture(html`
-        <shadow-root>
-          <template shadowrootmode="open">
-            <shadow-root>
-              <template shadowrootmode="open">
-                <pf-select variant="single"
-                  accessible-label="Choose a number"
-                  placeholder="Choose a number">
-                  <pf-option value="1">1</pf-option>
-                  <pf-option value="2">2</pf-option>
-                  <pf-option value="3">3</pf-option>
-                  <pf-option value="4">4</pf-option>
-                  <pf-option value="5">5</pf-option>
-                  <pf-option value="6">6</pf-option>
-                  <pf-option value="7">7</pf-option>
-                  <pf-option value="8">8</pf-option>
-                </pf-select>
-              </template>
-            </shadow-root>
-          </template>
-        </shadow-root>`);
+        describe('Space', function() {
+          beforeEach(press(' '));
+          beforeEach(updateComplete);
 
-      function attachShadowRoots(root?: Document | ShadowRoot) {
-        root?.querySelectorAll<HTMLTemplateElement>('template[shadowrootmode]').forEach(template => {
-          const mode = template.getAttribute('shadowrootmode') as 'open' | 'closed';
-          const shadowRoot = template.parentElement?.attachShadow?.({ mode });
-          shadowRoot?.appendChild(template.content);
-          template.remove();
-          attachShadowRoots(shadowRoot);
+          it('hides the listbox', async function() {
+            expect(element.expanded).to.be.false;
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
+
+          it('focuses the combobox toggle', async function() {
+            expect(await a11ySnapshot())
+                .axTreeFocusedNode
+                .to.have.axRole('combobox');
+          });
+
+          it('selects option 1', function() {
+            expect(getSelectedOptionValues(element)).to.deep.equal([
+              '1',
+            ]);
+          });
+
+          it('exposes selection to assistive technology', async function() {
+            expect(await a11ySnapshot()).to.axContainQuery({
+              role: 'combobox',
+              value: '1',
+            });
+          });
         });
-      }
-      attachShadowRoots(document);
 
-      const select = fixture.shadowRoot?.firstElementChild?.shadowRoot?.querySelector('pf-select');
-      if (select) {
-        element = select;
-        await element?.updateComplete;
-      } else {
-        throw new Error('no element!');
-      }
-    });
-    describe('expanding', function() {
-      beforeEach(focus);
-      beforeEach(press('Enter'));
-      describe('pressing ArrowDown', function() {
-        beforeEach(press('ArrowDown'));
-        beforeEach(updateComplete);
-        it('remains expanded', function() {
-          expect(element.expanded).to.be.true;
+        describe('Tab', function() {
+          beforeEach(press('Tab'));
+          beforeEach(nextFrame);
+          beforeEach(updateComplete);
+          it('hides the listbox', async function() {
+            expect(element.expanded).to.be.false;
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
+          it('does not focus on the combobox button', async function() {
+            expect(await a11ySnapshot()).to.not.have.axTreeFocusedNode;
+          });
         });
-        describe('pressing ArrowDown', function() {
-          beforeEach(press('ArrowDown'));
+
+        describe('Shift+Tab', function() {
+          beforeEach(holdShift);
+          beforeEach(press('Tab'));
+          beforeEach(releaseShift);
           beforeEach(updateComplete);
-          it('remains expanded', function() {
-            expect(element.expanded).to.be.true;
+
+          it('hides the listbox', async function() {
+            expect(element.expanded).to.be.false;
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
           });
-          describe('pressing Space', function() {
-            beforeEach(press(' '));
-            beforeEach(updateComplete);
-            it('closes', function() {
-              expect(element.expanded).to.be.false;
-            });
-            it('sets value', function() {
-              expect(element.value).to.equal('2');
-            });
+
+          it('focuses the button', async function() {
+            expect(await a11ySnapshot())
+                .axTreeFocusedNode
+                .to.have.axRole('combobox');
+          });
+        });
+
+        describe('Escape', function() {
+          beforeEach(press('Escape'));
+          beforeEach(nextFrame);
+          beforeEach(updateComplete);
+
+          it('hides the listbox', async function() {
+            expect(element.expanded).to.be.false;
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+          });
+
+          it('focuses the button', async function() {
+            expect(await a11ySnapshot())
+                .axTreeFocusedNode
+                .to.have.axRole('combobox');
           });
         });
       });
     });
   });
+});
 
-  // try again when we implement activedescendant
-  describe.skip('variant="typeahead"', function() {
-    beforeEach(async function() {
-      element = await createFixture<PfSelect>(html`
-        <pf-select variant="${'typeahead' as 'single'}">
-          <pf-option value="Blue">Blue</pf-option>
-          <pf-option value="Green">Green</pf-option>
-          <pf-option value="Magenta">Magenta</pf-option>
-          <pf-option value="Orange">Orange</pf-option>
-          <pf-option value="Purple">Purple</pf-option>
-          <pf-option value="Pink">Pink</pf-option>
-          <pf-option value="Red">Red</pf-option>
-          <pf-option value="Yellow">Yellow</pf-option>
-        </pf-select>`);
-    });
+describe('<pf-select variant="checkbox">', function() {
+  let element: PfSelect;
+  let items: PfOption[];
+  const updateComplete = () => element.updateComplete;
+  const focus = () => element.focus();
+  beforeEach(async function() {
+    element = await createFixture<PfSelect>(html`
+      <pf-select variant="checkbox"
+                 placeholder="placeholder"
+                 accessible-label="Check it out">
+        <pf-option value="1">1</pf-option>
+        <pf-option value="2">2</pf-option>
+        <pf-option value="3">3</pf-option>
+        <pf-option value="4">4</pf-option>
+        <pf-option value="5">5</pf-option>
+        <pf-option value="6">6</pf-option>
+        <pf-option value="7">7</pf-option>
+        <pf-option value="8">8</pf-option>
+      </pf-select>`);
+    items = Array.from(element.querySelectorAll('pf-option'));
+  });
 
-    describe('custom filtering', function() {
-      beforeEach(function() {
-        // @ts-expect-error: we intend to implement this in the next release
-        element.customFilter = option =>
-          // @ts-expect-error: TODO add filter feature
-          new RegExp(element.filter).test(option.value);
-      });
+  it('is accessible', async function() {
+    await expect(element).to.be.accessible();
+  });
 
-      beforeEach(focus);
+  it('does not have redundant role', async function() {
+    expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+  });
 
+  describe('focus()', function() {
+    beforeEach(focus);
+
+    beforeEach(updateComplete);
+    describe('Enter', function() {
+      beforeEach(press('Enter'));
       beforeEach(updateComplete);
 
-      describe('typing "r"', function() {
-        beforeEach(press('r'));
-        beforeEach(updateComplete);
-        it('shows options with "r" anywhere in them', async function() {
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          expect(listbox?.children?.length).to.equal(3);
-          expect(listbox?.children?.at(0)?.name).to.equal('Green');
-          expect(listbox?.children?.at(1)?.name).to.equal('Orange');
-          expect(listbox?.children?.at(2)?.name).to.equal('Purple');
-        });
+      it('expands the listbox', async function() {
+        expect(element.expanded).to.be.true;
+        const snapshot = await a11ySnapshot();
+        expect(snapshot.children?.at(1)).to.be.ok;
+        expect(snapshot.children?.at(1)?.role).to.equal('listbox');
       });
 
-      describe('typing "R"', function() {
-        beforeEach(press('R'));
-        beforeEach(nextFrame);
-        beforeEach(updateComplete);
-        it('shows options that contain "R"', async function() {
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          expect(listbox?.children?.length).to.equal(1);
-          expect(listbox?.children?.at(0)?.name).to.equal('Red');
-        });
+      it('should NOT use checkbox role for options', async function() {
+        const snapshot = await a11ySnapshot();
+        expect(snapshot.children?.at(1)?.children?.filter(x => x.role === 'checkbox')?.length)
+            .to.equal(0);
       });
     });
 
-    describe('calling focus()', function() {
-      beforeEach(focus);
+    describe('Space', function() {
+      beforeEach(press(' '));
+      beforeEach(updateComplete);
+      it('expands the listbox', async function() {
+        expect(element.expanded).to.be.true;
+        expect(await a11ySnapshot()).to.axContainRole('listbox');
+      });
+    });
 
+    describe('ArrowDown', function() {
+      beforeEach(press('ArrowDown'));
       beforeEach(updateComplete);
+      it('expands the listbox', async function() {
+        expect(element.expanded).to.be.true;
+        expect(await a11ySnapshot()).to.axContainRole('listbox');
+      });
 
-      it('has a text input for typeahead', async function() {
-        const snapshot = await a11ySnapshot();
-        const [typeahead] = snapshot.children ?? [];
-        expect(typeahead).to.deep.equal({
-          role: 'combobox',
-          name: 'Options',
-          focused: true,
-          autocomplete: 'both',
-          haspopup: 'listbox',
-        });
+      it('focuses the placeholder', async function() {
+        expect(await a11ySnapshot()).to.have.axTreeFocusedNode.to.have.axName('placeholder');
       });
 
-      describe('typing "r"', function() {
-        beforeEach(press('r'));
+      describe('Shift+Tab', function() {
+        beforeEach(holdShift);
+        beforeEach(press('Tab'));
+        beforeEach(releaseShift);
         beforeEach(updateComplete);
 
-        it('only shows options that start with "r" or "R"', async function() {
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          expect(listbox?.children?.every(x => x.name.toLowerCase().startsWith('r'))).to.be.true;
+        it('hides the listbox', async function() {
+          expect(element.expanded).to.be.false;
+          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
         });
-      });
 
-      describe('setting filter to "*"', function() {
-        beforeEach(function() {
-          // @ts-expect-error: todo: add filter feature
-          element.filter = '*';
+        it('focuses the button', async function() {
+          expect(await a11ySnapshot())
+              .axTreeFocusedNode
+              .to.have.axRole('combobox');
         });
+      });
+
+      describe('Tab', function() {
+        beforeEach(press('Tab'));
+        beforeEach(nextFrame);
+        beforeEach(updateComplete);
+        // a little extra sleep to de-flake this test
+        beforeEach(nextFrame);
         beforeEach(updateComplete);
-        it('does not error', async function() {
+        it('closes', function() {
+          expect(element.expanded).to.be.false;
+        });
+        it('hides the listbox', async function() {
           const snapshot = await a11ySnapshot();
-          const [, , listbox] = snapshot.children ?? [];
-          expect(listbox?.children).to.not.be.ok;
+          const listbox = snapshot.children?.find(x => x.role === 'listbox');
+          expect(listbox).to.be.undefined;
         });
       });
 
-      describe('changing input value to "p"', function() {
-        beforeEach(press('p'));
+      describe('Escape', function() {
+        beforeEach(press('Escape'));
         beforeEach(updateComplete);
-
-        it('only shows listbox items starting with the letter p', async function() {
+        it('closes', function() {
+          expect(element.expanded).to.be.false;
+        });
+        it('hides the listbox', async function() {
           const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          expect(listbox?.children?.length).to.equal(2);
-          expect(listbox?.children?.at(0)?.name).to.equal('Purple');
-          expect(listbox?.children?.at(1)?.name).to.equal('Pink');
+          expect(snapshot.children?.at(1)).to.be.undefined;
         });
-
-        it('maintains focus on the input', async function() {
+        it('focuses the button', async function() {
           const snapshot = await a11ySnapshot();
-          const focused = snapshot.children?.find(x => x.focused);
+          const focused = querySnapshot(snapshot, { focused: true });
           expect(focused?.role).to.equal('combobox');
         });
+      });
+
+      describe('Ctrl-A', function() {
+        beforeEach(holdCtrl);
+        beforeEach(press('A'));
+        beforeEach(releaseCtrl);
+        beforeEach(updateComplete);
+        it('selects all', function() {
+          expect(element.selected.length).to.equal(items.length);
+        });
+        it('remains expanded', async function() {
+          expect(element.expanded).to.be.true;
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
+        });
 
-        describe('pressing Backspace so input value is ""', function() {
-          beforeEach(press('Backspace'));
+        describe('Ctrl-A', function() {
+          beforeEach(holdCtrl);
+          beforeEach(press('A'));
+          beforeEach(releaseCtrl);
           beforeEach(updateComplete);
-
-          it('all options are visible', async function() {
-            const snapshot = await a11ySnapshot();
-            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-            expect(listbox?.children?.length).to.equal(8);
-            expect(listbox?.children?.at(0)?.name).to.equal('Blue');
-            expect(listbox?.children?.at(1)?.name).to.equal('Green');
-            expect(listbox?.children?.at(2)?.name).to.equal('Magenta');
-            expect(listbox?.children?.at(3)?.name).to.equal('Orange');
-            expect(listbox?.children?.at(4)?.name).to.equal('Purple');
-            expect(listbox?.children?.at(5)?.name).to.equal('Pink');
-            expect(listbox?.children?.at(6)?.name).to.equal('Red');
-            expect(listbox?.children?.at(7)?.name).to.equal('Yellow');
+          it('deselects all', function() {
+            expect(element.selected.length).to.equal(0);
+          });
+          it('remains expanded', async function() {
+            expect(element.expanded).to.be.true;
+            expect(await a11ySnapshot()).to.axContainRole('listbox');
           });
         });
       });
 
-      describe('pressing ArrowDown', function() {
+      describe('Space', function() {
+        it('does not select anything', function() {
+          expect(element.selected).to.deep.equal([]);
+        });
+      });
+
+      describe('ArrowDown', function() {
         beforeEach(press('ArrowDown'));
-        beforeEach(nextFrame);
         beforeEach(updateComplete);
-        it('expands', async function() {
-          expect(element.expanded).to.be.true;
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          expect(listbox).to.be.ok;
-        });
-        it('selects the first item', async function() {
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          const focused = listbox?.children?.find(x => x.focused);
-          expect(focused).to.not.be.ok;
-          const selected = listbox?.children?.find(x => x.selected);
-          expect(selected).to.be.ok;
-          expect(listbox?.children?.at(0)).to.equal(selected);
-        });
-        it('does not move keyboard focus', async function() {
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          const focused = listbox?.children?.find(x => x.focused);
-          expect(focused).to.not.be.ok;
-        });
-        describe('then pressing ArrowDown', function() {
-          beforeEach(press('ArrowDown'));
+        describe('Space', function() {
+          beforeEach(press(' '));
           beforeEach(updateComplete);
-          it('focuses the first option', async function() {
-            const snapshot = await a11ySnapshot();
-            const listbox = snapshot.children?.find(x => x.role === 'listbox');
-            const focused = listbox?.children?.find(x => x.focused);
-            expect(focused).to.be.ok;
-            expect(listbox?.children?.indexOf(focused!)).to.equal(0);
+
+          it('selects option 1', function() {
+            // because the placeholder was focused
+            expect(getSelectedOptionValues(element)).to.deep.equal(['1']);
           });
-          describe('then pressing Enter', function() {
-            beforeEach(press('Enter'));
+
+          it('remains expanded', async function() {
+            expect(element.expanded).to.be.true;
+            expect(await a11ySnapshot()).to.axContainRole('listbox');
+          });
+
+          describe('ArrowDown', function() {
+            beforeEach(press('ArrowDown'));
             beforeEach(updateComplete);
-            it('selects the second option', function() {
-              expect(getValues(element)).to.deep.equal(['Green']);
-            });
-            it('sets typeahead input to second option value', async function() {
+
+            it('focuses option 2', async function() {
               const snapshot = await a11ySnapshot();
-              const [combobox] = snapshot.children ?? [];
-              expect(combobox?.value).to.equal('Green');
+              expect(snapshot).to.have.axQuery({
+                focused: true,
+                name: '2',
+              });
             });
-            it('focuses on toggle button', async function() {
-              const snapshot = await a11ySnapshot();
-              const focused = snapshot.children?.find(x => x.focused);
-              expect(focused?.role).to.equal('button');
-              expect(focused?.haspopup).to.equal('listbox');
+
+            describe('Enter', function() {
+              beforeEach(press('Enter'));
+              beforeEach(updateComplete);
+              it('adds option 2 to selection', function() {
+                expect(getSelectedOptionValues(element)).to.deep.equal([
+                  '1',
+                  '2',
+                ]);
+              });
+
+              it('remains expanded', async function() {
+                expect(element.expanded).to.be.true;
+                expect(await a11ySnapshot()).to.axContainRole('listbox');
+              });
             });
-            it('closes', async function() {
-              expect(element.expanded).to.be.false;
-              const snapshot = await a11ySnapshot();
-              const listbox = snapshot.children?.find(x => x.role === 'listbox');
-              expect(listbox).to.be.undefined;
+          });
+
+          describe('holding Shift', function() {
+            beforeEach(holdShift);
+            afterEach(releaseShift);
+            describe('ArrowDown', function() {
+              beforeEach(press('ArrowDown'));
+              beforeEach(nextFrame);
+              it('adds option 2 to selection', function() {
+                expect(getSelectedOptionValues(element)).to.deep.equal([
+                  '1',
+                  '2',
+                ]);
+              });
+              describe('Enter', function() {
+                beforeEach(press('Enter'));
+                beforeEach(updateComplete);
+                it('makes no change', function() {
+                  expect(getSelectedOptionValues(element)).to.deep.equal([
+                    '1',
+                    '2',
+                  ]);
+                });
+                beforeEach(updateComplete);
+                describe('ArrowDown', function() {
+                  beforeEach(press('ArrowDown'));
+                  beforeEach(updateComplete);
+                  it('adds option 3 to the selected list', function() {
+                    expect(getSelectedOptionValues(element)).to.deep.equal([
+                      '1',
+                      '2',
+                      '3',
+                    ]);
+                  });
+                  describe('ArrowUp', function() {
+                    beforeEach(press('Enter'));
+                    beforeEach(updateComplete);
+                    it('makes no change to selection', function() {
+                      expect(getSelectedOptionValues(element)).to.deep.equal([
+                        '1',
+                        '2',
+                        '3',
+                      ]);
+                    });
+                  });
+                });
+              });
+            });
+          });
+        });
+      });
+
+      describe('clicking the first item', function() {
+        beforeEach(() => clickElementAtCenter(items.at(0)!));
+        beforeEach(updateComplete);
+
+        it('selects option 1', function() {
+          // because the placeholder was focused
+          expect(getSelectedOptionValues(element)).to.deep.equal([
+            '1',
+          ]);
+        });
+
+        it('remains expanded', async function() {
+          expect(element.expanded).to.be.true;
+          expect(await a11ySnapshot()).to.axContainRole('listbox');
+        });
+
+        describe('holding Shift', function() {
+          beforeEach(holdShift);
+          afterEach(releaseShift);
+          describe('clicking the 7th item', function() {
+            beforeEach(() => clickElementAtCenter(items.at(6)!));
+            it('remains expanded', async function() {
+              expect(element.expanded).to.be.true;
+              expect(await a11ySnapshot()).to.axContainRole('listbox');
+            });
+
+            it('selects items 1-7', function() {
+              expect(getSelectedOptionValues(element)).to.deep.equal([
+                '1',
+                '2',
+                '3',
+                '4',
+                '5',
+                '6',
+                '7',
+              ]);
+            });
+
+            describe('releasing Shift', function() {
+              beforeEach(releaseShift);
+              describe('clicking 6th item', function() {
+                beforeEach(() => clickElementAtCenter(items.at(5)!));
+                it('deselects item 6', function() {
+                  expect(getSelectedOptionValues(element)).to.not.contain('6');
+                });
+                describe('holding Shift', function() {
+                  beforeEach(holdShift);
+                  describe('clicking 2nd item', function() {
+                    beforeEach(() => clickElementAtCenter(items.at(1)!));
+                    it('deselects items 2-6', function() {
+                      expect(getSelectedOptionValues(element)).to.deep.equal(['1', '7']);
+                    });
+                  });
+                });
+              });
             });
           });
         });
       });
     });
   });
+});
+
+describe('<pf-select variant="typeahead">', function() {
+  let element: PfSelect;
+  const label = 'label';
+  const placeholder = 'placeholder';
+  const updateComplete = () => element.updateComplete;
+  const focus = () => element.focus();
+
+  beforeEach(async function() {
+    element = await createFixture<PfSelect>(html`
+      <pf-select variant="typeahead">
+        <pf-option>Blue</pf-option>
+        <pf-option>Green</pf-option>
+        <pf-option>Magenta</pf-option>
+        <pf-option>Orange</pf-option>
+        <pf-option>Purple</pf-option>
+        <pf-option>Periwinkle</pf-option>
+        <pf-option>Pink</pf-option>
+        <pf-option>Red</pf-option>
+        <pf-option>Yellow</pf-option>
+      </pf-select>`);
+  });
+
+  beforeEach(nextFrame);
+
+  it('does not have redundant role', async function() {
+    expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+  });
+
+  it('labels the combobox input with the first option', async function() {
+    expect(await a11ySnapshot()).to.axContainQuery({
+      role: 'combobox',
+      name: 'Blue',
+    });
+  });
+
+  describe('with an `accessible-label` attribute', function() {
+    beforeEach(function() {
+      element.setAttribute('accessible-label', label);
+    });
+    beforeEach(nextFrame);
+
+    it('passes aXe audit', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('does not have redundant role', async function() {
+      expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+    });
+
+    it('labels the combobox with the label', async function() {
+      expect(await a11ySnapshot()).to.axContainQuery({
+        role: 'combobox',
+        name: label,
+      });
+    });
+
+    it('labels the toggle button with the label', async function() {
+      expect(await a11ySnapshot()).to.axContainQuery({
+        role: 'button',
+        name: label,
+      });
+    });
+
+    describe('show()', function() {
+      beforeEach(() => element.show());
+      it('labels the listbox with the placeholder attribute', async function() {
+        expect(await a11ySnapshot()).to.axContainQuery({
+          role: 'listbox',
+          name: 'label',
+        });
+      });
+    });
+  });
+
+  describe('with a `placeholder` attribute', function() {
+    beforeEach(function() {
+      element.setAttribute('placeholder', placeholder);
+    });
+    beforeEach(nextFrame);
+
+    it('passes aXe audit', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('lists the placeholder as first among the options', function() {
+      expect(element.options.at(0)).to.have.text(placeholder);
+    });
+
+    it('does not have redundant role', async function() {
+      expect(element.shadowRoot?.firstElementChild).to.not.contain('[role="button"]');
+    });
 
-  // try again when we implement activedescendant
-  describe.skip('variant="typeaheadmulti"', function() {
+    it('labels the combobox with the placeholder', async function() {
+      expect(await a11ySnapshot()).to.axContainQuery({
+        role: 'combobox',
+        name: placeholder,
+      });
+    });
+
+    it('labels the toggle button with the placeholder', async function() {
+      expect(await a11ySnapshot()).to.axContainQuery({
+        role: 'button',
+        name: placeholder,
+      });
+    });
+
+    describe('show()', function() {
+      beforeEach(() => element.show());
+      it('labels the listbox with the placeholder attribute', async function() {
+        expect(await a11ySnapshot()).to.axContainQuery({
+          role: 'listbox',
+          name: 'placeholder',
+        });
+      });
+    });
+  });
+
+  describe('clicking the toggle button', function() {
     beforeEach(async function() {
-      element = await createFixture<PfSelect>(html`
-        <pf-select variant="typeaheadmulti">
-          <pf-option value="Amethyst">Amethyst</pf-option>
-          <pf-option value="Beryl">Beryl</pf-option>
-          <pf-option value="Chalcedony">Chalcedony</pf-option>
-          <pf-option value="Diamond">Diamond</pf-option>
-          <pf-option value="Emerald">Emerald</pf-option>
-          <pf-option value="Fool's Gold">Fool's Gold</pf-option>
-          <pf-option value="Garnet">Garnet</pf-option>
-          <pf-option value="Halite">Halite</pf-option>
-          <pf-option value="Iris">Iris</pf-option>
-        </pf-select>`);
+      await clickElementAtOffset(element, [-10, -10]);
+    });
+
+    it('shows the listbox', async function() {
+      expect(element.expanded).to.be.true;
+      expect(await a11ySnapshot()).to.axContainRole('listbox');
+    });
+
+    it('focuses the toggle button', async function() {
+      expect(element.expanded).to.be.true;
+      expect(await a11ySnapshot()).to.axContainQuery({
+        focused: true,
+        role: 'button',
+      });
+    });
+  });
+
+  describe('clicking the combobox input', function() {
+    beforeEach(async function() {
+      await clickElementAtOffset(element, [10, 10]);
+    });
+
+    it('shows the listbox', async function() {
+      expect(element.expanded).to.be.true;
+      expect(await a11ySnapshot()).to.axContainRole('listbox');
+    });
+
+    it('focuses the combobox', async function() {
+      expect(element.expanded).to.be.true;
+      expect(await a11ySnapshot()).to.axContainQuery({
+        focused: true,
+        role: 'combobox',
+      });
+    });
+
+    describe('clicking option 1', function() {
+      beforeEach(async function() {
+        await clickItemAtIndex(element, 0);
+      });
+
+      it('selects option 1', function() {
+        expect(getSelectedOptionValues(element)).to.deep.equal([
+          'Blue',
+        ]);
+      });
+
+      it('closes the listbox', async function() {
+        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+      });
     });
 
-    describe('calling focus()', function() {
+    describe('clicking option 2', function() {
+      beforeEach(async function() {
+        await clickItemAtIndex(element, 1);
+      });
+
+      it('selects option 1', function() {
+        expect(getSelectedOptionValues(element)).to.deep.equal([
+          'Green',
+        ]);
+      });
+
+      it('closes the listbox', async function() {
+        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+      });
+    });
+  });
+
+  describe('focus()', function() {
+    beforeEach(focus);
+    beforeEach(updateComplete);
+
+    it('focuses the combobox input', async function() {
+      expect(await a11ySnapshot()).axTreeFocusedNode
+          .to.have.axRole('combobox')
+          .and
+          .to.have.axName('Blue');
+    });
+
+    describe('"r"', function() {
+      beforeEach(press('r'));
+      beforeEach(updateComplete);
+
+      it('only shows options that start with "r" or "R"', async function() {
+        expect(getVisibleOptionValues(element)).to.deep.equal([
+          'Red',
+        ]);
+      });
+    });
+
+    describe('Space', function() {
       beforeEach(function() {
-        element.focus();
+        document.body.style.height = '8000px';
+      });
+      afterEach(function() {
+        document.body.style.height = 'initial';
       });
+
+      beforeEach(press(' '));
       beforeEach(updateComplete);
+      beforeEach(() => aTimeout(300));
 
-      it('focuses the typeahead input', async function() {
-        const snapshot = await a11ySnapshot();
-        const [input] = snapshot.children ?? [];
-        expect(input.focused).to.be.true;
-        expect(input.role).to.equal('combobox');
+      it('does not expand the listbox', async function() {
+        expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+      });
+
+      it('does not scroll the screen', function() {
+        expect(window.scrollY).to.equal(0);
+      });
+    });
+
+    describe('ArrowDown', function() {
+      beforeEach(press('ArrowDown'));
+      beforeEach(updateComplete);
+      beforeEach(() => aTimeout(200));
+
+      it('shows the listbox', async function() {
+        expect(element.expanded).to.be.true;
+        expect(await a11ySnapshot()).to.axContainRole('listbox');
+      });
+
+      it('focuses option 1', function() {
+        expect(getActiveOption(element)).to.have.value('Blue');
       });
 
-      describe('pressing ArrowDown', function() {
+      it('does not move keyboard focus', async function() {
+        expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+      });
+
+      describe('ArrowDown', function() {
         beforeEach(press('ArrowDown'));
         beforeEach(updateComplete);
 
-        it('expands', function() {
-          expect(element.expanded).to.be.true;
+        it('focuses option 2', function() {
+          expect(getActiveOption(element)).to.have.text('Green');
         });
 
-        it('shows the listbox', async function() {
-          const snapshot = await a11ySnapshot();
-          expect(snapshot.children?.find(x => x.role === 'listbox')).to.be.ok;
-        });
+        describe('Enter', function() {
+          beforeEach(press('Enter'));
+          beforeEach(updateComplete);
 
-        it('focuses the first option', async function() {
-          const snapshot = await a11ySnapshot();
-          const listbox = snapshot.children?.find(x => x.role === 'listbox');
-          expect(listbox?.children?.find(x => x.focused)?.name).to.equal('Amethyst');
-        });
+          it('selects option 2', function() {
+            expect(getSelectedOptionValues(element)).to.deep.equal([
+              'Green',
+            ]);
+          });
 
-        describe('then pressing Shift+Tab', function() {
-          beforeEach(shiftHold);
-          beforeEach(press('Tab'));
-          beforeEach(shiftRelease);
-          beforeEach(updateComplete);
-          it('closes', function() {
-            expect(element.expanded).to.be.false;
+          it('sets typeahead input to second option value', async function() {
+            expect(await a11ySnapshot())
+                .axTreeFocusedNode
+                .to.have.axProperty('value', 'Green');
           });
 
-          it('hides the listbox', async function() {
-            const snapshot = await a11ySnapshot();
-            expect(snapshot.children?.find(x => x.role === 'listbox')).to.be.undefined;
+          it('retains focus on combobox input', async function() {
+            expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
           });
 
-          it('focuses the toggle button', async function() {
-            const snapshot = await a11ySnapshot();
-            const focused = snapshot?.children?.find(x => x.focused);
-            expect(focused?.role).to.equal('button');
-            expect(focused?.haspopup).to.equal('listbox');
+          it('hides the listbox', async function() {
+            expect(await a11ySnapshot()).to.not.axContainRole('listbox');
           });
+        });
+      });
 
-          describe('then pressing Shift+Tab', function() {
-            beforeEach(shiftHold);
-            beforeEach(press('Tab'));
-            beforeEach(shiftRelease);
-            beforeEach(updateComplete);
-            it('focuses the combobox input', async function() {
-              const snapshot = await a11ySnapshot();
-              const focused = snapshot?.children?.find(x => x.focused);
-              expect(focused?.role).to.equal('combobox');
-              expect(focused?.haspopup).to.equal('listbox');
-            });
+      describe('ArrowUp', function() {
+        beforeEach(press('ArrowUp'));
+        beforeEach(updateComplete);
+        it('focuses the last item', async function() {
+          expect(getActiveOption(element)).to.have.value('Yellow');
+        });
+      });
+    });
+
+    describe('"p"', function() {
+      beforeEach(press('p'));
+      beforeEach(updateComplete);
+
+      it('shows the listbox and maintains focus', async function() {
+        expect(await a11ySnapshot())
+            .to.axContainRole('listbox')
+            .and.axTreeFocusedNode
+            .to.have.axRole('combobox')
+            .and.to.have.axProperty('value', 'p');
+      });
+
+      it('only shows listbox items starting with the letter p', function() {
+        expect(getVisibleOptionValues(element)).to.deep.equal([
+          'Purple',
+          'Periwinkle',
+          'Pink',
+        ]);
+      });
+
+      describe('Backspace', function() {
+        beforeEach(press('Backspace'));
+        beforeEach(updateComplete);
+
+        it('shows the listbox and maintains focus', async function() {
+          expect(await a11ySnapshot())
+              .to.axContainRole('listbox')
+              .and.axTreeFocusedNode
+              .to.have.axRole('combobox')
+              .and.to.not.have.axProperty('value', 'p');
+        });
+
+        it('all options are visible', async function() {
+          expect(getVisibleOptionValues(element)).to.deep.equal([
+            'Blue',
+            'Green',
+            'Magenta',
+            'Orange',
+            'Purple',
+            'Periwinkle',
+            'Pink',
+            'Red',
+            'Yellow',
+          ]);
+        });
+      });
+
+      describe('"u"', function() {
+        let lastInputEvent: Event | undefined;
+        beforeEach(function() {
+          element.addEventListener('input', function(event) {
+            lastInputEvent = event;
           });
         });
+        afterEach(function() {
+          lastInputEvent = undefined;
+        });
+        beforeEach(press('u'));
+        beforeEach(updateComplete);
+
+        it('only shows the option "Purple"', function() {
+          expect(getVisibleOptionValues(element)).to.deep.equal([
+            'Purple',
+          ]);
+        });
 
-        describe('then pressing ArrowDown', function() {
+        describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
           beforeEach(updateComplete);
-          describe('then pressing Enter', function() {
+
+          it('focuses the option "Purple"', function() {
+            expect(getActiveOption(element)).to.have.text('Purple');
+          });
+
+          describe('Enter', function() {
             beforeEach(press('Enter'));
             beforeEach(updateComplete);
-            it('selects the second option', function() {
-              expect(getValues(element)).to.deep.equal(['Beryl']);
-            });
-            it('focuses on second option', async function() {
-              const snapshot = await a11ySnapshot();
-              const listbox = snapshot.children?.find(x => x.role === 'listbox');
-              expect(listbox?.children?.find(x => x.focused)?.name).to.equal('Beryl');
+
+            it('selects the option "Purple"', function() {
+              expect(getSelectedOptionValues(element)).to.deep.equal([
+                'Purple',
+              ]);
             });
-            it('remains expanded', async function() {
-              expect(element.expanded).to.be.true;
-              const snapshot = await a11ySnapshot();
-              const listbox = snapshot.children?.find(x => x.role === 'listbox');
-              expect(listbox).to.be.ok;
+
+            describe('Backspace (x5)', function() {
+              beforeEach(press('Backspace'));
+              beforeEach(press('Backspace'));
+              beforeEach(press('Backspace'));
+              beforeEach(press('Backspace'));
+              beforeEach(press('Backspace'));
+
+              it('shows the options starting with "P"', function() {
+                expect(getVisibleOptionValues(element)).to.deep.equal([
+                  'Purple',
+                  'Periwinkle',
+                  'Pink',
+                ]);
+              });
+
+              describe('Home', function() {
+                beforeEach(press('Home'));
+
+                it('retains focus on the option "Purple"', function() {
+                  expect(getActiveOption(element)).to.have.text('Purple');
+                });
+
+                it('moves cursor to start', function() {
+                  // WARNING: ties test to DOM structure
+                  const input = element.shadowRoot?.querySelector('input');
+                  expect(input?.selectionStart).to.equal(0);
+                });
+              });
+              describe('End', function() {
+                beforeEach(press('End'));
+
+                it('retains focus on the option "Purple"', function() {
+                  expect(getActiveOption(element)).to.have.text('Purple');
+                });
+
+                it('moves cursor to start', function() {
+                  // WARNING: ties test to DOM structure
+                  const input = element.shadowRoot?.querySelector('input');
+                  expect(input?.selectionStart).to.equal(1);
+                });
+              });
             });
-            it('shows 1 chip', async function() {
-              const snapshot = await a11ySnapshot();
-              const [, chip1close] = snapshot.children ?? [];
-              expect(chip1close?.role).to.equal('button');
-              expect(chip1close?.name).to.equal('Close');
-              expect(chip1close?.description).to.equal('Beryl');
+          });
+        });
+      });
+    });
+  });
+
+  describe.skip('setting filter to "*"', function() {
+    beforeEach(function() {
+      // @ts-expect-error: todo: add filter feature
+      element.filter = '*';
+    });
+    beforeEach(updateComplete);
+    it('does not error', async function() {
+      const snapshot = await a11ySnapshot();
+      const [, , listbox] = snapshot.children ?? [];
+      expect(listbox?.children).to.not.be.ok;
+    });
+  });
+
+  describe.skip('custom filtering', function() {
+    beforeEach(function() {
+      // @ts-expect-error: we intend to implement this in the next release
+      element.customFilter = option =>
+        // @ts-expect-error: TODO add filter feature
+        new RegExp(element.filter).test(option.value);
+    });
+
+    beforeEach(focus);
+
+    beforeEach(updateComplete);
+
+    describe('r', function() {
+      beforeEach(press('r'));
+      beforeEach(updateComplete);
+      it('shows options that contain "r"', async function() {
+        expect(getVisibleOptionValues(element)).to.deep.equal([
+          'Green',
+          'Orange',
+          'Purple',
+        ]);
+      });
+    });
+
+    describe('typing "R"', function() {
+      beforeEach(press('R'));
+      beforeEach(nextFrame);
+      beforeEach(updateComplete);
+      it('shows options that start with "r"', async function() {
+        expect(getVisibleOptionValues(element)).to.deep.equal([
+          'Red',
+        ]);
+      });
+    });
+  });
+});
+
+describe('<label for="select"><pf-select variant="typeahead">', function() {
+  let element: PfSelect;
+  beforeEach(async function() {
+    element = await createFixture<PfSelect>(html`
+      <pf-select variant="typeahead" id="select">
+        <pf-option value="1">1</pf-option>
+        <pf-option value="2">2</pf-option>
+        <pf-option value="3">3</pf-option>
+      </pf-select>
+      <label for="select">label1</label>
+      <label for="select">label2</label>
+      `);
+  });
+
+  it('passes aXe audit', async function() {
+    await expect(element).to.be.accessible();
+  });
+
+  it('labels the combobox with the label elements', async function() {
+    expect(await a11ySnapshot()).to.axContainQuery({
+      role: 'combobox',
+      name: 'label1label2',
+    });
+  });
+  describe('show()', function() {
+    beforeEach(() => element.show());
+    it('labels the listbox with the placeholder attribute', async function() {
+      expect(await a11ySnapshot()).to.axContainQuery({
+        role: 'listbox',
+        name: 'label1label2',
+      });
+    });
+  });
+});
+
+// try again when we implement activedescendant
+describe.skip('<pf-select variant="typeaheadmulti">', function() {
+  let element: PfSelect;
+  const updateComplete = () => element.updateComplete;
+  const focus = () => element.focus();
+  beforeEach(async function() {
+    element = await createFixture<PfSelect>(html`
+      <pf-select variant="typeaheadmulti">
+        <pf-option value="Amethyst">Amethyst</pf-option>
+        <pf-option value="Beryl">Beryl</pf-option>
+        <pf-option value="Chalcedony">Chalcedony</pf-option>
+        <pf-option value="Diamond">Diamond</pf-option>
+        <pf-option value="Emerald">Emerald</pf-option>
+        <pf-option value="Fool's Gold">Fool's Gold</pf-option>
+        <pf-option value="Garnet">Garnet</pf-option>
+        <pf-option value="Halite">Halite</pf-option>
+        <pf-option value="Iris">Iris</pf-option>
+      </pf-select>`);
+  });
+
+  describe('focus()', function() {
+    beforeEach(focus);
+    beforeEach(updateComplete);
+
+    it('focuses the typeahead input', async function() {
+      expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+    });
+
+    describe('ArrowDown', function() {
+      beforeEach(press('ArrowDown'));
+      beforeEach(updateComplete);
+
+      it('shows the listbox', async function() {
+        expect(element.expanded).to.be.true;
+        expect(await a11ySnapshot()).to.axContainRole('listbox');
+      });
+
+      it('focuses the first option', async function() {
+        expect(getActiveOption(element)).to.have.property('value', 'Amethyst');
+      });
+
+      describe('Shift+Tab', function() {
+        beforeEach(holdShift);
+        beforeEach(press('Tab'));
+        beforeEach(releaseShift);
+        beforeEach(updateComplete);
+        it('closes', function() {
+          expect(element.expanded).to.be.false;
+        });
+
+        it('hides the listbox', async function() {
+          expect(element.expanded).to.be.false;
+          expect(await a11ySnapshot()).to.not.axContainRole('listbox');
+        });
+
+        it('focuses the toggle button', async function() {
+          expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axRole('combobox');
+        });
+
+        describe('Shift+Tab', function() {
+          beforeEach(holdShift);
+          beforeEach(press('Tab'));
+          beforeEach(releaseShift);
+          beforeEach(updateComplete);
+          it('focuses the combobox input', async function() {
+            expect(await a11ySnapshot())
+                .axTreeFocusedNode
+                .to.have.axRole('combobox');
+          });
+        });
+      });
+
+      describe('ArrowDown', function() {
+        beforeEach(press('ArrowDown'));
+        beforeEach(updateComplete);
+        describe('Enter', function() {
+          beforeEach(press('Enter'));
+          beforeEach(updateComplete);
+          it('selects the second option', function() {
+            expect(getSelectedOptionValues(element)).to.deep.equal(['Beryl']);
+          });
+          it('focuses on second option', async function() {
+            expect(getActiveOption(element)).to.have.property('value', 'Beryl');
+          });
+          it('remains expanded', async function() {
+            expect(element.expanded).to.be.true;
+            expect(await a11ySnapshot()).to.axContainRole('listbox');
+          });
+          it('shows 1 chip', async function() {
+            expect(await a11ySnapshot())
+                .to.axContainQuery({
+                  role: 'button',
+                  name: 'Close',
+                  description: 'Beryl',
+                });
+          });
+          describe('ArrowUp', function() {
+            beforeEach(press('ArrowUp'));
+            beforeEach(updateComplete);
+            it('focuses the first option', async function() {
+              expect(getActiveOption(element)).to.equal('Amethyst');
+              expect(await a11ySnapshot())
+                  .axTreeFocusedNode.to.have.axName('Amethyst');
             });
-            describe('then pressing ArrowUp', function() {
-              beforeEach(press('ArrowUp'));
+            describe('Enter', function() {
+              beforeEach(press('Enter'));
               beforeEach(updateComplete);
-              it('focuses the first option', async function() {
-                const snapshot = await a11ySnapshot();
-                const listbox = snapshot.children?.find(x => x.role === 'listbox');
-                const focused = listbox?.children?.find(x => x.focused);
-                expect(focused?.name).to.equal('Amethyst');
+              it('adds second option to selected values', function() {
+                expect(getSelectedOptionValues(element)).to.deep.equal([
+                  'Amethyst',
+                  'Beryl',
+                ]);
               });
-              describe('then pressing Enter', function() {
-                beforeEach(press('Enter'));
+              it('accessible combo button label should be "2 items selected"', async function() {
+                expect(await a11ySnapshot())
+                    .axTreeFocusedNode
+                    .to.have.axRole('combobox')
+                    .and
+                    .to.have.axName('2 items selected');
+              });
+              it('shows 2 chips', async function() {
+                expect(await a11ySnapshot())
+                    .to.axContainQuery({ role: 'button', name: 'Close', description: 'Amethyst' })
+                    .and
+                    .to.axContainQuery({ role: 'button', name: 'Close', description: 'Beryl' });
+              });
+              describe('Shift+Tab', function() {
+                beforeEach(holdShift);
+                beforeEach(press('Tab'));
+                beforeEach(releaseShift);
                 beforeEach(updateComplete);
-                it('adds second option to selected values', function() {
-                  expect(getValues(element)).to.deep.equal(['Amethyst', 'Beryl']);
-                });
-                it('accessible combo button label should be "2 items selected"', async function() {
-                  const snapshot = await a11ySnapshot();
-                  const button = snapshot.children?.find(x => x.role === 'combobox');
-                  expect(button?.name).to.equal('2 items selected');
+                it('focuses the combobox input', async function() {
+                  expect(await a11ySnapshot())
+                      .axTreeFocusedNode
+                      .to.have.axRole('combobox');
                 });
-                it('shows 2 chips', async function() {
-                  const snapshot = await a11ySnapshot();
-                  const [, chip1close, , chip2close] = snapshot.children ?? [];
-                  expect(chip1close?.role).to.equal('button');
-                  expect(chip1close?.name).to.equal('Close');
-                  expect(chip1close?.description).to.equal('Amethyst');
-                  expect(chip2close?.role).to.equal('button');
-                  expect(chip2close?.name).to.equal('Close');
-                  expect(chip2close?.description).to.equal('Beryl');
-                });
-                describe('then pressing Shift+Tab', function() {
-                  beforeEach(shiftHold);
+                describe('Shift+Tab', function() {
+                  beforeEach(holdShift);
                   beforeEach(press('Tab'));
-                  beforeEach(shiftRelease);
+                  beforeEach(releaseShift);
                   beforeEach(updateComplete);
-                  it('focuses the toggle button', async function() {
-                    const snapshot = await a11ySnapshot();
-                    const focused = snapshot.children?.find(x => x.focused);
-                    expect(focused?.role).to.equal('button');
-                    expect(focused?.haspopup).to.equal('listbox');
+                  it('focuses the combobox input', async function() {
+                    expect(await a11ySnapshot())
+                        .axTreeFocusedNode
+                        .to.have.axRole('combobox');
                   });
-                  describe('then pressing Shift+Tab', function() {
-                    beforeEach(shiftHold);
+                  describe('Shift+Tab', function() {
+                    beforeEach(holdShift);
                     beforeEach(press('Tab'));
-                    beforeEach(shiftRelease);
+                    beforeEach(releaseShift);
                     beforeEach(updateComplete);
-                    it('focuses the combobox input', async function() {
-                      const snapshot = await a11ySnapshot();
-                      const focused = snapshot.children?.find(x => x.focused);
-                      expect(focused?.role).to.equal('combobox');
+                    it('focuses the last chip\'s close button', async function() {
+                      expect(await a11ySnapshot())
+                          .axTreeFocusedNode
+                          .to.have.axRole('button')
+                          .and
+                          .to.have.axName('Close')
+                          .and
+                          .to.have.axDescription('Beryl');
                     });
-                    describe('then pressing Shift+Tab', function() {
-                      beforeEach(shiftHold);
-                      beforeEach(press('Tab'));
-                      beforeEach(shiftRelease);
+                    describe('Space', function() {
+                      beforeEach(updateComplete);
+                      beforeEach(press(' '));
+                      beforeEach(updateComplete);
                       beforeEach(updateComplete);
-                      it('focuses the last chip\'s close button', async function() {
-                        const snapshot = await a11ySnapshot();
-                        const focused = snapshot.children?.find(x => x.focused);
-                        expect(focused?.role).to.equal('button');
-                        expect(focused?.name).to.equal('Close');
-                        expect(focused?.description).to.equal('Beryl');
+                      it('removes the second chip', async function() {
+                        expect(await a11ySnapshot()).to.not.have.axDescription('Beryl');
                       });
-                      describe('then pressing Space', function() {
-                        beforeEach(updateComplete);
-                        beforeEach(press(' '));
-                        beforeEach(updateComplete);
+                      it('removes the second option from the selected values', function() {
+                        expect(getSelectedOptionValues(element)).to.deep.equal([
+                          'Amethyst',
+                        ]);
+                      });
+                      it('focuses the combobox', async function() {
+                        expect(await a11ySnapshot())
+                            .axTreeFocusedNode
+                            .to.have.axRole('combobox');
+                      });
+                      describe('Shift+Tab', function() {
+                        beforeEach(holdShift);
+                        beforeEach(press('Tab'));
+                        beforeEach(releaseShift);
                         beforeEach(updateComplete);
-                        it('removes the second chip', async function() {
-                          const snapshot = await a11ySnapshot();
-                          const [, chip1close, ...rest] = snapshot.children ?? [];
-                          expect(chip1close?.role).to.equal('button');
-                          expect(chip1close?.name).to.equal('Close');
-                          expect(chip1close?.description).to.equal('Amethyst');
-                          expect(rest.filter(x => 'description' in x)?.length).to.equal(0);
-                        });
-                        it('removes the second option from the selected values', function() {
-                          expect(getValues(element)).to.deep.equal(['Amethyst']);
-                        });
-                        it('focuses the combobox', async function() {
-                          const snapshot = await a11ySnapshot();
-                          const focused = snapshot.children?.find(x => x.focused);
-                          expect(focused?.role).to.equal('combobox');
+                        it('focuses the first chip', async function() {
+                          expect(await a11ySnapshot())
+                              .axTreeFocusedNode
+                              .to.have.axRole('combobox')
+                              .and
+                              .to.have.axDescription('Amethyst');
                         });
-                        describe('then pressing Shift+Tab', function() {
-                          beforeEach(shiftHold);
-                          beforeEach(press('Tab'));
-                          beforeEach(shiftRelease);
+                        describe('Space', function() {
+                          beforeEach(press(' '));
                           beforeEach(updateComplete);
-                          it('focuses the first chip', async function() {
-                            const snapshot = await a11ySnapshot();
-                            const focused = snapshot.children?.find(x => x.focused);
-                            expect(focused?.role).to.equal('button');
-                            expect(focused?.description).to.equal('Amethyst');
+                          it('removes all chips', async function() {
+                            expect(await a11ySnapshot()).to.not.axContainRole('button');
                           });
-                          describe('then pressing Space', function() {
-                            beforeEach(press(' '));
-                            beforeEach(updateComplete);
-                            it('removes all chips', async function() {
-                              const snapshot = await a11ySnapshot();
-                              expect(snapshot.children?.find(x => x.role === 'button' && x.name === 'Close'))
-                                  .to.be.undefined;
-                            });
-                            it('focuses the typeahead input', async function() {
-                              const snapshot = await a11ySnapshot();
-                              const focused = snapshot.children?.find(x => x.focused);
-                              expect(focused?.role).to.equal('combobox');
-                            });
+                          it('focuses the combobox', async function() {
+                            expect(await a11ySnapshot())
+                                .axTreeFocusedNode
+                                .to.have.axRole('combobox');
                           });
                         });
                       });
diff --git a/elements/pf-tabs/pf-tab.ts b/elements/pf-tabs/pf-tab.ts
index 4adcfb4047..780027ee0b 100644
--- a/elements/pf-tabs/pf-tab.ts
+++ b/elements/pf-tabs/pf-tab.ts
@@ -127,7 +127,8 @@ export class PfTab extends LitElement {
   #onKeydown(event: KeyboardEvent) {
     if (!this.disabled) {
       switch (event.key) {
-        case 'Enter': this.#activate();
+        case 'Enter':
+          this.#activate();
       }
     }
   }
@@ -138,8 +139,8 @@ export class PfTab extends LitElement {
     }
   }
 
-  #activate() {
-    return this.dispatchEvent(new TabExpandEvent(this));
+  async #activate() {
+    this.dispatchEvent(new TabExpandEvent(this));
   }
 
   @observes('active')
diff --git a/elements/pf-tabs/pf-tabs.ts b/elements/pf-tabs/pf-tabs.ts
index 8f406838f4..df189fddc5 100644
--- a/elements/pf-tabs/pf-tabs.ts
+++ b/elements/pf-tabs/pf-tabs.ts
@@ -106,10 +106,25 @@ export class PfTabs extends LitElement {
    */
   @property({ reflect: true, type: Boolean }) manual = false;
 
-  /**
-   * The index of the active tab
-   */
-  @property({ attribute: 'active-index', reflect: true, type: Number }) activeIndex = -1;
+  #activeIndex = -1;
+
+  /** The index of the active tab */
+  @property({ attribute: 'active-index', reflect: true, type: Number })
+  get activeIndex() {
+    return this.#activeIndex;
+  }
+
+  set activeIndex(v: number) {
+    this.#tabindex.atFocusedItemIndex = v;
+    this.#activeIndex = v;
+    this.activeTab = this.tabs[v];
+    for (const tab of this.tabs) {
+      if (!this.activeTab?.disabled) {
+        tab.active = tab === this.activeTab;
+      }
+      this.#tabs.panelFor(tab)?.toggleAttribute('hidden', !tab.active);
+    }
+  }
 
   @property({ attribute: false }) activeTab?: PfTab;
 
@@ -135,8 +150,8 @@ export class PfTabs extends LitElement {
     isActiveTab: x => x.active,
   });
 
-  #tabindex = new RovingTabindexController(this, {
-    getHTMLElement: () => this.shadowRoot?.getElementById('tabs') ?? null,
+  #tabindex = RovingTabindexController.of(this, {
+    getItemsContainer: () => this.tabsContainer ?? null,
     getItems: () => this.tabs ?? [],
   });
 
@@ -146,6 +161,7 @@ export class PfTabs extends LitElement {
     super.connectedCallback();
     this.addEventListener('expand', this.#onExpand);
     this.id ||= getRandomId(this.localName);
+    this.activeIndex = this.#tabindex.atFocusedItemIndex;
   }
 
   protected override async getUpdateComplete(): Promise<boolean> {
@@ -157,13 +173,9 @@ export class PfTabs extends LitElement {
     return here && ps.every(x => !!x);
   }
 
-  override willUpdate(changed: PropertyValues<this>): void {
-    if (changed.has('activeIndex')) {
-      this.select(this.activeIndex);
-    } else if (changed.has('activeTab') && this.activeTab) {
-      this.select(this.activeTab);
-    } else {
-      this.#updateActive();
+  protected override willUpdate(): void {
+    if (!this.manual && this.activeIndex !== this.#tabindex.atFocusedItemIndex) {
+      this.activeIndex = this.#tabindex.atFocusedItemIndex;
     }
     this.#overflow.update();
     this.ctx = this.#ctx;
@@ -174,6 +186,8 @@ export class PfTabs extends LitElement {
     if (activeTab?.disabled) {
       this.#logger.warn('Active tab is disabled. Setting to first focusable tab');
       this.activeIndex = 0;
+    } if (activeTab) {
+      this.activeIndex = this.tabs.indexOf(activeTab);
     }
   }
 
@@ -231,30 +245,12 @@ export class PfTabs extends LitElement {
     }
   }
 
-  #updateActive({ force = false } = {}) {
-    if (!this.#tabindex.activeItem?.disabled) {
-      this.tabs?.forEach((tab, i) => {
-        if (force || !this.manual) {
-          const active = tab === this.#tabindex.activeItem;
-          tab.active = active;
-          if (active) {
-            this.activeIndex = i;
-            this.activeTab = tab;
-          }
-        }
-        this.#tabs.panelFor(tab)?.toggleAttribute('hidden', !tab.active);
-      });
-    }
-  }
-
-  select(option: PfTab | number): void {
-    if (typeof option === 'number') {
-      const item = this.tabs[option];
-      this.#tabindex.setActiveItem(item);
+  select(tab: PfTab | number): void {
+    if (typeof tab === 'number') {
+      this.activeIndex = tab;
     } else {
-      this.#tabindex.setActiveItem(option);
+      this.activeIndex = this.tabs.indexOf(tab);
     }
-    this.#updateActive({ force: true });
   }
 }
 
diff --git a/package-lock.json b/package-lock.json
index b7cc7f6995..4121c03c19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5597,9 +5597,9 @@
       "peer": true
     },
     "node_modules/@web/test-runner": {
-      "version": "0.18.2",
-      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.18.2.tgz",
-      "integrity": "sha512-jA+957ic31aG/f1mr1b+HYzf/uTu4QsvFhyVgTKi2s5YQYGBbtfzx9PnYi47MVC9K9OHRbW8cq2Urds9qwSU3w==",
+      "version": "0.18.3",
+      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.18.3.tgz",
+      "integrity": "sha512-QkVK8Qguw3Zhyu8SYR7F4VdcjyXBeJNr8W8L++s4zO/Ok7DR/Wu7+rLswn3H7OH3xYoCHRmwteehcFejefz6ew==",
       "peer": true,
       "dependencies": {
         "@web/browser-logs": "^0.4.0",
@@ -17927,7 +17927,7 @@
         "@web/dev-server-esbuild": "^1.0.2",
         "@web/dev-server-import-maps": "^0.2.0",
         "@web/dev-server-rollup": "^0.6.1",
-        "@web/test-runner": "^0.18.1",
+        "@web/test-runner": "^0.18.3",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-junit-reporter": "^0.7.1",
         "@web/test-runner-playwright": "^0.11.0",
diff --git a/package.json b/package.json
index bb3e9be319..3ed40f1953 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "leftover-check": "bash scripts/leftover-check.sh",
     "⚙️--UTIL": "❓ Manages the repo",
     "postinstall": "wireit",
-    "clean": "git clean -dfx -e node_modules -e .husky -e .wireit",
+    "clean": "git clean -dfx -e node_modules -e .husky",
     "nuke": "git clean -dfx",
     "lint": "eslint",
     "patch": "patch-package",
diff --git a/tools/pfe-tools/package.json b/tools/pfe-tools/package.json
index 487b8b3d04..c0098d6516 100644
--- a/tools/pfe-tools/package.json
+++ b/tools/pfe-tools/package.json
@@ -77,7 +77,7 @@
     "@web/dev-server-esbuild": "^1.0.2",
     "@web/dev-server-import-maps": "^0.2.0",
     "@web/dev-server-rollup": "^0.6.1",
-    "@web/test-runner": "^0.18.1",
+    "@web/test-runner": "^0.18.3",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-junit-reporter": "^0.7.1",
     "@web/test-runner-playwright": "^0.11.0",
diff --git a/tools/pfe-tools/test/a11y-snapshot.ts b/tools/pfe-tools/test/a11y-snapshot.ts
index 7ffbb2df56..9dd650dd43 100644
--- a/tools/pfe-tools/test/a11y-snapshot.ts
+++ b/tools/pfe-tools/test/a11y-snapshot.ts
@@ -1,5 +1,12 @@
+import { chai } from '@open-wc/testing';
 import { a11ySnapshot as snap } from '@web/test-runner-commands';
 
+const {
+  Assertion,
+  AssertionError,
+  util,
+} = chai;
+
 export interface A11yTreeSnapshot {
   name: string;
   role: string;
@@ -34,21 +41,30 @@ export async function a11ySnapshot(
   return snapshot;
 }
 
-type SnapshotQuery = Partial<Record<keyof A11yTreeSnapshot, unknown>>;
+type SnapshotQuery = Partial<Record<keyof A11yTreeSnapshot, string | boolean | number | RegExp>>;
 
 function matches(snapshot: A11yTreeSnapshot, query: SnapshotQuery) {
   return Object.entries(query).every(([key, value]) =>
-    JSON.stringify(snapshot[key as keyof typeof snapshot]) === JSON.stringify(value));
+      value instanceof RegExp ? value.test(snapshot[key as keyof typeof snapshot] as string)
+    : JSON.stringify(snapshot[key as keyof typeof snapshot]) === JSON.stringify(value));
 }
 
-function doQuery(snapshot: A11yTreeSnapshot, query: SnapshotQuery): A11yTreeSnapshot | null {
+function doQuery(
+  snapshot: A11yTreeSnapshot,
+  query: SnapshotQuery,
+  items?: Set<A11yTreeSnapshot>,
+): A11yTreeSnapshot | null {
   if (matches(snapshot, query)) {
-    return snapshot;
+    if (items) {
+      items.add(snapshot);
+    } else {
+      return snapshot;
+    }
   } else if (!snapshot.children) {
     return null;
   } else {
     for (const kid of snapshot.children) {
-      const result = doQuery(kid, query);
+      const result = doQuery(kid, query, items);
       if (result) {
         return result;
       }
@@ -68,3 +84,295 @@ export function querySnapshot(
 ): A11yTreeSnapshot | null {
   return doQuery(snapshot, query);
 }
+
+/**
+ * Deeply search an accessibility tree snapshot for all objects matching your query
+ * @param snapshot the snapshot root to recurse through
+ * @param query object with properties matching the snapshot children you seek
+ */
+export function querySnapshotAll(
+  snapshot: A11yTreeSnapshot,
+  query: SnapshotQuery,
+): A11yTreeSnapshot[] {
+  const items = new Set<A11yTreeSnapshot>();
+  doQuery(snapshot, query, items);
+  return [...items];
+}
+
+/** @see https://w3c.github.io/aria/#ref-for-dom-ariamixin-ariaactivedescendantelement-1 */
+declare global {
+  interface ARIAMixin {
+    ariaActiveDescendantElement: Element | null;
+    ariaControlsElements: readonly Element[] | null;
+    ariaDescribedByElements: readonly Element[] | null;
+    ariaDetailsElements: readonly Element[] | null;
+    ariaErrorMessageElements: readonly Element[] | null;
+    ariaFlowToElements: readonly Element[] | null;
+    ariaLabelledByElements: readonly Element[] | null;
+    ariaOwnsElements: readonly Element[] | null;
+  }
+}
+
+const internalsMap = new WeakMap();
+const attachInternalsOrig = HTMLElement.prototype.attachInternals;
+HTMLElement.prototype.attachInternals = function() {
+  const internals = attachInternalsOrig.call(this);
+  internalsMap.set(this, internals);
+  return internals;
+};
+
+function getElementLabelText(element: Element): string {
+  if (element.ariaLabel) {
+    return element.ariaLabel;
+  } else {
+    const ariaLabelledByElements: Element[] = element.ariaLabelledByElements
+                        ?? internalsMap.get(element)?.ariaLabelledByElements;
+    return Array.from(ariaLabelledByElements ?? [], x =>
+      getElementLabelText(x) || x.textContent || '')
+        .join() || element.textContent || '';
+  }
+}
+
+function isSnapshot(obj: unknown): obj is A11yTreeSnapshot {
+  return obj instanceof Object && obj !== null && 'role' in obj;
+}
+
+function axTreeFocusOn(
+  this: Chai.AssertionPrototype,
+  element: Element,
+  msg?: string,
+) {
+  util.flag(this, 'message', msg);
+  const snapshot = this._obj as A11yTreeSnapshot;
+  if (!isSnapshot(snapshot)) {
+    throw new AssertionError(`axTreeFocusOn can only assert on A11yTreeSnapshots`,
+                             undefined,
+                             util.flag(this, 'ssfi'));
+  }
+  if (element == null || element === document.body) {
+    const focused = querySnapshot(snapshot, { focused: true });
+    this.assert(
+      focused === null,
+      `expected no element to have assistive technology focus`,
+      `expected any element to have assistive technology focus`,
+      null,
+      focused,
+    );
+  } else if (element instanceof Element) {
+    const focused = querySnapshot(snapshot, { focused: true });
+    const actualAXName = getElementLabelText(element).trim();
+    const [nodeSnapshotItem, ...others] = querySnapshotAll(snapshot, { name: actualAXName });
+    if (others.length) {
+      throw new AssertionError(
+        `More than one ax tree node has name "${actualAXName}". axTreeFocusOn cannot produce a definitive assertion`,
+        undefined,
+        util.flag(this, 'ssfi')
+      );
+    }
+    const focusedAXName = focused?.name;
+    const printable = util.inspect(element);
+    this.assert(
+      focusedAXName?.trim() === actualAXName,
+      `expected ${printable} to have assistive technology focus`,
+      `expected ${printable} to not have assistive technology focus`,
+      focused,
+      nodeSnapshotItem,
+    );
+  } else {
+    this.assert(
+      false,
+      `expected ${element} to be an Element`,
+      `expected ${element} to not have assistive technology focus`,
+      element
+    );
+  }
+}
+
+function axTreeFocusedNode(
+  this: Chai.AssertionPrototype,
+  msg?: string,
+) {
+  util.flag(this, 'message', msg);
+  const snapshot = util.flag(this, 'object') as A11yTreeSnapshot;
+  const focused = querySnapshot(snapshot, { focused: true });
+  this.assert(
+    focused != null,
+    `expected an element to have focus`,
+    `expected no element to have focus`,
+    null,
+    focused,
+  );
+  util.flag(this, 'object', focused);
+}
+
+function makeAxPropCallback(
+  propName: keyof A11yTreeSnapshot,
+  testName: `ax${string}`,
+) {
+  return function(
+    this: Chai.AssertionPrototype,
+    value: A11yTreeSnapshot[keyof A11yTreeSnapshot],
+    msg?: string,
+  ) {
+    util.flag(this, 'message', msg);
+    const snapshot = this._obj as A11yTreeSnapshot;
+    if (!isSnapshot(snapshot)) {
+      throw new AssertionError(`${testName} can only assert on A11yTreeSnapshots`,
+                               undefined,
+                               util.flag(this, 'ssfi'));
+    }
+    this.assert(snapshot[propName] === value,
+                `expected element to have ${propName} "${value}"`,
+                `expected element to not have ${propName} "${value}"`,
+                value,
+                snapshot[propName],
+    );
+  };
+}
+
+function axProperty(
+  this: Chai.AssertionPrototype,
+  propName: keyof A11yTreeSnapshot,
+  value: A11yTreeSnapshot[keyof A11yTreeSnapshot],
+  msg?: string
+) {
+  makeAxPropCallback(propName, 'axProperty').call(this, value, msg);
+}
+
+function axContainName(
+  this: Chai.AssertionPrototype,
+  name: string,
+  msg?: string
+) {
+  util.flag(this, 'message', msg);
+  const snapshot = this._obj as A11yTreeSnapshot;
+  if (!isSnapshot(snapshot)) {
+    throw new AssertionError(`axContainName can only assert on A11yTreeSnapshots`,
+                             undefined,
+                             util.flag(this, 'ssfi'));
+  }
+  const named = querySnapshot(snapshot, { name });
+  this.assert(
+    !!named,
+    `expected to find element with assistive technology name ${name}`,
+    `expected to not find element with assistive technology name ${name}`,
+    name,
+    named,
+  );
+}
+
+function axContainRole(
+  this: Chai.AssertionPrototype,
+  role: string,
+  msg?: string
+) {
+  util.flag(this, 'message', msg);
+  const snapshot = this._obj as A11yTreeSnapshot;
+  if (!isSnapshot(snapshot)) {
+    throw new AssertionError(`axRoleInTree can only assert on A11yTreeSnapshots`,
+                             undefined,
+                             util.flag(this, 'ssfi'));
+  }
+  const needle = querySnapshot(snapshot, { role });
+  this.assert(!!needle,
+              `expected to find element with role "${role}"`,
+              `expected to not find element with role "${role}"`,
+              role, needle);
+}
+
+function axContainQuery(
+  this: Chai.AssertionPrototype,
+  query: SnapshotQuery,
+  msg?: string
+) {
+  util.flag(this, 'message', msg);
+  const snapshot = this._obj as A11yTreeSnapshot;
+  if (!isSnapshot(snapshot)) {
+    throw new AssertionError(`axContainQuery can only assert on A11yTreeSnapshots`,
+                             undefined,
+                             util.flag(this, 'ssfi'));
+  }
+  const needle = querySnapshot(snapshot, query);
+  this.assert(!!needle,
+              `expected to find element matching query "${util.inspect(query)}"`,
+              `expected to not find element matching query "${util.inspect(query)}"`,
+              query, snapshot);
+}
+
+function axQuery(
+  this: Chai.AssertionPrototype,
+  query: SnapshotQuery,
+  msg?: string
+) {
+  util.flag(this, 'message', msg);
+  const snapshot = this._obj as A11yTreeSnapshot;
+  if (!isSnapshot(snapshot)) {
+    throw new AssertionError(`axQuery can only assert on A11yTreeSnapshots`,
+                             undefined,
+                             util.flag(this, 'ssfi'));
+  }
+  const needle = querySnapshot(snapshot, query);
+  this.assert(!!needle,
+              `expected to find element matching ${util.inspect(query)}`,
+              `expected to not find element with role ${util.inspect(query)}`,
+              query, needle);
+}
+
+chai.use(function() {
+  Assertion.addMethod('axContainName', axContainName);
+  Assertion.addMethod('axContainRole', axContainRole);
+  Assertion.addMethod('axContainQuery', axContainQuery);
+  Assertion.addMethod('axDescription', makeAxPropCallback('name', 'axDescription'));
+  Assertion.addMethod('axName', makeAxPropCallback('name', 'axName'));
+  Assertion.addMethod('axProperty', axProperty);
+  Assertion.addMethod('axQuery', axQuery);
+  Assertion.addMethod('axRole', makeAxPropCallback('role', 'axRole'));
+  Assertion.addMethod('axTreeFocusOn', axTreeFocusOn);
+  Assertion.addProperty('axTreeFocusedNode', axTreeFocusedNode);
+});
+
+
+declare global {
+  // That's just the way the chai boils
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Chai {
+    interface Assertion {
+      /** Assert that the a11ySnapshot contains a node with the given name */
+      axContainName(name: string, msg?: string): Assertion;
+      /** Assert that a given role exists in the ax tree */
+      axContainRole(role: string, msg?: string): Assertion;
+      /** Assert that a node matching a given query object exists in the ax tree */
+      axContainQuery(query: SnapshotQuery, msg?: string): Assertion;
+      /**
+       * Assert that an AX Tree node that matches the query object exists in the tre
+       */
+      axQuery(query: SnapshotQuery, msg?: string): Assertion;
+      /**
+       * Assert that the a11ySnapshot shows that a given element has focus.
+       * This assertion ultimately matches on the accessible name of the given element,
+       * so test authors must ensure that every element has a unique accessible name
+       * (i.e. aria-label or textContent).
+       */
+      axTreeFocusOn(element?: Element | null, msg?: string): Assertion;
+      /**
+       * Assert that the a11ySnapshot shows that a given element has focus.
+       * This assertion ultimately matches on the accessible name of the given element,
+       * so test authors must ensure that every element has a unique accessible name
+       * (i.e. aria-label or textContent).
+       */
+      axTreeFocusedNode: Assertion;
+      /** Assert that an AX Tree node has a given role */
+      axRole(role: string, msg?: string): Assertion;
+      /** Assert that an AX Tree node has a given name */
+      axName(role: string, msg?: string): Assertion;
+      /** Assert that an AX Tree node has a given description */
+      axDescription(description: string, msg?: string): Assertion;
+      /** Assert that an AX Tree node has a given property with a given value */
+      axProperty(
+        propName: keyof A11yTreeSnapshot,
+        value: A11yTreeSnapshot[keyof A11yTreeSnapshot],
+        msg?: string,
+      ): Assertion;
+    }
+  }
+}
diff --git a/tools/pfe-tools/test/config.ts b/tools/pfe-tools/test/config.ts
index 014e192853..fa128e7c90 100644
--- a/tools/pfe-tools/test/config.ts
+++ b/tools/pfe-tools/test/config.ts
@@ -11,7 +11,7 @@ import { getPfeConfig } from '../config.js';
 
 export interface PfeTestRunnerConfigOptions extends PfeDevServerConfigOptions {
   files?: string[];
-  reporter?: 'summary' | 'default';
+  reporter?: 'summary' | 'junit' | 'default';
 }
 
 const isWatchMode = process.argv.some(x => x.match(/-w|--watch/));
@@ -51,27 +51,23 @@ export function pfeTestRunnerConfig(opts: PfeTestRunnerConfigOptions): TestRunne
 
   const { elementsDir, tagPrefix } = getPfeConfig();
 
-  const configuredReporter = opts.reporter ?? 'summary';
+  const configuredReporter = opts.reporter ?? 'default';
 
-  const reporters = [];
-  if (isWatchMode) {
-    if (configuredReporter === 'summary') {
-      reporters.push(
-        summaryReporter({ flatten: false }),
-        defaultReporter({ reportTestResults: false, reportTestProgress: true }),
-      );
-    } else {
-      reporters.push(
-        defaultReporter(),
-      );
-    }
-  } else {
+  const reporters = configuredReporter === 'summary' && isWatchMode ? [
+    summaryReporter({ flatten: !!process.env.CI }),
+    defaultReporter(),
+  ] : configuredReporter === 'summary' ? [
+    summaryReporter({ flatten: !!process.env.CI }),
+  ] : [
+    defaultReporter(),
+  ];
+
+  if (process.env.CI) {
     reporters.push(
-      defaultReporter(),
       junitReporter({
         outputPath: './test-results/test-results.xml',
         reportLogs: true,
-      }),
+      })
     );
   }
 
diff --git a/tools/pfe-tools/test/utils.ts b/tools/pfe-tools/test/utils.ts
index 4f3325975c..29f4d0dc52 100644
--- a/tools/pfe-tools/test/utils.ts
+++ b/tools/pfe-tools/test/utils.ts
@@ -30,10 +30,15 @@ export async function clickElementAtCenter(element: Element): Promise<void> {
  * using playwright's sendMouse command
  * @param element to click
  * @param relativeOffset x,y coords tuple
+ * @param [options] options
+ * @param [options.allowOutOfBounds] allow the browser to click outside of the element boundaries
  */
 export async function clickElementAtOffset(
   element: Element,
   relativeOffset: Position,
+  options?: {
+    allowOutOfBounds?: true;
+  }
 ): Promise<void> {
   const { x, y, right, bottom } = element.getBoundingClientRect();
   const [xOffset, yOffset] = relativeOffset;
@@ -43,11 +48,13 @@ export async function clickElementAtOffset(
   ] satisfies [number, number];
   const [xCoord, yCoord] = position;
   // NOTE: this may fail in RTL situations?
-  if (xCoord > right) {
-    throw new Error('X offset is outside element boundaries');
-  }
-  if (yCoord > bottom) {
-    throw new Error('Y offset is outside element boundaries');
+  if (!options?.allowOutOfBounds) {
+    if (xCoord > right) {
+      throw new Error('X offset is outside element boundaries');
+    }
+    if (yCoord > bottom) {
+      throw new Error('Y offset is outside element boundaries');
+    }
   }
   await sendMouse({ type: 'click', position });
 }
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index 32a1faa76f..57e1cd9cea 100644
--- a/web-test-runner.config.js
+++ b/web-test-runner.config.js
@@ -1,12 +1,27 @@
 import { pfeTestRunnerConfig } from '@patternfly/pfe-tools/test/config.js';
 import { a11ySnapshotPlugin } from '@web/test-runner-commands/plugins';
+import { getPatternflyIconNodemodulesImports } from '@patternfly/pfe-tools/dev-server/config.js';
 
 export default pfeTestRunnerConfig({
   // workaround for https://github.com/evanw/esbuild/issues/3019
   tsconfig: 'tsconfig.esbuild.json',
   files: ['!tools/create-element/templates/**/*'],
-  // uncomment to get default wtr reporter
-  reporter: 'default',
+  reporter: process.env.CI ? 'summary' : 'default',
+  importMapOptions: {
+    providers: {
+      'zero-md': 'nodemodules',
+      '@patternfly/icons': 'nodemodules',
+      '@patternfly/elements': 'monorepotypescript',
+      '@patternfly/pfe-tools': 'monorepotypescript',
+      '@patternfly/pfe-core': 'monorepotypescript',
+    },
+    inputMap: {
+      imports: {
+        '@patternfly/pfe-tools/environment.js': './_site/tools/environment.js',
+        ...await getPatternflyIconNodemodulesImports(import.meta.url),
+      },
+    },
+  },
   plugins: [
     a11ySnapshotPlugin(),
   ],