Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

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 4 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 6 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 6 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 1 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
Morty Proxy This is a proxified and sanitized view of the page, visit original site.