simplify Image component interface, add react-inlinesvg dependency, c…

…onvert svgs into inline components (#1561)

app/components/Footer.tsx

@@ -33,11 +33,7 @@ export default function Footer({
         <div className="flex flex-col flex-col-reverse sm:flex-row gap-y-8 gap-x-16">
           {image?.url && (
             <div>
-              <Image
-                url={image.url}
-                width={120}
-                alternativeText={image.alternativeText}
-              />
+              <Image {...image} width={120} />
             </div>
           )}
           <div className="ds-stack-8">

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 ? (
+    <SVG
+      {...props}
+      src={url}
+      width={width}
+      title={alternativeText}
+      role="img"
+      height={"auto"}
+    />
+  ) : (
     <img
       {...props}
       src={url}

app/services/cms/models/StrapiImage.ts

@@ -41,6 +41,12 @@ export const getImageProps = (
   cmsData: StrapiImage | null,
 ): ImageProps | undefined => {
   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,
+  };
 };

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",

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": [

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",