Option to turn off inline styles to not violate a basic Content Security Policy

[alexkirmse]

When using svelte navigator there are a11y elements that are hidden via an inline style. Specifically the status div but others as well.

When using a basic Content Security Policy that doesn't allow inline styles, the style won't be applied (showing the status div) and an error message will be logged in the console.

It would be nice to have a configuration option (like noInlineStyle inside a11yConfig) to allow the inline styles to be omitted or to move those styles to <style></style> tags since this is in a Svelte component.

[mefechoel]

Yes, good catch. That should indeed be configurable. I'll look into it and see what kind of configuration makes the most sense.

[mefechoel]

Fixed in 3.2.1. Pass the disableInlineStyles prop to your top level Router:

<Router disableInlineStyles>
    <!-- ... -->
</Router>

Also make sure to include the svelte-navigator.css file somewhere. Either in your apps entrypoint, and let your bundler do the rest:

// In your applications entrypoint, such as `index.js` or `main.js`
import "svelte-navigator/svelte-navigator.css";

Or, include the contents of svelte-navigator.css manually in your apps css.