Missing white spaces in accessible name with JSDOM 27

[ThiloAschebrock]

Minimal reproduction case

const { JSDOM } = require("jsdom");
const { computeAccessibleName } = require("dom-accessibility-api");

const dom = new JSDOM(`<h1><span>Hello </span><strong>World!</strong></h1>`);
const h1 = dom.window.document.querySelector("h1");

console.log(`"${computeAccessibleName(h1)}"`);

How does similar code behave in browsers?

Browser prints the headline as "Hello World!".

Since JSDOM 27, computeAccessibleName of behaves differently and is returning "HelloWorld!" instead of "Hello World!".

Context:

After upgrading to JSDOM 27 Angular unit tests based on testing-library/angular-testing started failing due to this issue. By default, Angular templates do not preserve whitespace that the framework considers unnecessary, cf. https://angular.dev/guide/templates/whitespace - therefore, it's hard to control whitespaces and to move them between elements.

I have raised the same issue with JSDOM at jsdom/jsdom#3958 as I am not sure, where it would need to be fixed.

[ThiloAschebrock]

#971 seems to fix the issue but would result in incorrect values for JSDOM 26. The difference is triggered by display style difference.

[Paul-Hebert]

+1, this makes the tests diverge from the browser experience