Skip to content

feat: Improve keyboard navigation of modebar (by @davidangarita1) - #7492

Merged
emilykl merged 22 commits into
masterfrom
david-enhancement-modebar-emilykl
Jul 25, 2025
Merged

feat: Improve keyboard navigation of modebar (by @davidangarita1)#7492
emilykl merged 22 commits into
masterfrom
david-enhancement-modebar-emilykl

Conversation

@emilykl

@emilyklemilykl commented Jul 23, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

Closes#6940

Continuation of #7429

Pull request to improve accessibility for the modebar.
This makes the modebar tab-able so that people using special interfaces can interact with the graph. Some functions require a mouse, but not all do.

  • Tab key cycles through modebar buttons
  • Enter/space key simulates clicking selected button

davidangarita1and others added 20 commits May 28, 2025 15:50
@davidangarita1
Add role="toolbar" to enhance accessibility semantics
54d1253
@davidangarita1
Add tabindex="0" to buttons
318530e
@davidangarita1
Add custom CSS class "modebar--custom"
ebb7b12
@davidangarita1
Add aria label
8748342
@davidangarita1
Add modebar tabindex 0
fd9ad69
@davidangarita1
Add listener of Intro key for Modebar buttons
e2c6615
@davidangarita1
Move button listener
a2fa286
@davidangarita1
Add style for focus in modebar
06d3d1f
@davidangarita1
Change "a" tag for "button" tag
e557ee1
@davidangarita1
Add styles for focus in button
9386b15
@davidangarita1
Change the indentation to the correct format
6dc49c9
@davidangarita1
Update build
905cab1
@davidangarita1
Fix scss indentation
363a873
@davidangarita1
Remove unnecessary js for the button
165dffe
@davidangarita1
Fix indentation for spaces
904e64a
@davidangarita1
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
605c627
…odebar
@davidangarita1
Re-add deleted files from dist
663dbf1
@ayjayt
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
b17b7f0
…odebar
@emilykl
Merge branch 'master' into david-enhancement-modebar-emilykl
0f7e1e5
@emilykl
update jasmine tests
dbd4594
@archmojarchmoj added the community community contribution label Jul 24, 2025
archmoj
archmoj approved these changes Jul 25, 2025
View reviewed changes

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent PR.
Please add a draft log and thank @davidangarita1.
💃

@emilyklemilykl changed the title Improve keyboard navigation of modebar (by @davidangarita1)feat: Improve keyboard navigation of modebar (by @davidangarita1)Jul 25, 2025
@emilykl
emilykl merged commit 0bc4794 into masterJul 25, 2025
6 checks passed
@emilyklemilykl mentioned this pull request Aug 28, 2026
Closed
@emilyklemilykl mentioned this pull request Aug 30, 2026
Closed
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@camdecostercamdecosterAwaiting requested review from camdecoster
@gvwilsongvwilsonAwaiting requested review from gvwilson
1 more reviewer
@archmojarchmojarchmoj approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

communitycommunity contribution

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

mode bar is not accessible using a keyboard

4 participants

@emilykl@archmoj@davidangarita1@ayjayt
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
feat: Improve keyboard navigation of modebar (by @davidangarita1) by emilykl · Pull Request #7492 · plotly/plotly.js · GitHub
Skip to content
feat: Improve keyboard navigation of modebar (by @davidangarita1) - #7492
Merged
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Jul 25, 2025
Merged
feat: Improve keyboard navigation of modebar (by @davidangarita1)#7492
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Conversation
@emilykl
@emilyklemilykl
commented
Jul 23, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#6940
Continuation of #7429
Pull request to improve accessibility for the modebar.

This makes the modebar tab-able so that people using special interfaces can interact with the graph. Some functions require a mouse, but not all do.
  • Tab key cycles through modebar buttons
  • Enter/space key simulates clicking selected button
davidangarita1and others
added 20 commits
May 28, 2025 15:50
@davidangarita1
Add role="toolbar" to enhance accessibility semantics
54d1253
@davidangarita1
Add tabindex="0" to buttons
318530e
@davidangarita1
Add custom CSS class "modebar--custom"
ebb7b12
@davidangarita1
Add aria label
8748342
@davidangarita1
Add modebar tabindex 0
fd9ad69
@davidangarita1
Add listener of Intro key for Modebar buttons
e2c6615
@davidangarita1
Move button listener
a2fa286
@davidangarita1
Add style for focus in modebar
06d3d1f
@davidangarita1
Change "a" tag for "button" tag
e557ee1
@davidangarita1
Add styles for focus in button
9386b15
@davidangarita1
Change the indentation to the correct format
6dc49c9
@davidangarita1
Update build
905cab1
@davidangarita1
Fix scss indentation
363a873
@davidangarita1
Remove unnecessary js for the button
165dffe
@davidangarita1
Fix indentation for spaces
904e64a
@davidangarita1
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
605c627
…odebar
@davidangarita1
Re-add deleted files from dist
663dbf1
@ayjayt
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
b17b7f0
…odebar
@emilykl
Merge branch 'master' into david-enhancement-modebar-emilykl
0f7e1e5
@emilykl
update jasmine tests
dbd4594
@archmojarchmoj
added
the 
community
community contribution
label
Jul 24, 2025
archmoj
archmoj
approved these changes
Jul 25, 2025
View reviewed changes
@archmojarchmoj
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent PR.

Please add a draft log and thank @davidangarita1.

💃
@emilyklemilykl
changed the title
Improve keyboard navigation of modebar (by @davidangarita1)feat: Improve keyboard navigation of modebar (by @davidangarita1)Jul 25, 2025
@emilykl
emilykl
merged commit 0bc4794
into
masterJul 25, 2025

6 checks passed

@emilyklemilykl
mentioned this pull request
Aug 28, 2026

Closed

@emilyklemilykl
mentioned this pull request
Aug 30, 2026

Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@camdecostercamdecosterAwaiting requested review from camdecoster
@gvwilsongvwilsonAwaiting requested review from gvwilson

1 more reviewer

@archmojarchmojarchmoj approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

communitycommunity contribution

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

mode bar is not accessible using a keyboard


4 participants

@emilykl@archmoj@davidangarita1@ayjayt

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat: Improve keyboard navigation of modebar (by @davidangarita1) by emilykl · Pull Request #7492 · plotly/plotly.js · GitHub
Skip to content
feat: Improve keyboard navigation of modebar (by @davidangarita1) - #7492
Merged
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Jul 25, 2025
Merged
feat: Improve keyboard navigation of modebar (by @davidangarita1)#7492
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Conversation
@emilykl
@emilyklemilykl
commented
Jul 23, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#6940
Continuation of #7429
Pull request to improve accessibility for the modebar.

This makes the modebar tab-able so that people using special interfaces can interact with the graph. Some functions require a mouse, but not all do.
  • Tab key cycles through modebar buttons
  • Enter/space key simulates clicking selected button
davidangarita1and others
added 20 commits
May 28, 2025 15:50
@davidangarita1
Add role="toolbar" to enhance accessibility semantics
54d1253
@davidangarita1
Add tabindex="0" to buttons
318530e
@davidangarita1
Add custom CSS class "modebar--custom"
ebb7b12
@davidangarita1
Add aria label
8748342
@davidangarita1
Add modebar tabindex 0
fd9ad69
@davidangarita1
Add listener of Intro key for Modebar buttons
e2c6615
@davidangarita1
Move button listener
a2fa286
@davidangarita1
Add style for focus in modebar
06d3d1f
@davidangarita1
Change "a" tag for "button" tag
e557ee1
@davidangarita1
Add styles for focus in button
9386b15
@davidangarita1
Change the indentation to the correct format
6dc49c9
@davidangarita1
Update build
905cab1
@davidangarita1
Fix scss indentation
363a873
@davidangarita1
Remove unnecessary js for the button
165dffe
@davidangarita1
Fix indentation for spaces
904e64a
@davidangarita1
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
605c627
…odebar
@davidangarita1
Re-add deleted files from dist
663dbf1
@ayjayt
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
b17b7f0
…odebar
@emilykl
Merge branch 'master' into david-enhancement-modebar-emilykl
0f7e1e5
@emilykl
update jasmine tests
dbd4594
@archmojarchmoj
added
the 
community
community contribution
label
Jul 24, 2025
archmoj
archmoj
approved these changes
Jul 25, 2025
View reviewed changes
@archmojarchmoj
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent PR.

Please add a draft log and thank @davidangarita1.

💃
@emilyklemilykl
changed the title
Improve keyboard navigation of modebar (by @davidangarita1)feat: Improve keyboard navigation of modebar (by @davidangarita1)Jul 25, 2025
@emilykl
emilykl
merged commit 0bc4794
into
masterJul 25, 2025

6 checks passed

@emilyklemilykl
mentioned this pull request
Aug 28, 2026

Closed

@emilyklemilykl
mentioned this pull request
Aug 30, 2026

Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@camdecostercamdecosterAwaiting requested review from camdecoster
@gvwilsongvwilsonAwaiting requested review from gvwilson

1 more reviewer

@archmojarchmojarchmoj approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

communitycommunity contribution

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

mode bar is not accessible using a keyboard


4 participants

@emilykl@archmoj@davidangarita1@ayjayt

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat: Improve keyboard navigation of modebar (by @davidangarita1) by emilykl · Pull Request #7492 · plotly/plotly.js · GitHub
Skip to content
feat: Improve keyboard navigation of modebar (by @davidangarita1) - #7492
Merged
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Jul 25, 2025
Merged
feat: Improve keyboard navigation of modebar (by @davidangarita1)#7492
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Conversation
@emilykl
@emilyklemilykl
commented
Jul 23, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#6940
Continuation of #7429
Pull request to improve accessibility for the modebar.

This makes the modebar tab-able so that people using special interfaces can interact with the graph. Some functions require a mouse, but not all do.
  • Tab key cycles through modebar buttons
  • Enter/space key simulates clicking selected button
davidangarita1and others
added 20 commits
May 28, 2025 15:50
@davidangarita1
Add role="toolbar" to enhance accessibility semantics
54d1253
@davidangarita1
Add tabindex="0" to buttons
318530e
@davidangarita1
Add custom CSS class "modebar--custom"
ebb7b12
@davidangarita1
Add aria label
8748342
@davidangarita1
Add modebar tabindex 0
fd9ad69
@davidangarita1
Add listener of Intro key for Modebar buttons
e2c6615
@davidangarita1
Move button listener
a2fa286
@davidangarita1
Add style for focus in modebar
06d3d1f
@davidangarita1
Change "a" tag for "button" tag
e557ee1
@davidangarita1
Add styles for focus in button
9386b15
@davidangarita1
Change the indentation to the correct format
6dc49c9
@davidangarita1
Update build
905cab1
@davidangarita1
Fix scss indentation
363a873
@davidangarita1
Remove unnecessary js for the button
165dffe
@davidangarita1
Fix indentation for spaces
904e64a
@davidangarita1
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
605c627
…odebar
@davidangarita1
Re-add deleted files from dist
663dbf1
@ayjayt
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
b17b7f0
…odebar
@emilykl
Merge branch 'master' into david-enhancement-modebar-emilykl
0f7e1e5
@emilykl
update jasmine tests
dbd4594
@archmojarchmoj
added
the 
community
community contribution
label
Jul 24, 2025
archmoj
archmoj
approved these changes
Jul 25, 2025
View reviewed changes
@archmojarchmoj
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent PR.

Please add a draft log and thank @davidangarita1.

💃
@emilyklemilykl
changed the title
Improve keyboard navigation of modebar (by @davidangarita1)feat: Improve keyboard navigation of modebar (by @davidangarita1)Jul 25, 2025
@emilykl
emilykl
merged commit 0bc4794
into
masterJul 25, 2025

6 checks passed

@emilyklemilykl
mentioned this pull request
Aug 28, 2026

Closed

@emilyklemilykl
mentioned this pull request
Aug 30, 2026

Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@camdecostercamdecosterAwaiting requested review from camdecoster
@gvwilsongvwilsonAwaiting requested review from gvwilson

1 more reviewer

@archmojarchmojarchmoj approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

communitycommunity contribution

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

mode bar is not accessible using a keyboard


4 participants

@emilykl@archmoj@davidangarita1@ayjayt

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
feat: Improve keyboard navigation of modebar (by @davidangarita1) by emilykl · Pull Request #7492 · plotly/plotly.js · GitHub
Skip to content
feat: Improve keyboard navigation of modebar (by @davidangarita1) - #7492
Merged
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Jul 25, 2025
Merged
feat: Improve keyboard navigation of modebar (by @davidangarita1)#7492
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Conversation
@emilykl
@emilyklemilykl
commented
Jul 23, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#6940
Continuation of #7429
Pull request to improve accessibility for the modebar.

This makes the modebar tab-able so that people using special interfaces can interact with the graph. Some functions require a mouse, but not all do.
  • Tab key cycles through modebar buttons
  • Enter/space key simulates clicking selected button
davidangarita1and others
added 20 commits
May 28, 2025 15:50
@davidangarita1
Add role="toolbar" to enhance accessibility semantics
54d1253
@davidangarita1
Add tabindex="0" to buttons
318530e
@davidangarita1
Add custom CSS class "modebar--custom"
ebb7b12
@davidangarita1
Add aria label
8748342
@davidangarita1
Add modebar tabindex 0
fd9ad69
@davidangarita1
Add listener of Intro key for Modebar buttons
e2c6615
@davidangarita1
Move button listener
a2fa286
@davidangarita1
Add style for focus in modebar
06d3d1f
@davidangarita1
Change "a" tag for "button" tag
e557ee1
@davidangarita1
Add styles for focus in button
9386b15
@davidangarita1
Change the indentation to the correct format
6dc49c9
@davidangarita1
Update build
905cab1
@davidangarita1
Fix scss indentation
363a873
@davidangarita1
Remove unnecessary js for the button
165dffe
@davidangarita1
Fix indentation for spaces
904e64a
@davidangarita1
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
605c627
…odebar
@davidangarita1
Re-add deleted files from dist
663dbf1
@ayjayt
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
b17b7f0
…odebar
@emilykl
Merge branch 'master' into david-enhancement-modebar-emilykl
0f7e1e5
@emilykl
update jasmine tests
dbd4594
@archmojarchmoj
added
the 
community
community contribution
label
Jul 24, 2025
archmoj
archmoj
approved these changes
Jul 25, 2025
View reviewed changes
@archmojarchmoj
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent PR.

Please add a draft log and thank @davidangarita1.

💃
@emilyklemilykl
changed the title
Improve keyboard navigation of modebar (by @davidangarita1)feat: Improve keyboard navigation of modebar (by @davidangarita1)Jul 25, 2025
@emilykl
emilykl
merged commit 0bc4794
into
masterJul 25, 2025

6 checks passed

@emilyklemilykl
mentioned this pull request
Aug 28, 2026

Closed

@emilyklemilykl
mentioned this pull request
Aug 30, 2026

Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@camdecostercamdecosterAwaiting requested review from camdecoster
@gvwilsongvwilsonAwaiting requested review from gvwilson

1 more reviewer

@archmojarchmojarchmoj approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

communitycommunity contribution

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

mode bar is not accessible using a keyboard


4 participants

@emilykl@archmoj@davidangarita1@ayjayt

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat: Improve keyboard navigation of modebar (by @davidangarita1) by emilykl · Pull Request #7492 · plotly/plotly.js · GitHub
Skip to content
feat: Improve keyboard navigation of modebar (by @davidangarita1) - #7492
Merged
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Jul 25, 2025
Merged
feat: Improve keyboard navigation of modebar (by @davidangarita1)#7492
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Conversation
@emilykl
@emilyklemilykl
commented
Jul 23, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#6940
Continuation of #7429
Pull request to improve accessibility for the modebar.

This makes the modebar tab-able so that people using special interfaces can interact with the graph. Some functions require a mouse, but not all do.
  • Tab key cycles through modebar buttons
  • Enter/space key simulates clicking selected button
davidangarita1and others
added 20 commits
May 28, 2025 15:50
@davidangarita1
Add role="toolbar" to enhance accessibility semantics
54d1253
@davidangarita1
Add tabindex="0" to buttons
318530e
@davidangarita1
Add custom CSS class "modebar--custom"
ebb7b12
@davidangarita1
Add aria label
8748342
@davidangarita1
Add modebar tabindex 0
fd9ad69
@davidangarita1
Add listener of Intro key for Modebar buttons
e2c6615
@davidangarita1
Move button listener
a2fa286
@davidangarita1
Add style for focus in modebar
06d3d1f
@davidangarita1
Change "a" tag for "button" tag
e557ee1
@davidangarita1
Add styles for focus in button
9386b15
@davidangarita1
Change the indentation to the correct format
6dc49c9
@davidangarita1
Update build
905cab1
@davidangarita1
Fix scss indentation
363a873
@davidangarita1
Remove unnecessary js for the button
165dffe
@davidangarita1
Fix indentation for spaces
904e64a
@davidangarita1
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
605c627
…odebar
@davidangarita1
Re-add deleted files from dist
663dbf1
@ayjayt
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
b17b7f0
…odebar
@emilykl
Merge branch 'master' into david-enhancement-modebar-emilykl
0f7e1e5
@emilykl
update jasmine tests
dbd4594
@archmojarchmoj
added
the 
community
community contribution
label
Jul 24, 2025
archmoj
archmoj
approved these changes
Jul 25, 2025
View reviewed changes
@archmojarchmoj
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent PR.

Please add a draft log and thank @davidangarita1.

💃
@emilyklemilykl
changed the title
Improve keyboard navigation of modebar (by @davidangarita1)feat: Improve keyboard navigation of modebar (by @davidangarita1)Jul 25, 2025
@emilykl
emilykl
merged commit 0bc4794
into
masterJul 25, 2025

6 checks passed

@emilyklemilykl
mentioned this pull request
Aug 28, 2026

Closed

@emilyklemilykl
mentioned this pull request
Aug 30, 2026

Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@camdecostercamdecosterAwaiting requested review from camdecoster
@gvwilsongvwilsonAwaiting requested review from gvwilson

1 more reviewer

@archmojarchmojarchmoj approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

communitycommunity contribution

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

mode bar is not accessible using a keyboard


4 participants

@emilykl@archmoj@davidangarita1@ayjayt

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat: Improve keyboard navigation of modebar (by @davidangarita1) by emilykl · Pull Request #7492 · plotly/plotly.js · GitHub
Skip to content
feat: Improve keyboard navigation of modebar (by @davidangarita1) - #7492
Merged
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Jul 25, 2025
Merged
feat: Improve keyboard navigation of modebar (by @davidangarita1)#7492
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Conversation
@emilykl
@emilyklemilykl
commented
Jul 23, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#6940
Continuation of #7429
Pull request to improve accessibility for the modebar.

This makes the modebar tab-able so that people using special interfaces can interact with the graph. Some functions require a mouse, but not all do.
  • Tab key cycles through modebar buttons
  • Enter/space key simulates clicking selected button
davidangarita1and others
added 20 commits
May 28, 2025 15:50
@davidangarita1
Add role="toolbar" to enhance accessibility semantics
54d1253
@davidangarita1
Add tabindex="0" to buttons
318530e
@davidangarita1
Add custom CSS class "modebar--custom"
ebb7b12
@davidangarita1
Add aria label
8748342
@davidangarita1
Add modebar tabindex 0
fd9ad69
@davidangarita1
Add listener of Intro key for Modebar buttons
e2c6615
@davidangarita1
Move button listener
a2fa286
@davidangarita1
Add style for focus in modebar
06d3d1f
@davidangarita1
Change "a" tag for "button" tag
e557ee1
@davidangarita1
Add styles for focus in button
9386b15
@davidangarita1
Change the indentation to the correct format
6dc49c9
@davidangarita1
Update build
905cab1
@davidangarita1
Fix scss indentation
363a873
@davidangarita1
Remove unnecessary js for the button
165dffe
@davidangarita1
Fix indentation for spaces
904e64a
@davidangarita1
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
605c627
…odebar
@davidangarita1
Re-add deleted files from dist
663dbf1
@ayjayt
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
b17b7f0
…odebar
@emilykl
Merge branch 'master' into david-enhancement-modebar-emilykl
0f7e1e5
@emilykl
update jasmine tests
dbd4594
@archmojarchmoj
added
the 
community
community contribution
label
Jul 24, 2025
archmoj
archmoj
approved these changes
Jul 25, 2025
View reviewed changes
@archmojarchmoj
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent PR.

Please add a draft log and thank @davidangarita1.

💃
@emilyklemilykl
changed the title
Improve keyboard navigation of modebar (by @davidangarita1)feat: Improve keyboard navigation of modebar (by @davidangarita1)Jul 25, 2025
@emilykl
emilykl
merged commit 0bc4794
into
masterJul 25, 2025

6 checks passed

@emilyklemilykl
mentioned this pull request
Aug 28, 2026

Closed

@emilyklemilykl
mentioned this pull request
Aug 30, 2026

Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@camdecostercamdecosterAwaiting requested review from camdecoster
@gvwilsongvwilsonAwaiting requested review from gvwilson

1 more reviewer

@archmojarchmojarchmoj approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

communitycommunity contribution

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

mode bar is not accessible using a keyboard


4 participants

@emilykl@archmoj@davidangarita1@ayjayt

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
feat: Improve keyboard navigation of modebar (by @davidangarita1) by emilykl · Pull Request #7492 · plotly/plotly.js · GitHub
Skip to content
feat: Improve keyboard navigation of modebar (by @davidangarita1) - #7492
Merged
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Jul 25, 2025
Merged
feat: Improve keyboard navigation of modebar (by @davidangarita1)#7492
emilykl merged 22 commits into
masterfrom 
david-enhancement-modebar-emilykl
Conversation
@emilykl
@emilyklemilykl
commented
Jul 23, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#6940
Continuation of #7429
Pull request to improve accessibility for the modebar.

This makes the modebar tab-able so that people using special interfaces can interact with the graph. Some functions require a mouse, but not all do.
  • Tab key cycles through modebar buttons
  • Enter/space key simulates clicking selected button
davidangarita1and others
added 20 commits
May 28, 2025 15:50
@davidangarita1
Add role="toolbar" to enhance accessibility semantics
54d1253
@davidangarita1
Add tabindex="0" to buttons
318530e
@davidangarita1
Add custom CSS class "modebar--custom"
ebb7b12
@davidangarita1
Add aria label
8748342
@davidangarita1
Add modebar tabindex 0
fd9ad69
@davidangarita1
Add listener of Intro key for Modebar buttons
e2c6615
@davidangarita1
Move button listener
a2fa286
@davidangarita1
Add style for focus in modebar
06d3d1f
@davidangarita1
Change "a" tag for "button" tag
e557ee1
@davidangarita1
Add styles for focus in button
9386b15
@davidangarita1
Change the indentation to the correct format
6dc49c9
@davidangarita1
Update build
905cab1
@davidangarita1
Fix scss indentation
363a873
@davidangarita1
Remove unnecessary js for the button
165dffe
@davidangarita1
Fix indentation for spaces
904e64a
@davidangarita1
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
605c627
…odebar
@davidangarita1
Re-add deleted files from dist
663dbf1
@ayjayt
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
b17b7f0
…odebar
@emilykl
Merge branch 'master' into david-enhancement-modebar-emilykl
0f7e1e5
@emilykl
update jasmine tests
dbd4594
@archmojarchmoj
added
the 
community
community contribution
label
Jul 24, 2025
archmoj
archmoj
approved these changes
Jul 25, 2025
View reviewed changes
@archmojarchmoj
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent PR.

Please add a draft log and thank @davidangarita1.

💃
@emilyklemilykl
changed the title
Improve keyboard navigation of modebar (by @davidangarita1)feat: Improve keyboard navigation of modebar (by @davidangarita1)Jul 25, 2025
@emilykl
emilykl
merged commit 0bc4794
into
masterJul 25, 2025

6 checks passed

@emilyklemilykl
mentioned this pull request
Aug 28, 2026

Closed

@emilyklemilykl
mentioned this pull request
Aug 30, 2026

Closed

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@camdecostercamdecosterAwaiting requested review from camdecoster
@gvwilsongvwilsonAwaiting requested review from gvwilson

1 more reviewer

@archmojarchmojarchmoj approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

communitycommunity contribution

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

mode bar is not accessible using a keyboard


4 participants

@emilykl@archmoj@davidangarita1@ayjayt