Description
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).