<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/accessibility-helper.js"></script>
<script src="../../resources/js-test.js"></script>
</head>
<body>

<my-button id="button1">Button One</my-button>
<my-button id="button2"><div>Nested Button Two</div></my-button>

<script>
    class MyButton extends HTMLElement {
        constructor() {
            super();
            const root = this.attachShadow({ mode: 'open' });
            root.innerHTML = `<button id=${this.id}><slot></slot></button>`;
        }
    }
    customElements.define('my-button', MyButton);

    let output = "This test ensures that shadow dom elements return the right text.\n\n";

    if (window.accessibilityController) {
        var button1 = accessibilityController.accessibleElementById("button1");
        output += `Button1 text: ${platformTextAlternatives(button1)}\n`;
        
        var button2 = accessibilityController.accessibleElementById("button2");
        output += `Button2 text: ${platformTextAlternatives(button2)}\n`;
        debug(output); 
    }
</script>
</body>
</html>