View All Attachments for Bug 266804

Attachment #469169
Repro with block vs flex buttons in shadow vs light DOM	text/html	2023-12-21 20:45:04 PST	1.26 KB	no flags	Details

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <p>CSS flex display affects button's accessible name in shadow DOM:</p>
    <my-simple></my-simple>
    <p>Same code in light DOM works:</p>
    <my-buttons>
      <span slot="flex">flex test</span>
      <span slot="block">block test</span>
    </my-buttons>
    <script>
      class MySimple extends HTMLElement {
        constructor() {
          super();
          const root = this.attachShadow({ mode: "open" });
          root.innerHTML = `
          <my-buttons>
      <span slot="flex">flex test</span>
      <span slot="block">block test</span>
    </my-buttons>
`;
        }
      }
      customElements.define("my-simple", MySimple);
      class MyButtons extends HTMLElement {
        constructor() {
          super();
          const root = this.attachShadow({ mode: "open" });
          root.innerHTML = `
          <button style="display: flex;"><slot name="flex"></slot></button>
          <button style="display: block;"><slot name="block"></slot></button>
          `;
        }
      }
      customElements.define("my-buttons", MyButtons);
    </script>
  </body>
</html>