diff --git a/app/components/Image.tsx b/app/components/Image.tsx
index 6c26b5f3e..b015e50da 100644
--- a/app/components/Image.tsx
+++ b/app/components/Image.tsx
@@ -1,5 +1,8 @@
+import SVG from "react-inlinesvg";
+
export type ImageProps = Readonly<{
url?: string;
+ ext?: string;
width?: number;
height?: number;
alternativeText?: string;
@@ -8,7 +11,18 @@ export type ImageProps = Readonly<{
function Image({ url, width, height, alternativeText, ...props }: ImageProps) {
if (!url) return null;
- return (
+ // Need to inline SVG components for accessibility
+ const isSvg = props.ext === ".svg";
+ return isSvg ? (
+
+ ) : (
{
if (!cmsData) return undefined;
- const { url, width, height, alternativeText } = cmsData;
- return { url, width, height, alternativeText: alternativeText ?? undefined };
+ const { url, width, height, alternativeText, ext } = cmsData;
+ return {
+ url,
+ width,
+ ext,
+ height,
+ alternativeText: alternativeText ?? undefined,
+ };
};
diff --git a/app/services/cms/models/__test__/StrapiImage.test.ts b/app/services/cms/models/__test__/StrapiImage.test.ts
index 08dda8169..2c66b9b32 100644
--- a/app/services/cms/models/__test__/StrapiImage.test.ts
+++ b/app/services/cms/models/__test__/StrapiImage.test.ts
@@ -21,6 +21,7 @@ describe("getImageProps", () => {
expect(result).toEqual({
url: "url",
+ ext: ".ext",
width: 1,
height: 2,
alternativeText: "alternativeText",
diff --git a/app/services/security/cspHeader.server.tsx b/app/services/security/cspHeader.server.tsx
index 46f4c2085..4fbb5831c 100644
--- a/app/services/security/cspHeader.server.tsx
+++ b/app/services/security/cspHeader.server.tsx
@@ -24,6 +24,7 @@ export const cspHeader = (args: {
"connect-src": [
"'self'",
"eu.i.posthog.com",
+ "https://a2j-rechtsantragstelle-infra-public-assets-bucket.obs.eu-de.otc.t-systems.com",
...(args.additionalConnectSrc ?? []),
],
"img-src": [
diff --git a/package-lock.json b/package-lock.json
index bb9c1f319..cd15ffba6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
"react-collapsed": "^4.1.2",
"react-dom": "^18.3.1",
"react-imask": "^7.6.1",
+ "react-inlinesvg": "^4.1.5",
"react-select": "^5.9.0",
"remix-validated-form": "^5.1.5",
"samlify": "^2.8.11",
@@ -15647,6 +15648,15 @@
"react": "^18.3.1"
}
},
+ "node_modules/react-from-dom": {
+ "version": "0.7.3",
+ "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.7.3.tgz",
+ "integrity": "sha512-9IK6R7+eD1wOAMC2ZCrENev0eK1625cb7vX+cnnOR9LBRNbjKiaJk4ij2zQbcefEXTWjXFhA7CTO1cd8wMONnw==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/react-imask": {
"version": "7.6.1",
"resolved": "https://registry.npmjs.org/react-imask/-/react-imask-7.6.1.tgz",
@@ -15663,6 +15673,18 @@
"react": ">=0.14.0"
}
},
+ "node_modules/react-inlinesvg": {
+ "version": "4.1.5",
+ "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-4.1.5.tgz",
+ "integrity": "sha512-DcCnmHhpKAUNp6iLPEEB2HJP3simDlyiy8JPZ1DwGCynrQQGQD04GJTFtai8JK8vRhCmoiBV6hSgj31D42Z3Lg==",
+ "license": "MIT",
+ "dependencies": {
+ "react-from-dom": "^0.7.3"
+ },
+ "peerDependencies": {
+ "react": "16.8 - 19"
+ }
+ },
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index c4b9643e6..62c4b951a 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
"react-collapsed": "^4.1.2",
"react-dom": "^18.3.1",
"react-imask": "^7.6.1",
+ "react-inlinesvg": "^4.1.5",
"react-select": "^5.9.0",
"remix-validated-form": "^5.1.5",
"samlify": "^2.8.11",