HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SVG Interactivity — keyboard</title>
  <style>
    #pulseBtn { cursor: pointer; transition: fill 160ms ease; }
    #pulseBtn:focus-visible { stroke: #0f172a; stroke-width: 4; }
  </style>
</head>
<body>
  <h1>SVG interactivity — keyboard-first button</h1>
  <svg width="200" height="160" viewBox="0 0 200 160">
    <circle id="pulseBtn" cx="100" cy="80" r="42" fill="#8b5cf6"
            tabindex="0" role="button" aria-pressed="false"
            aria-label="Pulse button" />
  </svg>
  <p id="status">Pressed: false</p>
  <script>
    var btn = document.getElementById("pulseBtn");
    var status = document.getElementById("status");
    function activate() {
      var pressed = btn.getAttribute("aria-pressed") === "true";
      btn.setAttribute("aria-pressed", String(!pressed));
      btn.setAttribute("fill", pressed ? "#8b5cf6" : "#22c55e");
      status.textContent = "Pressed: " + (!pressed);
    }
    btn.addEventListener("click", activate);
    btn.addEventListener("keydown", function (e) {
      if (e.key === "Enter" || e.key === " ") { e.preventDefault(); activate(); }
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SVG Interactivity — keyboard button (Try It)