Siteimprove / alfa

:wheelchair: Suite of open and standards-based tools for performing reliable accessibility conformance testing at scale
MIT License
102 stars 11 forks source link

Collect constructed stylesheets in `Native.fromNode` #1646

Closed rcj-siteimprove closed 3 days ago

rcj-siteimprove commented 4 days ago

Constructed stylesheets are used to declare stylesheets in JavaScript that are passed between the document and shadow roots.

We don't grab them when constructing a document from a native document:

import { Native } from "@siteimprove/alfa-dom/native";

const alfaDoc = Native.fromNode(window.document);

This means we are miscalculating the style of elements inside shadow roots that makes use of CSSStyleSheet.

This is the cause for the bug reported on #1639.

The incorrect behavior can also be observed by running the Siteimprove Accessibility Checker web extension on this page https://rcj-siteimprove.github.io/constructed-stylesheet/.

Here is where we get the stylesheet currently https://github.com/Siteimprove/alfa/blob/0368c2c2cf135b0fe58619c3cb4b39a2c88d449f/packages/alfa-dom/src/native.ts#L173

We need to figure out how to also get the constructed stylesheets here.