Add include shadow element

[ccheung0926]

Product

axe-core

Question

Hi,

I am currently working on a project for my company and would like to know how I can add my shadow element under the include selector list?

[straker]

Currently this isn't possible. We had a ticket for it, but closed it due to lack of use cases. Do you have a use case for doing this?

[ccheung0926]

hi @straker
Yes, I saw that ticket. And I would like to say we have a use case for it. I am not in the position to expose too much information here. But my company's accessibility team has a roadmap to integrate with Axe-core. The product team uses lit library which is very heavy on shadow DOM.
It would be great if I can choose shadow DOM as part of the inclusive/exclusive shadow DOM selector prior to the Axe-core scan.

[straker]

I think the best you could do at the moment is select the top-most custom element that has the shadow DOM. We can leave this ticket open for now now that we have a use case for it and start exploring it again.

[ccheung0926]

@straker Sure, i can use the top-most custom element for now. But just let you know that that top-most element is a parent that nested with a lot of shadow DOMs developed by different UI teams 😅

[WilcoFiers]

I think this would be a good thing for us to resolve. For now there is a workaround you could use. You can include DOM nodes, including shadow nodes. If you wanted you could create a little shadowRoot query function. Something like this:

function getShadowNode(...queries) {
  let node, query;
  while (query = queries.shift()) {
    node = (node?.shadowRoot ?? node ?? document)
      .querySelector(query);
  }
  return node;
}
const shadowNode = getShadowNode('#shadow-root', '#nested-elm', '#my-team')
axe.run(shadowNode);

[WilcoFiers]

In hindsight... axe-core has a utility function that lets you select individual nodes from shadow DOM trees that will work today:

const shadowNode = axe.utils.shadowSelect('#shadow-root', '#nested-elm', '#my-team')
axe.run(shadowNode);