Make flamegraph invert toggle keyboard accessible, add title and stop the toggle moving when swicted

Author: StanFromIreland

Lib/profiling/sampling/_flamegraph_assets/flamegraph.css

@@ -1023,3 +1023,7 @@ body.resizing-sidebar {
   border-color: #8e44ad;
   box-shadow: 0 0 8px rgba(142, 68, 173, 0.3);
 }
+
+.toggle-switch:focus-visible {
+  border-radius: 4px;
+}

Lib/profiling/sampling/_flamegraph_assets/flamegraph.js

@@ -1302,6 +1302,17 @@ function initFlamegraph() {
   }
 }
 
+// Keyboard shortcut: Enter/Space activates toggle switches
+document.addEventListener('keydown', function(e) {
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+        return;
+    }
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.classList.contains('toggle-switch')) {
+        e.preventDefault();
+        e.target.click();
+    }
+});
+
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", initFlamegraph);
 } else {

Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html

@@ -104,10 +104,10 @@
             <!-- View Mode Section -->
             <section class="sidebar-section view-mode-section">
               <h3 class="section-title">View Mode</h3>
-              <div class="toggle-switch" id="toggle-invert">
-                <span class="toggle-label active">Flamegraph</span>
+              <div class="toggle-switch" id="toggle-invert" title="Toggle between standard and inverted flamegraph view" tabindex="0">
+                <span class="toggle-label active" data-text="Flamegraph">Flamegraph</span>
                 <div class="toggle-track"></div>
-                <span class="toggle-label">Inverted Flamegraph</span>
+                <span class="toggle-label" data-text="Inverted Flamegraph">Inverted Flamegraph</span>
               </div>
             </section>