diff --git a/src/components/core/dom/index.ts b/src/components/core/dom/index.ts index 1c21102b03..c03874b880 100644 --- a/src/components/core/dom/index.ts +++ b/src/components/core/dom/index.ts @@ -7,3 +7,4 @@ export * from './input-element'; export * from './is-valid-attribute'; export * from './platform'; export * from './scroll'; +export * from './strip-html'; diff --git a/src/components/core/dom/strip-html.ts b/src/components/core/dom/strip-html.ts new file mode 100644 index 0000000000..7f301083c5 --- /dev/null +++ b/src/components/core/dom/strip-html.ts @@ -0,0 +1,7 @@ +/** + * Strips/removes HTML tags from a given value. + * @param value Value to strip HTML tags from. + */ +export function stripHTML(value: string): string { + return new DOMParser().parseFromString(value, 'text/html').body.textContent; +} diff --git a/src/components/logo/logo.ts b/src/components/logo/logo.ts index 0e192ded01..1bb86061d0 100644 --- a/src/components/logo/logo.ts +++ b/src/components/logo/logo.ts @@ -1,6 +1,8 @@ -import { CSSResultGroup, html, LitElement, nothing, svg, TemplateResult } from 'lit'; +import { CSSResultGroup, html, LitElement, nothing, TemplateResult } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { unsafeSVG } from 'lit/directives/unsafe-svg.js'; +import { stripHTML } from '../core/dom'; import { SbbProtectiveRoom } from '../core/interfaces'; import style from './logo.scss?lit&inline'; @@ -23,11 +25,15 @@ export class SbbLogo extends LitElement { @property({ attribute: 'accessibility-label' }) public accessibilityLabel = 'Logo'; protected override render(): TemplateResult { + // unsafeSVG is required due to bug in Lit SSR: https://github.com/lit/lit/issues/4405 + // As unsafeSVG would allow any kind of content (including HTML) to be used, we + // remove any HTML content from the given accessibility label. + const accessibilityLabel = this.accessibilityLabel ? stripHTML(this.accessibilityLabel) : ''; return html`