Switching to a proper emojii picker

index.html

@@ -57,21 +57,11 @@
             role="button"
             tabindex="0"
             aria-label="Current emoji — click to change"
+            aria-expanded="false"
           >
             <span id="emoji-show">💬</span>
           </div>
-          <input
-            type="text"
-            id="emoji-input"
-            class="emoji-picker-input"
-            placeholder="Type or paste an emoji…"
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="none"
-            spellcheck="false"
-            aria-label="Emoji input"
-          />
-          <span class="emoji-hint" id="emoji-hint">Click to change emoji</span>
+          <emoji-picker id="emoji-picker"></emoji-picker>
         </div>
 
         <!-- Status text -->
@@ -269,6 +259,7 @@
       </div>
     </div>
 
+    <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
     <script src="script.js"></script>
   </body>
 </html>