Apply Round 4 Function Composition fixes: SRI hashes, SVG visual consistency, and A11y improvements

Author: myoshi2891

JavaScript/2629. Function Composition/Claude Code Sonnet 4.6 extended/README_react.html

@@ -4,27 +4,69 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>LeetCode 2629 - Function Composition</title>
-        <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-        <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-        <script src="https://cdn.tailwindcss.com"></script>
+        <script
+            src="https://unpkg.com/react@18/umd/react.production.min.js"
+            integrity="sha384-DGyLxAyjq0f9SPpVevD6IgztCFlnMF6oW/XQGmfe+IsZ8TqEiDrcHkMLKI6fiB/Z"
+            crossorigin="anonymous"
+        ></script>
+        <script
+            src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+            integrity="sha384-gTGxhz21lVGYNMcdJOyq01Edg0jhn/c22nsx0kyqP0TxaV5WVdsSH1fSDUf5YJj1"
+            crossorigin="anonymous"
+        ></script>
+        <script
+            src="https://unpkg.com/@babel/standalone/babel.min.js"
+            integrity="sha384-Fo0OdKhdnE7y2WmzjOMW4PYjHkkANeu1501pWTqKrzAPeJMFQb4ZTdAA9dtrVUJV"
+            crossorigin="anonymous"
+        ></script>
+        <script
+            src="https://cdn.tailwindcss.com"
+            integrity="sha384-igm5BeiBt36UU4gqwWS7imYmelpTsZlQ45FZf+XBn9MuJbn4nQr7yx1yFydocC/K"
+            crossorigin="anonymous"
+        ></script>
         <link
             href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Fraunces:wght@700;900&display=swap"
             rel="stylesheet"
+            integrity="sha384-74F33m7hvD7UOe4E68gapXfr7Z1VLQX/s7NfYcUxVWu+mipY3tL99ai9ripcWrpf"
+            crossorigin="anonymous"
         />
         <link
             rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"
+            integrity="sha384-wFjoQjtV1y5jVHbt0p35Ui8aV8GVpEZkyF99OXWqP/eNJDU93D3Ugxkoyh6Y2I4A"
+            crossorigin="anonymous"
         />
         <link
             rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css"
+            integrity="sha384-nUkTNLI8COlMCRJ0FHIdX76If83145OTCLUx4gQyfnO0gGeO/sD9czGEUBxtkcUv"
+            crossorigin="anonymous"
         />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"
+            integrity="sha384-06z5D//U/xpvxZHuUz92xBvq3DqBBFi7Up53HRrbV7Jlv7Yvh/MZ7oenfUe9iCEt"
+            crossorigin="anonymous"
+        ></script>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"
+            integrity="sha384-PeOqKNW/piETaCg8rqKFy+Pm6KEk7e36/5YZE5XO/OaFdO+/Aw3O8qZ9qDPKVUgx"
+            crossorigin="anonymous"
+        ></script>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"
+            integrity="sha384-6QJu8apxMmB9TiPVWzYKF5pRgKcz7snO0/QU+MrWmgBLECQjoa6erxX2VQ5t41Jd"
+            crossorigin="anonymous"
+        ></script>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"
+            integrity="sha384-jC1G68eGEXJpPwMDNqyIUQsQlcUCdCU+a7GGuoV4TUZvM1gLYTMJUDvqBnxtZLWA"
+            crossorigin="anonymous"
+        ></script>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"
+            integrity="sha384-ZdEfx8sYX8i4IVXU1tUbqwOp4PBUCCmnpagpiHchnstXkEczkzPfUd9fvBrntM+F"
+            crossorigin="anonymous"
+        ></script>
         <style>
             html {
                 scroll-behavior: smooth;
@@ -899,8 +941,7 @@ <h3 class="text-lg font-bold text-[#e53170] mb-3">入出力例</h3>
                     <svg
                         viewBox="0 0 580 220"
                         style={{ maxWidth: '100%', height: 'auto', marginTop: '24px' }}
-                        role="img"
-                        aria-label={`Step visualization: ${label || 'Initial state'}. Accumulator is ${acc}.`}
+                        aria-label={`Step visualization: ${label ? label : type === 'result' ? 'Final result' : 'Initial state'}. Accumulator is ${acc}.`}
                     >
                         <defs>
                             <marker
@@ -987,16 +1028,16 @@ <h3 class="text-lg font-bold text-[#e53170] mb-3">入出力例</h3>
                             );
                         })}
 
-                        {/* Arrows between functions */}
+                        {/* Arrows between functions (Right to Left) */}
                         <path
-                            d="M170 50 L200 50"
+                            d="M200 50 L170 50"
                             stroke="#334155"
                             strokeWidth="1.5"
                             fill="none"
                             markerEnd="url(#va)"
                         />
                         <path
-                            d="M340 50 L370 50"
+                            d="M370 50 L340 50"
                             stroke="#334155"
                             strokeWidth="1.5"
                             fill="none"

calc_sri_fix.sh

@@ -27,5 +27,16 @@ calculate_sri() {
     rm -f "$temp_file"
 }
 
+calculate_sri "https://unpkg.com/react@18/umd/react.production.min.js"
+calculate_sri "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+calculate_sri "https://unpkg.com/@babel/standalone/babel.min.js"
+calculate_sri "https://cdn.tailwindcss.com"
+calculate_sri "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"
+calculate_sri "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css"
+calculate_sri "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"
+calculate_sri "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"
+calculate_sri "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"
+calculate_sri "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"
+# Google Fonts returns dynamic CSS, SRI might be unstable but we check just in case or skip if needed. User instruction implies to check.
+calculate_sri "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Fraunces:wght@700;900&display=swap"
 calculate_sri "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"
-calculate_sri "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"