Skip to content

gh-138122: Tachyon heatmap: Make toggle switches keyboard accessible #142601

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
savannahostrowski merged 2 commits into from
Dec 11, 2025
Merged

gh-138122: Tachyon heatmap: Make toggle switches keyboard accessible #142601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2124217
Make toggle switches keyboard accessible
StanFromIreland Dec 11, 2025
6a8677b
Merge branch 'main' into heapmap-acces
StanFromIreland Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions Lib/profiling/sampling/_heatmap_assets/heatmap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -682,6 +682,10 @@
opacity: 0.85;
}

.toggle-switch:focus-visible {
border-radius: 4px;
}

.toggle-switch .toggle-label {
font-size: 11px;
font-weight: 500;
Expand Down
6 changes: 5 additions & 1 deletion Lib/profiling/sampling/_heatmap_assets/heatmap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -733,14 +733,18 @@ 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;
}
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
Expand Down
6 changes: 3 additions & 3 deletions Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions Lib/profiling/sampling/_shared_assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,7 @@ body {
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;
Expand Down
Loading