<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/accessibility-helper.js"></script>
<custom-menu id="menu-1">
<div id="host">
<custom-menuitem id="item-1" aria-label="item 1"></custom-menuitem>
<custom-menuitem id="item-2" aria-label="item 2"></custom-menuitem>
</div>
<script>

class CustomMenuElement extends HTMLElement {
    constructor()
    {
        super();
        const internals = this.attachInternals();
        internals.role = 'menubar';
        internals.ariaActiveDescendantElement = document.getElementById('item-2');
        window.customMenuInternals = internals;
        shouldBe('customMenuInternals.ariaActiveDescendantElement', 'document.getElementById("item-2")');
    }
};
customElements.define('custom-menu', CustomMenuElement);

class CustomMenuItemElement extends HTMLElement {
    constructor()
    {
        super();
        const internals = this.attachInternals();
        internals.role = 'menuitem';
    }
}
customElements.define('custom-menuitem', CustomMenuItemElement);

const shadowRoot = host.attachShadow({mode: 'closed'});
shadowRoot.innerHTML = '<custom-menu id="menu-1"><slot></slot></custom-menu>';

description("This tests that aria fallback roles work correctly.");
if (!window.accessibilityController)
    debug('This test requires accessibilityController');
else {
    shouldBe('accessibilityController.accessibleElementById("menu-1").selectedChildrenCount', '1');
    shouldBeEqualToString('platformValueForW3CName(accessibilityController.accessibleElementById("menu-1").selectedChildAtIndex(0))', 'item 2');
    shouldBeTrue('accessibilityController.accessibleElementById("menu-1").selectedChildAtIndex(0).isSelected');
}

</script>
</body>
</html>