fix: world Emoji Day logo styles & annotations

app/components/Noodle/EmojiDay/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex w-full">
+  <div class="relative flex w-full" role="img" :aria-label="$t('alt_logo')">
     <ThemedLogo v-if="colorMode.value === 'dark'" :emojiSets="darkTheme" />
     <ThemedLogo v-else :emojiSets="lightTheme" />
   </div>

app/components/Noodle/EmojiDay/ThemedLogo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="sizer" class="sizer w-full sm:w-[540px] md:w-[640px] lg:w-[900px]"></div>
+  <div ref="sizer" class="sizer w-full sm:w-[540px] md:w-[640px] lg:w-[900px]" aria-hidden="true" />
 </template>
 
 <style>

app/components/Noodle/EmojiDay/emoji-thing.js

@@ -117,6 +117,7 @@ export function init(sizer, emojiSetImages) {
     'width': `${VIEW_WIDTH}px`,
     'height': `${VIEW_HEIGHT}px`,
     'transform-origin': '0 0',
+    'touch-action': 'pinch-zoom',
   })
   sizer.appendChild(area)
 
@@ -139,11 +140,15 @@ export function init(sizer, emojiSetImages) {
       y: ((event.clientY - rect.top) / rect.height) * VIEW_HEIGHT,
     }
   }
-  area.addEventListener('pointerenter', onPointerMove)
-  area.addEventListener('pointermove', onPointerMove)
-  area.addEventListener('pointerout', () => {
-    pointer = undefined
-  })
+  area.addEventListener('pointerenter', onPointerMove, { passive: true })
+  area.addEventListener('pointermove', onPointerMove, { passive: true })
+  area.addEventListener(
+    'pointerout',
+    () => {
+      pointer = undefined
+    },
+    { passive: true },
+  )
 
   const emojiSets = new Map(
     Object.entries(emojiSetImages).map(([name, image]) => {
@@ -170,6 +175,8 @@ export function init(sizer, emojiSetImages) {
               top: `-${size / 2}px`,
               width: `${size}px`,
               height: `${size}px`,
+              pointerEvents: 'none',
+              userSelect: 'none',
             })
 
             const ctx = sprite.getContext('2d')