-
Notifications
You must be signed in to change notification settings - Fork 24
How is the accessible name determined when an element contains a slot? #93
Description
How is the accessible name determined for elements that contain slots? For example, look at the following HTML which defines a custom button element containing a slot.
<template id="button-template">
<button><slot></slot></button>
</template>
<custom-button>Submit</custom-button>
<script>
customElements.define(
'custom-button',
class extends HTMLElement {
constructor() {
super();
const template = document.getElementById('button-template')
.content;
const shadowRoot = this.attachShadow({ mode: 'open' }).appendChild(
template.cloneNode(true)
);
}
}
);
</script>When inspecting the <button> element in the shadow root, both Chrome and Firefox say the accessible name is "Submit". However, I can't find anything in the accessible name mapping spec mentioning slots. Per step F.iii, each child node of the button would be recursively examined to determine the name. So, the text alternative for the slot would need to be determined. The slot does not have any childNodes, so the process stops there. It seems like assignedNodes would also need to be examined to compute the accessible name.
const slot = document.querySelector('custom-button').shadowRoot.querySelector('slot')
console.log(slot.childNodes) // NodeList []
console.log(slot.assignedNodes()) // Array [ #text "Custom name" ]- When the spec says "For each child node of the current node," does it include assigned nodes when slots are being examined?
- Should it be updated to mention assigned nodes or am I misunderstanding the spec?
The browser implementations seem to be looking at assigned nodes as well as child nodes, so I'm wondering why the spec doesn't mention them.