Skip to content

How is the accessible name determined when an element contains a slot? #93

@geoffrich

Description

@geoffrich

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions