#5222·axe-core

Update getAccessibleRefs to support elementInternals

Author: strakerCreated Jul 20, 2026Updated Sep 16, 2026
LabelsfeatelementInternals

getAccessibleRefs currently does not handle accessible references from element internals. In supporting this, we also want to have the association be to virtual nodes and not pure DOM nodes, and allowing filtering the return by how it's associated (such as in color-contrast-matches).

We are thinking we could create the accessible ref at DOM walk time (getFlattenTree) rather than lazily through getAccessibleRef. In order to avoid walking the DOM twice (once to keep track of the associations and then again afterwards to get the virtual nodes), we should keep track of both nodes that have ids and nodes that have accessible ref attributes / properties. Then once we have finished walking the DOM we can use those lists to create the accessible reference without having to rewalk the DOM. We could then add the references to the virtual node itself (e.g. vNode.accessibleRefs).

So for example, the end result could look like this:

javascript
class VirtualNode {
  accessibleRefs = [
    { 
      vNodes: [vNode, vNode], 
      attribute: 'aria-labelledby' 
    }, { 
      vNodes: [vNode],
      attribute: 'aria-activedescendant'
    }
  ]

  getAccessibleRefs(ariaProp) {
    if (ariaProp) {
      return this.accessibleRefs.filter(ref => ref.attribute === araiProp).map(ref => ref.vNodes);
    }
    return this.accessibleRefs.map(ref => ref.vNodes);
  }
}