fix(aria): prevent getOwnedVirtual from returning duplicate nodes (#4987)

camiha · WilcoFiers · straker · commit 99d1e77f351d · 2026-03-30T11:42:30.000-06:00
When a child element is also referenced via aria-owns, getOwnedVirtual returned the same node twice. Filter aria-owns references that already exist in children using Set. Closes: #4840 --------- Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>
diff --git a/lib/commons/aria/get-owned-virtual.js b/lib/commons/aria/get-owned-virtual.js
@@ -18,7 +18,15 @@ function getOwnedVirtual(virtualNode) {
     const owns = idrefs(actualNode, 'aria-owns')
       .filter(element => !!element)
       .map(element => axe.utils.getNodeFromTree(element));
-    return [...children, ...owns];
+
+    // Deduplicates by first occurrence to match browser accessibility tree behavior
+    // See: https://github.com/dequelabs/axe-core/pull/4987
+    const uniqueOwns = owns.filter((own, index) => owns.indexOf(own) === index);
+    const nativeChildren = children.filter(
+      child => !uniqueOwns.includes(child)
+    );
+
+    return [...nativeChildren, ...uniqueOwns];
   }
 
   return [...children];
diff --git a/test/commons/aria/get-owned-virtual.js b/test/commons/aria/get-owned-virtual.js
@@ -37,6 +37,62 @@ describe('aria.getOwnedVirtual', function () {
     assert.equal(owned[3].actualNode.nodeName.toUpperCase(), 'H4');
   });
 
+  it('does not return duplicate when child is also aria-owned', function () {
+    fixtureSetup(
+      '<div role="tablist" id="target" aria-owns="foo">' +
+        '<div id="foo" role="menuitem">foo</div>' +
+        '</div>'
+    );
+    var target = axe.utils.querySelectorAll(axe._tree[0], '#target')[0];
+    var owned = aria.getOwnedVirtual(target);
+    assert.lengthOf(owned, 1);
+    assert.equal(owned[0].actualNode.id, 'foo');
+  });
+
+  it('does not return duplicate when same ID appears multiple times in aria-owns', function () {
+    fixtureSetup(
+      '<div role="list" id="target" aria-owns="a b a">' +
+        '</div>' +
+        '<div role="listitem" id="a">A</div>' +
+        '<div role="listitem" id="b">B</div>'
+    );
+    var target = axe.utils.querySelectorAll(axe._tree[0], '#target')[0];
+    var owned = aria.getOwnedVirtual(target);
+    assert.lengthOf(owned, 2);
+    assert.equal(owned[0].actualNode.id, 'a');
+    assert.equal(owned[1].actualNode.id, 'b');
+  });
+
+  it('moves aria-owned child to the end', function () {
+    fixtureSetup(
+      '<div role="list" id="target" aria-owns="a">' +
+        '<div role="listitem" id="a">A</div>' +
+        '<div role="listitem" id="b">B</div>' +
+        '</div>'
+    );
+    var target = axe.utils.querySelectorAll(axe._tree[0], '#target')[0];
+    var owned = aria.getOwnedVirtual(target);
+    assert.lengthOf(owned, 2);
+    assert.equal(owned[0].actualNode.id, 'b');
+    assert.equal(owned[1].actualNode.id, 'a');
+  });
+
+  it('moves multiple aria-owned children to the end in aria-owns order', function () {
+    fixtureSetup(
+      '<div role="list" id="target" aria-owns="c a">' +
+        '<div role="listitem" id="a">A</div>' +
+        '<div role="listitem" id="b">B</div>' +
+        '<div role="listitem" id="c">C</div>' +
+        '</div>'
+    );
+    var target = axe.utils.querySelectorAll(axe._tree[0], '#target')[0];
+    var owned = aria.getOwnedVirtual(target);
+    assert.lengthOf(owned, 3);
+    assert.equal(owned[0].actualNode.id, 'b');
+    assert.equal(owned[1].actualNode.id, 'c');
+    assert.equal(owned[2].actualNode.id, 'a');
+  });
+
   it('ignores whitespace-only aria-owned', function () {
     fixtureSetup(
       '<div id="target" aria-owns="  ">' +
