From b1c9582ebe13098195889931bebc274e6997f343 Mon Sep 17 00:00:00 2001
From: Stan Ulbrych <89152624+StanFromIreland@users.noreply.github.com>
Date: Thu, 11 Dec 2025 21:58:09 +0000
Subject: [PATCH] gh-138122: Tachyon heatmap: Make toggle switches keyboard
 accessible (#142601)

---
 Lib/profiling/sampling/_heatmap_assets/heatmap.css          | 4 ++++
 Lib/profiling/sampling/_heatmap_assets/heatmap.js           | 6 +++++-
 .../sampling/_heatmap_assets/heatmap_pyfile_template.html   | 6 +++---
 Lib/profiling/sampling/_shared_assets/base.css              | 1 +
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/Lib/profiling/sampling/_heatmap_assets/heatmap.css b/Lib/profiling/sampling/_heatmap_assets/heatmap.css
index b5aa828c99c..dfb6fd69b40 100644
--- a/Lib/profiling/sampling/_heatmap_assets/heatmap.css
+++ b/Lib/profiling/sampling/_heatmap_assets/heatmap.css
@@ -682,6 +682,10 @@ .toggle-switch:hover {
   opacity: 0.85;
 }
 
+.toggle-switch:focus-visible {
+  border-radius: 4px;
+}
+
 .toggle-switch .toggle-label {
   font-size: 11px;
   font-weight: 500;
diff --git a/Lib/profiling/sampling/_heatmap_assets/heatmap.js b/Lib/profiling/sampling/_heatmap_assets/heatmap.js
index 9cedb2d8469..038aa44b3df 100644
--- a/Lib/profiling/sampling/_heatmap_assets/heatmap.js
+++ b/Lib/profiling/sampling/_heatmap_assets/heatmap.js
@@ -733,7 +733,7 @@ function toggleAllBytecode() {
     }
 }
 
-// Keyboard shortcut: 'b' toggles all bytecode panels
+// Keyboard shortcut: 'b' toggles all bytecode panels, Enter/Space activates toggle switches
 document.addEventListener('keydown', function(e) {
     if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
         return;
@@ -741,6 +741,10 @@ document.addEventListener('keydown', function(e) {
     if (e.key === 'b' && !e.ctrlKey && !e.altKey && !e.metaKey) {
         toggleAllBytecode();
     }
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.classList.contains('toggle-switch')) {
+        e.preventDefault();
+        e.target.click();
+    }
 });
 
 // Handle hash changes
diff --git a/Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html b/Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
index 3d857c49d27..3fb6d3a6b91 100644
--- a/Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
+++ b/Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
@@ -70,17 +70,17 @@
                 </div>
                 <div class="legend-separator" aria-hidden="true"></div>
                 <div class="legend-controls">
-                    <div class="toggle-switch" id="toggle-color-mode" title="Toggle between self time and total time coloring">
+                    <div class="toggle-switch" id="toggle-color-mode" title="Toggle between self time and total time coloring" tabindex="0">
                         <span class="toggle-label active" data-text="Self Time">Self Time</span>
                         <div class="toggle-track"></div>
                         <span class="toggle-label" data-text="Total Time">Total Time</span>
                     </div>
-                    <div class="toggle-switch" id="toggle-cold" title="Toggle visibility of lines with zero samples">
+                    <div class="toggle-switch" id="toggle-cold" title="Toggle visibility of lines with zero samples" tabindex="0">
                         <span class="toggle-label active" data-text="Show All">Show All</span>
                         <div class="toggle-track"></div>
                         <span class="toggle-label" data-text="Hot Only">Hot Only</span>
                     </div>
-                    <div class="toggle-switch" id="toggle-spec-view" title="Color lines by specialization level (requires bytecode data)">
+                    <div class="toggle-switch" id="toggle-spec-view" title="Color lines by specialization level (requires bytecode data)" tabindex="0">
                         <span class="toggle-label active" data-text="Heat">Heat</span>
                         <div class="toggle-track"></div>
                         <span class="toggle-label" data-text="Specialization">Specialization</span>
diff --git a/Lib/profiling/sampling/_shared_assets/base.css b/Lib/profiling/sampling/_shared_assets/base.css
index 46916709f19..c88cf58eef9 100644
--- a/Lib/profiling/sampling/_shared_assets/base.css
+++ b/Lib/profiling/sampling/_shared_assets/base.css
@@ -387,6 +387,7 @@ @keyframes shimmer {
 button:focus-visible,
 select:focus-visible,
 input:focus-visible,
+.toggle-switch:focus-visible,
 a.toolbar-btn:focus-visible {
   outline: 2px solid var(--python-gold);
   outline-offset: 2px;