fix: turn off unknown properties and stroke svg attributes

Author: Swiftwork

packages/browser-sdk/eslint.config.js

@@ -14,7 +14,9 @@ module.exports = [
       },
     },
     rules: {
-      "react/no-unknown-property": ["error", { ignore: ["class"] }],
+      // Ignore React attributes that are not valid in Preact.
+      // Alternatively, we could use the preact/compat alias or turn off the rule.
+      "react/no-unknown-property": ["off"],
     },
   },
   { ignores: ["dist/", "example/"] },

packages/browser-sdk/src/feedback/ui/RadialProgress.tsx

@@ -16,9 +16,9 @@ export const RadialProgress: FunctionComponent<{
         cy={radius + stroke}
         fill="transparent"
         r={radius}
-        strokeDasharray={circumference}
-        strokeDashoffset={filled}
-        strokeWidth={stroke}
+        stroke-dasharray={circumference}
+        stroke-dashoffset={filled}
+        stroke-width={stroke}
         transform={`rotate(-90) translate(-${radius * 2 + stroke * 2} 0)`}
       />
     </svg>

packages/browser-sdk/src/feedback/ui/StarRating.tsx

@@ -146,7 +146,7 @@ const Score = ({
         ref={refs.setReference}
         aria-label={score.getLabel(t)}
         class="button"
-        htmlFor={`bucket-feedback-score-${score.value}`}
+        for={`bucket-feedback-score-${score.value}`}
         style={{ color: score.color }}
       >
         <div