Stowage/cpython
2
0
Fork 0
mirror of https://github.com/python/cpython.git synced 2025-12-31 04:23:37 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Stan Ulbrych 2025-12-11 21:58:09 +00:00 • committed by GitHub
parent 2eca80ffab
commit b1c9582ebe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 13 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Lib/profiling/sampling/_heatmap_assets/heatmap.css
View file

@ -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;

6
Lib/profiling/sampling/_heatmap_assets/heatmap.js
View file

@ -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

6
Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
View file

@ -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>

1
Lib/profiling/sampling/_shared_assets/base.css
View file

@ -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;