Merge pull request #11 from bbeaudry/a11y-keyboard

Make the symbols keyboard accessible
samwho · Apr 20, 2024 · 4f0120d · 4f0120d
2 parents 62f4635 + 403667b
commit 4f0120d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -23,4 +23,4 @@
   </div>
 
   <div class="symbols"></div>
-</body>
+</body>
diff --git a/symbols.js b/symbols.js
@@ -266,9 +266,11 @@ function renderSymbols(searchTerm) {
         }
         const elem = document.createElement("div");
         elem.classList = "symbol";
+        elem.tabIndex = 0;
         elem.textContent = symbolInfo.display || symbolInfo.glyph;
         elem.title = symbolInfo.name;
-        elem.addEventListener("click", () => {
+
+        const handleAction = () => {
             if (elem.classList.contains("symbol-clicked")) return;
 
             navigator.clipboard.writeText(symbolInfo.glyph);
@@ -283,6 +285,14 @@ function renderSymbols(searchTerm) {
                 elem.classList.remove("symbol-clicked");
                 elem.classList.add("symbol");
             }, 1000);
+        }
+        elem.addEventListener("click", handleAction);
+
+        elem.addEventListener("keydown", (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                handleAction();
+            }
         });
         parent.appendChild(elem);
     }