Make SVG elements have alt text

todo:
- make balloons interactive & accesiable
- fix colours on links for nav

src/assets/hamburger.svg

···
   stroke-linecap="round"
   stroke-linejoin="round"
   class="lucide lucide-menu-icon lucide-menu"
+  title=""
 >
   <title><!-- no alt text as used for buttons --></title>
   <path d="M4 12h16" />

src/assets/x.svg

···
   stroke-linecap="round"
   stroke-linejoin="round"
   class="lucide lucide-x-icon lucide-x"
+  title=""
 >
   <title><!-- no alt text as used for buttons --></title>
   <path d="M18 6 6 18" />

src/components/blog/background/Cloud.astro

···
 
 const vectorOffset = (
   v: [number, number],
-  o: [number, number],
+  o: [number, number]
 ): [number, number] => {
   return [o[0] - v[0], o[1] - v[1]];
 };
···
 <svg
   viewBox={`-${blog.background.clouds.bumpRadius[1]} -${blog.background.clouds.bumpRadius[1]} ${2 * (r + blog.background.clouds.bumpRadius[1])} ${r + blog.background.clouds.bumpRadius[1]}`}
   preserveAspectRatio="none"
-  aria-label=""
-  role="img"
   {...Astro.props}
 >
   <title></title>
···
                 ];
                 const newDistance = Math.sqrt(
                   (newCenter[0] - p.origin[0]) ** 2 +
-                    (newCenter[1] - p.origin[1]) ** 2,
+                    (newCenter[1] - p.origin[1]) ** 2
                 );
                 return {
                   origin: vectorOffset(vector(ang, c), p.origin),
···
               prev: 0,
               output: [] as any[],
               complete: false,
-            },
+            }
           ).output
       }
       <circle cx={r} cy={r} r={r}></circle>

src/components/blog/background/Clouds.astro

···
                       top: ${y}rem;
                       left: calc(${x} * 200lvw - 100lvw);
                       position: absolute;`}
-              role="img"
               id={"cloud-" + i}
               data-parallax
-              aria-label=""
+              title=""
             />,
           ],
         };

src/components/blog/background/Moon.astro

···
   height="100"
   style={`--parallax-speed: ${blog.background.parallax.moon}`}
   data-parallax
-  role="img"
-  aria-label=""
+  title=""
 >
   <title></title>
   <defs>

src/components/blog/background/Stars.astro

···
       const prongs = Math.round(
         blog.background.stars.prongs[0] +
           Math.random() *
-            (blog.background.stars.prongs[1] - blog.background.stars.prongs[0]),
+            (blog.background.stars.prongs[1] - blog.background.stars.prongs[0])
       );
 
       return (
···
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 100 100"
-          role="img"
-          aria-label=""
+          title=""
         >
           <title />
           {new Array(prongs).fill(0).map((_, i) => (

src/components/blog/background/Sun.astro

···
   viewBox="0 0 100 100"
   style={`--parallax-speed: ${blog.background.parallax.sun};
           --sun-progress-percent: ${percent}`}
+  title=""
   data-parallax
-  role="img"
-  aria-label=""
 >
   <title></title>
   <circle style="fill:#ffff00" cx="50" cy="50" r="35"></circle>

src/components/generic/Nav.astro

···
 ---
 
 <button popovertarget="nav" popovertargetaction="show" aria-label="Nav Menu">
-  <Hamburger role="img" />
+  <Hamburger />
 </button>
 <dialog closedby="any" open={startOpen} id="nav" popover>
   <div class="top">
     <h1>{current}</h1>
     <button popovertarget="nav" popovertargetaction="hide" aria-label="close">
-      <X width={32} height={32} role="img" />
+      <X width={32} height={32} />
     </button>
   </div>
   <NavEntry {data} />