Are there any constraints regarding keyboard accessibility?

posted on 11.09.2023

Back to overview

Not that I know, but some things are annoying.

Style encapsulation sounds great until you want certain styles to be applied everywhere. For example, you define focus styles globally because they are usually the same for every element. You expect them to apply to every interactive element when you do that, but thanks to style encapsulation, interactive elements in shadow trees don't get that styling.

:focus-visible {
  outline: 2px solid; 
  outline-offset: 2px;
}

<button>Button 1</button>
<button>Button 2</button>
<sha-dow></sha-dow>

class Shadow extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});

    this.shadowRoot.innerHTML = `
      <button>Button 3</button>
      <button>Button 4</button>
    `
  }
}

customElements.define('sha-dow', Shadow);

To get the same focus styles in shadow DOM as in light DOM, you have to repeat the global declarations in each component with interactive elements.

:root {
  --site-focus-outline: 2px solid;
  --site-focus-offset: 2px;
}

:focus-visible {
  outline: var(--site-focus-outline);
  outline-offset: var(--site-focus-offset);
}

  class Shadow extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});

    this.shadowRoot.innerHTML = `   
    <style>
      :focus-visible {
        outline: var(--site-focus-outline);
        outline-offset: var(--site-focus-offset);
      }
    </style>

    <button>Button 3</button>
    <button>Button 4</button>
      `
  }
}

customElements.define('sha-dow', Shadow);

Back to overview