Option to disable or configure `svelte-announcer`

[dumbmoron]

Describe the problem

Currently, the svelte-announcer element always gets injected into the webpage, and there is no way to disable it or override its behavior.

Describe the proposed solution

It would be nice to be able to disable it or control it in some form, for example if we wish to have more fine-grained ARIA announcements.

Alternatives considered

No response

Importance

would make my life easier

Additional Information

For anyone currently looking to remove svelte-announcer and implement their own, we use this preprocessor as a workaround to get rid of it in svelte.config.js:

    preprocess: [
        {
            name: "strip-announcer",
            markup: ({ content: code }) => {
                code = code.replace(
                    /<div id="svelte-announcer" [\s\S]*?<\/div>/,
                    '<svelte:component this={null} />'
                );

                return { code }
            }
        },
        // ...
    ],
    // ...

[mquandalle]

What is the svelte-announcer element used for? Is it expected to have it in the prod build?

[Conduitry]

It's for screen readers. https://svelte.dev/docs/kit/accessibility#Route-announcements

[nstuyvesant]

As we use a very locked-down Content Security Policy (CSP), I would prefer that the div use a CSS class instead the inline styles style="position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px"; otherwise, we have to use 'unsafe-inline' for style-src.

Just added this to svelte.config.js to get rid of the inline styles...

	preprocess: [
		vitePreprocess(),
		{
			name: 'announcer-styles-to-tailwind',
			markup: ({ content: code }) => {
				code = code.replace(
					/(<div id="svelte-announcer"[^>]*?)\s+style="[^"]*"/,
					'$1 class="tw:absolute tw:left-0 tw:top-0 tw:[clip:rect(0,0,0,0)] tw:[clip-path:inset(50%)] tw:overflow-hidden tw:whitespace-nowrap tw:w-px tw:h-px"'
				)
				return { code }
			}
		}
	],

[teemingc]

Related: Nuxt allows configuring the aria-live attribute https://nuxt.com/docs/4.x/api/composables/use-route-announcer#assertivemessage