Refactor mention popup to use the popover API and focusable buttons for keyboard nav

Author: captainbrosset

opaque-range/index.html

@@ -47,12 +47,12 @@ <h3>Input</h3>
       <input type="text" id="input-popup" placeholder="Type : to show the emoji picker...">
     </div>
 
-    <div id="mention-popup" class="popup" hidden>
+    <div id="mention-popup" class="popup" popover>
       <ul>
-        <li data-emoji="👍">👍 thumbs up</li>
-        <li data-emoji="❤️">❤️ heart</li>
-        <li data-emoji="😂">😂 laugh</li>
-        <li data-emoji="🎉">🎉 celebrate</li>
+        <li data-emoji="👍"><button>👍 thumbs up</button></li>
+        <li data-emoji="❤️"><button>❤️ heart</button></li>
+        <li data-emoji="😂"><button>😂 laugh</button></li>
+        <li data-emoji="🎉"><button>🎉 celebrate</button></li>
       </ul>
     </div>
   </section>

opaque-range/script.js

@@ -31,12 +31,12 @@ function showMentionPopup(element) {
 
   mentionPopup.style.left = `${rect.left}px`;
   mentionPopup.style.top = `${rect.bottom + 4}px`;
-  mentionPopup.hidden = false;
+  mentionPopup.showPopover({ source: element });
   mentionTriggerField = element;
 }
 
 function hideMentionPopup() {
-  mentionPopup.hidden = true;
+  mentionPopup.hidePopover();
   mentionTriggerField = null;
 }
 

opaque-range/style.css

@@ -109,7 +109,7 @@ input[type="text"]:focus {
 /* Mention popup */
 .popup {
   position: fixed;
-  z-index: 1000;
+  margin: 0;
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 6px;
@@ -120,16 +120,24 @@ input[type="text"]:focus {
 .popup ul {
   list-style: none;
   margin: 0;
-  padding: 0.25rem 0;
+  padding: 0;
 }
 
-.popup li {
+.popup button {
+  display: block;
+  width: 100%;
+  text-align: start;
+  border-radius: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  font-family: inherit;
   padding: 0.4rem 0.75rem;
   cursor: pointer;
   font-size: 0.95rem;
 }
 
-.popup li:hover {
+.popup button:hover {
   background: #e8f0fe;
 }