Support the CSS selector :focus-visible in querySelector and matches

[ranjith-dish]

Basic info:

• Node.js version: 14.17.3
• jsdom version: 29.0.2

Minimal reproduction case

I face this syntax error exception from react-testing-library.

"@testing-library/react": "12.1.5", "jest": "^29.0.2", "jest-environment-jsdom": "^29.0.2",

document.activeElement.matches(':focus-visible')

=> SyntaxError: ':focus-visible' is not a valid selector

How does similar code behave in browsers?

https://codepen.io/ranjith-dish/pen/MWGaXNo

[iamogbz]

Looks related to https://github.com/jsdom/jsdom/issues/3055

[danielmag]

I'm experiencing the same issue. Is there any workaround?

[bschlenk]

I'm using this as a workaround for now, :focus-visible always returns false:

const matchesOriginal = HTMLElement.prototype.matches
HTMLElement.prototype.matches = function (query: string) {
  if (query === ':focus-visible') return false
  return matchesOriginal.call(this, query)
}