Skip to content

How should <slot aria-label="foo"> be treated? #173

@nolanlawson

Description

@nolanlawson

Related to #93 and #20.

While looking into shadow DOM and slots (#167 (comment)), I found an apparent disagreement between UAs.

Consider this DOM (Codepen):

<label id="the-label">
  <div>
    #shadow-root
      foo <slot aria-label="label"></slot> bar
    slotted
  </div>
</label>
<button aria-labelledby="the-label"> 

(Note the aria-label on the <slot>.)

What should the <button>'s accessible name be in this case? The UAs disagree:

Browser ATs tested Result
Chrome 105 VoiceOver, NVDA "foo label bar"
Firefox 104 VoiceOver, NVDA "foo slotted bar"
Safari 16 VoiceOver "foo slotted bar"

Firefox and Safari ignore the aria-label, whereas Chrome treats it as significant.

The result is the same for default slotted content (see the same Codepen):

Browser ATs tested Result
Chrome 105 VoiceOver, NVDA "foo label bar"
Firefox 104 VoiceOver, NVDA "foo default bar"
Safari 16 VoiceOver "foo default bar"

Per the HTML spec:

A slot element represents its assigned nodes, if any, and its contents otherwise.

Per this definition, it seems to me that the Firefox/Safari behavior is correct, and Chrome's is incorrect. (I.e. the slot's aria-label should be ignored; only its contents should be considered to "represent" it.)

Note this should also apply to aria-description, aria-labelledby, and aria-describedby. (I did not test these though.)

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions