Skip to content

Allow attributes on the <title> element #5198

Open
@romaricpascal

Description

@romaricpascal

Is your feature request related to a problem? Please describe.
Looks like the <title> element is [barred from having any attributes] (https://github.com/sveltejs/svelte/blob/master/src/compiler/compile/nodes/Title.ts). According to MDN, it can host any global attribute. It was a bit of a surprise that it had special treatment.

This prevents adding to it an aria-live attribute that would allow its announcement by assistive technology (provided it's unhidden from the accessibility tree, see experiment there: https://romaricpascal.is/posts/title-element-aria-live/).

Describe the solution you'd like
At the moment, it looks like the attribute can be set through an onMount() call:

  onMount(() => {
    document.head.querySelector('title').setAttribute('aria-live', 'assertive');
  });

but it'd be great to just be able to do:

<svelte:head>
  <title aria-live="assertive">{$title}</title>
</svelte:head>

This would also make updating whether the title should be announced lighter, especially if the value comes from a store:

<svelte:head>
  <title aria-live={$live}>{$title}</title>
</svelte:head>

Describe alternatives you've considered
Using onMount provides a workable workaround. There's just a bit of logistics if attributes need to come from a store or multiple attributes need setting (but in my use-case, that would only be aria-live).

How important is this feature to you?
It's not a dealbreaker that it's not there. It just feels less idiomatic to have all that boilerplate around. It was also confusing to have that specific tag not work as a regular tag (maybe it's a matter of documentation, though).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions