Some stuff that doesn’t work between the DOM and Shadow DOM

Been reading a few new articles on Web Components and accessibility, which lead me to re-read an old post I wrote: Notes on Web Components + ARIA. I noted the demo was broken, presumably as the web component syntax had changed since 2012. So I decided to make a few new tests:

What I found was that anything that relies upon an id association between content in the DOM and Shadow DOM breaks (note need to run latest Chrome or Firefox Nightly ,with web components flag enabled, to test):

Some HTML examples:

• document fragment links (#blah) – if the link target is in the shadow or visa versa
  • link target in shadow DOM codepen example
• label for/id association in DOM for controls in the shadow DOM
  • label targeting input in shadow DOM codepen example

Most ARIA relationship attributes:

• aria-activedescendant
• aria-controls
• aria-describedby
• aria-flowto
• aria-labelledby
• aria-owns

will this be fixed?

Discussion is occurring in regards to the ARIA issues – ARIA relationships via selector

Further reading

• Notes on accessibility of Web Components
• Accessibility and the Shadow DOM
• Shadow DOM spec

The post Some stuff that doesn’t work between the DOM and Shadow DOM appeared first on The Paciello Group Blog.