diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx index 0cea0414c..bc31c2618 100644 --- a/app/components/Footer.tsx +++ b/app/components/Footer.tsx @@ -33,11 +33,7 @@ export default function Footer({
{image?.url && (
- +
)}
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",