Shadow DOM implementation #317

dylanb · 2017-04-27T14:17:51Z

DO NOT MERGE

Opening a pull request to allow discussion on implementation to happen.

Current state:

Implemented own querySelectorAll to resolve rule selectors across shadow DOM boundaries
Make sure all existing rules work with the changes to qsa
Documented design for result object target array with target selectors that work across shadow DOM boundaries
Updated utilities like findUp, text.label and text.accessibleText to support shadow DOM
Implemented test utilities to allow conditional execution of shadow DOM tests
Updating rules to support shadow DOM

marcysutton · 2017-05-17T02:33:19Z

doc/API.md

@@ -444,7 +452,7 @@ Each object returned in these arrays have the following properties:
 * `nodes` - Array of all elements the Rule tested
 	* `html` - Snippet of HTML of the Element
 	* `impact` - How serious the violation is. Can be one of "minor", "moderate", "serious", or "critical" if the test failed or `null` if the check passed
-	* `target` - Array of selectors that has each element correspond to one level of iframe or frame. If there is one iframe or frame, there should be two entries in `target`. If there are three iframe levels, there should be four entries in `target`.
+	* `target` - Array of either strings or Arrays of strings. If the item in the array is a string, then it is a CSS selector. If there are multiple items in the array each item corresponds to one level of iframe or frame. If there is one iframe or frame, there should be two entries in `target`. If there are three iframe levels, there should be four entries in `target`. If the item in the Array is an Array of strings, then it points to an element in a shadow DOM and each item (except the n-1th) in this array is a selector to a DOM element with a shadow DOM. The last element in the array points to the final shadow DOM node.


This is confusing, especially this part:

If the item in the Array is an Array of strings, then it points to an element in a shadow DOM

How would you tell that apart from an iframe?

iframe: ['selector to iframe', 'selector within iframe']

shadowDOM: [['selector of shadow DOM element', 'selector within shadow DOM']]

so an if statement could do if (Array.isArray(target[n])) { // shadow DOM,

or if (!Array.isArray(target[n])) { // normal selector (could be iframe if target.length > n + 1

I still find these arrays confusing; users will have to be intimately familiar with our documentation to use them. Is there any way to put them in an object with named keys instead of relying on array depth?

the disadvantage of that is it would break existing code - which will still work for everything that is not inside a shadow DOM

marcysutton · 2017-05-17T19:51:03Z

doc/API.md

+
+* `violations[1]` ...
+
+As you can see the `target` array contains one item that is an array. This array contains two items, the first is a CSS selector string that finds the custom element `<aria-menu>` in the `<header>`. The second item in this array is the selector within that custom element's shadow DOM to find the `<li>` element with a class of `expanded`.


As you can see the target array contains one item that is an array.

I see two items no matter which way I look at it. Perhaps this should be spelled out more completely since I wasn't able to "see" it?

marcysutton · 2017-05-17T19:59:19Z

lib/core/utils/composed-tree.js

+	}
+	nodeName = node.nodeName.toLowerCase();
+	// for some reason Chrome's marquee element has an open shadow DOM
+	if (node.shadowRoot && nodeName !== 'marquee') {


Did marquee return something different that required filtering it out here?

yes, its shadow DOM is open instead of closed

marcysutton · 2017-05-17T20:05:48Z

lib/core/utils/composed-tree.js

+		return realArray.reduce(reduceShadowDOM, []);
+	} else {
+		if (nodeName === 'content') {
+			realArray = Array.from(node.getDistributedNodes());


When I looked up getDistributedNodes it looked related to the Shadow DOM v0 API. Should we make a note of that here?

marcysutton · 2017-05-17T20:11:47Z

lib/core/utils/composed-tree.js

+			realArray = Array.from(node.assignedNodes());
+			return realArray.reduce(reduceShadowDOM, []);
+		} else {
+			if (node.nodeType === 1) {


Does this run for regular non-shadowDOM nodes so they all have children and actualNode properties? What happens if there isn't a shadowId?

It runs for everything. Only relevant node types (1 and 3) will be returned (not comment nodes for example)

…a node

…o the HTML spec

dylanb · 2017-06-12T14:32:09Z

Updated status:

Implemented the shadow DOM selector (as documented)
Implemented contains
Implemented isHidden

Started work on individual rules, starting with ARIA

Closes #421

# Conflicts: # lib/commons/dom/find-elms-in-context.js # lib/commons/text/accessible-text.js # test/checks/keyboard/focusable-no-name.js # test/checks/tables/same-caption-summary.js # test/commons/text/accessible-text.js

Closes #422

feat(link-in-text-block): Add shadow DOM support

Sd/region check

Closes #426

feat(duplicate-id): Add shadow DOM support

…ibility * feat(aria.label): Works without a virtualNode * feat: Add hasContentVirtual method * feat(is-offscreen): Add shadow DOM support * chore: Some code cleanup * feat(text.visible): Created text.visibleVirtual for shadowDOM * fix: Pass all tests that use accessibleText * feat: add shadow support to aria-required-children Closes #421 * test: use abstracted checkSetup from testutils * fix: get virtualNode with getNodeFromTree * test: More testing for accessibleText() # Conflicts: # lib/commons/dom/find-elms-in-context.js # lib/commons/text/accessible-text.js # test/checks/keyboard/focusable-no-name.js # test/checks/tables/same-caption-summary.js # test/commons/text/accessible-text.js * feat(aria-required-parent): add Shadow DOM support Closes #422 * fix: Rename text.label to text.labelVirtual * fix: Create aria.labelVirtual method

WilcoFiers · 2017-08-03T08:48:03Z

Should we create a develop/3.0 branch instead @dylanb? I don't think we need to keep this PR around, do we?

marcysutton · 2017-08-03T22:17:35Z

I like that idea @WilcoFiers.

* docs(API): change mentions of a11yCheck to axe.run * docs: add Shadow DOM documentation Closes #401 * feat: add missing accessibleTextVirtual method Closes #472 * docs: document testUtils and a few commons * docs: move core/test APIs to developer guide

marcysutton · 2017-08-08T22:04:35Z

I created a develop-2x branch and updated this branch from develop using a merge commit–rebasing was going to take hours, and I couldn't tell what changes to keep for each (of the many) conflicts. I'll merge this PR to develop and we can cut the 3.0.0-alpha release.

marcysutton reviewed May 17, 2017

View reviewed changes

dylanb and others added 14 commits May 20, 2017 14:28

add first implementation of getComposedTree with v1 tests

289af76

add tests for shadow DOM v0

2d8c40a

Add the Slick CSS selector parser to the utils

a2b37e9

add acknowledgement for the Slick parser

1df25c1

add Slick parser copyright

be9b9a0

implement virtual DOM querySelectorAll

096c571

make use of axe.utils.querySelectorAll and get all tests to work

dcd4e1a

implement :not

655eacb

update the acknowledgements

16bbd06

update the API documentation to reflect the change in the target for …

5199775

…a node

fix: add copyright banner back in to axe.js

2aac29a

Add Rocket Validator to doc/projects.md

1210321

chore: add worldspace to projects

cd3b1a5

Add support for V1 fallback content

07ea17a

dylanb force-pushed the shadowDOM branch from baee6a2 to 07ea17a Compare May 20, 2017 21:02

dylanb added 9 commits May 20, 2017 17:04

Merge branch 'develop' into shadowDOM

84162e3

fix some tests

48b5668

change the terminology to match the shadow DOM spec as integrated int…

264651f

…o the HTML spec

add support for including styled slot elements into the virtual DOM

8713b37

Merge branch 'develop' into shadowDOM

74f4156

disabling slot styling support until it is supported by Chrome

d489c43

make is-hidden and contains work with shadow DOM elements

17d13b1

Merge branch 'develop' into shadowDOM

5342544

add shadow DOM support to getSelector

b25117f

WilcoFiers and others added 21 commits July 19, 2017 10:06

Merge branch 'shadowDOM' into sd/region-check

127c0bc

feat(link-in-text-block): Add shadow DOM support

46a2cca

fix(is-in-text-block): Add Shadow DOM support

a125f79

fix: Pass all tests that use accessibleText

7ea8d6b

feat: add shadow support to aria-required-children

f729e25

Closes #421

test: More testing for accessibleText()

c62a6d3

# Conflicts: # lib/commons/dom/find-elms-in-context.js # lib/commons/text/accessible-text.js # test/checks/keyboard/focusable-no-name.js # test/checks/tables/same-caption-summary.js # test/commons/text/accessible-text.js

test: use abstracted checkSetup from testutils

71a97ac

fix: get virtualNode with getNodeFromTree

9bf2870

feat(aria-required-parent): add Shadow DOM support

6ed29f0

Closes #422

chore(region): Minor test/comment fixes

08509b9

Merge pull request #454 from dequelabs/sd/link-in-text-block

24e85d3

feat(link-in-text-block): Add shadow DOM support

Merge pull request #450 from dequelabs/sd/region-check

70c72b4

Sd/region check

fix: get tests all passing (#457)

4874327

feat: add shadow support to group-labelledby

e2a9642

Closes #426

feat: fieldset check shadow DOM

da148d3

test: add missing .v1 property to fieldset

9df8c9c

feat(duplicate-id): Add shadow DOM support

439bc71

test(duplicate-id): clarify test statement

797f9c2

test(duplicate-id): Update test text

5b1cc7a

Merge pull request #452 from dequelabs/sd/duplicate-id

e910d57

feat(duplicate-id): Add shadow DOM support

marcysutton and others added 2 commits August 8, 2017 14:34

Shadow DOM docs (#471)

57ccbbd

* docs(API): change mentions of a11yCheck to axe.run * docs: add Shadow DOM documentation Closes #401 * feat: add missing accessibleTextVirtual method Closes #472 * docs: document testUtils and a few commons * docs: move core/test APIs to developer guide

Merge remote-tracking branch 'origin/develop' into shadowDOM

8dcfb07

marcysutton merged commit 1fb2278 into develop Aug 8, 2017

dylanb deleted the shadowDOM branch January 28, 2018 21:49

elf-pavlik mentioned this pull request Feb 3, 2018

Query nodes within shadow roots puppeteer/puppeteer#858

Closed

dbjorge mentioned this pull request May 20, 2024

<slot> with display: inline-block causes color-contrast to be incomplete #4468

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shadow DOM implementation #317

Shadow DOM implementation #317

dylanb commented Apr 27, 2017 •

edited

Loading

marcysutton May 17, 2017 •

edited

Loading

dylanb May 17, 2017 •

edited

Loading

marcysutton Jun 13, 2017

dylanb Jun 13, 2017

marcysutton May 17, 2017 •

edited

Loading

marcysutton May 17, 2017

dylanb May 17, 2017

marcysutton May 17, 2017

marcysutton May 17, 2017

dylanb May 17, 2017

dylanb commented Jun 12, 2017

WilcoFiers commented Aug 3, 2017

marcysutton commented Aug 3, 2017

marcysutton commented Aug 8, 2017


		* `violations[1]` ...

		As you can see the `target` array contains one item that is an array. This array contains two items, the first is a CSS selector string that finds the custom element `<aria-menu>` in the `<header>`. The second item in this array is the selector within that custom element's shadow DOM to find the `<li>` element with a class of `expanded`.

Shadow DOM implementation #317

Shadow DOM implementation #317

Conversation

dylanb commented Apr 27, 2017 • edited Loading

marcysutton May 17, 2017 • edited Loading

Choose a reason for hiding this comment

dylanb May 17, 2017 • edited Loading

Choose a reason for hiding this comment

marcysutton Jun 13, 2017

Choose a reason for hiding this comment

dylanb Jun 13, 2017

Choose a reason for hiding this comment

marcysutton May 17, 2017 • edited Loading

Choose a reason for hiding this comment

marcysutton May 17, 2017

Choose a reason for hiding this comment

dylanb May 17, 2017

Choose a reason for hiding this comment

marcysutton May 17, 2017

Choose a reason for hiding this comment

marcysutton May 17, 2017

Choose a reason for hiding this comment

dylanb May 17, 2017

Choose a reason for hiding this comment

dylanb commented Jun 12, 2017

WilcoFiers commented Aug 3, 2017

marcysutton commented Aug 3, 2017

marcysutton commented Aug 8, 2017

dylanb commented Apr 27, 2017 •

edited

Loading

marcysutton May 17, 2017 •

edited

Loading

dylanb May 17, 2017 •

edited

Loading

marcysutton May 17, 2017 •

edited

Loading