fix issues

packages/docs/badge.pug

@@ -1,12 +1,9 @@
 mixin badge(name, text)
-    svg(xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='20' role='img' aria-label='#{name}: #{text}')
+    svg(xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='20' role='img' aria-label=name + ': ' + text)
         title #{name}: #{text}
-        clippath#r
-            rect(width='80' height='20' fill='#fff')
-        g(clip-path='url(#r)')
+        g
             rect(width='35' height='20' fill='#555')
             rect(x='35' width='45' height='20' fill='black' class="background")
-            rect(width='80' height='20' fill='url(#s)')
         g(fill='#fff' text-anchor='middle' font-family='Verdana,Geneva,DejaVu Sans,sans-serif' text-rendering='geometricPrecision' font-size='110')
             text(aria-hidden='true' x='185' y='150' fill='#010101' fill-opacity='.3' transform='scale(.1)' textlength='250') #{name}
             text(x='185' y='140' transform='scale(.1)' fill='#fff' textlength='250') #{name}

packages/docs/index.js

@@ -21,8 +21,8 @@ mode.subscribe((v) => {
     (el) =>
       (el.querySelector('.label').innerHTML =
         v === 'dark'
-          ? '<img class="emoji" src="moon.png"> Dark'
-          : '<img class="emoji" src="sun.png"> Light'),
+          ? '<img class="emoji" src="moon.png" alt=""> Dark'
+          : '<img class="emoji" src="sun.png" alt=""> Light'),
   )
   changeFavicon(v === 'dark' ? 'moon.png' : 'sun.png')
 })

packages/docs/index.pug

@@ -19,9 +19,9 @@ html
         - var outline = ['focus:outline-none focus:shadow-outline focus:border-yellow-300']
         div.container.px-3.mb-3
             div.header.flex.items-center.mb-3.justify-between.flex-col(class="md:flex-row md:my-6")
-                h1.mb-3.text-3xl(class="md:mb-0 md:text-4xl") <img class="emoji" src="moon.png"><img class="emoji" src="sun.png"> Perfect Dark Mode
+                h1.mb-3.text-3xl(class="md:mb-0 md:text-4xl") <img class="emoji" src="moon.png" alt=""><img class="emoji" src="sun.png" alt=""> Perfect Dark Mode
                 button.rounded-sm.toggle.flex.flex-col.items-center(style="visibility: hidden;" class=outline)
-                    span.label <img class="emoji" src="sun.png"> color mode
+                    span.label <img class="emoji" src="sun.png" alt=""> color mode
                     span.text-xs (Click Me)
 
             div.flex.space-x-2.justify-center(class="md:justify-start")
@@ -53,7 +53,7 @@ html
             // their system color mode.
             p You can set the color mode, this will be saved.
             button.rounded-sm.toggle(style="visibility: hidden;" class=outline)
-                span.label <img class="emoji" src="sun.png"> color mode
+                span.label <img class="emoji" src="sun.png" alt=""> color mode
             p You can reset the color mode and fallback to system color mode.
             button.rounded-sm.reset(class=outline) Reset
             p For debugging and understanding here is the saved color mode and the OS color mode.

packages/docs/simpleBadge.pug

@@ -1,7 +1,7 @@
 mixin simpleBadge(text)
-    svg(xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='20' role='img' aria-label='#{name}: #{text}')
+    svg(xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='20' role='img' aria-label=text)
         title #{text}
-        g(clip-path='url(#r)')
+        g
             rect(width='80' height='20' fill='black' class="background")
         g(fill='#fff' text-anchor='middle' font-family='Verdana,Geneva,DejaVu Sans,sans-serif' text-rendering='geometricPrecision' font-size='110')
             text(aria-hidden='true' x='400' y='150' fill='#010101' fill-opacity='.3' transform='scale(.1)' textlength='350' class="text-shadow") #{text}