Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Added data-* and aria-* attributes - #40

Merged
chriddyp merged 2 commits into
plotly:masterfrom
rmarren1:data-star
Apr 23, 2018
Merged

Added data-* and aria-* attributes#40
chriddyp merged 2 commits into
plotly:masterfrom
rmarren1:data-star

Conversation

@rmarren1

@rmarren1rmarren1 commented Mar 30, 2018

Copy link
Copy Markdown
Contributor

@rmarren1rmarren1 mentioned this pull request Apr 2, 2018
Closed
chriddyp
chriddyp reviewed Apr 3, 2018
View reviewed changes
Comment threadscripts/generate-components.js Outdated
* A wild-card data-* attribute
*/
'data-*': PropTypes.string,

@chriddypchriddypApr 3, 2018

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Let's add aria-* too

@rmarren1rmarren1 changed the title Added data-* attribute to all componentsAdded data-* and aria-* attributesApr 4, 2018
@rmarren1rmarren1 mentioned this pull request Apr 4, 2018
Merged
@ngnpope

ngnpope commented Apr 10, 2018

Copy link
Copy Markdown

Hi @rmarren1,

I've also not been able to use the role attribute with html.A():

TypeError: Unexpected keyword argument `role`

This attribute is required for use with aria-* attributes, so it would be good if it were supported.

@rmarren1

rmarren1 commented Apr 10, 2018

Copy link
Copy Markdown
ContributorAuthor

Are there any elements where role should not be allowed? It is does not appear in https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes which is why it is currently not supported, but it could be hard-coded into the generation script if it applies to all components.

@ngnpope

ngnpope commented Apr 10, 2018

Copy link
Copy Markdown

Can be applied to any element:

Other documents of interest:

Hard-coding this seems sensible if that is already being done for aria-* as part of this PR.

For background, I bumped into this because of using Bootstrap which requires data-* for some of the scripted components. Have worked around the issue in the meantime client-side by using a mutation observer and adding the attributes as the elements appear.

@rmarren1

rmarren1 commented Apr 10, 2018

Copy link
Copy Markdown
ContributorAuthor

added role

@ngnpope

ngnpope commented Apr 10, 2018

Copy link
Copy Markdown

Thanks!

@chriddyp

chriddyp commented Apr 11, 2018

Copy link
Copy Markdown
Member

@rmarren1 - I'm 👍 with these changes. Is there anything else that you would like to add? Otherwise, I will merge and release.

@rmarren1

rmarren1 commented Apr 11, 2018

Copy link
Copy Markdown
ContributorAuthor

I'm good with it, go ahead!

@chriddyp
chriddyp merged commit 9aa7c8f into plotly:masterApr 23, 2018
@cpsievertcpsievert mentioned this pull request Apr 24, 2018
Closed
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer
@chriddypchriddypchriddyp left review comments
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@rmarren1@ngnpope@chriddyp
, '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" + '
Added data-* and aria-* attributes by rmarren1 · Pull Request #40 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Added data-* and aria-* attributes - #40
Merged
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Apr 23, 2018
Merged
Added data-* and aria-* attributes#40
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Conversation
@rmarren1
@rmarren1rmarren1
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
@rmarren1rmarren1
mentioned this pull request
Apr 2, 2018

Closed

chriddyp
chriddyp
reviewed
Apr 3, 2018
View reviewed changes
Comment threadscripts/generate-components.js
Outdated

 * A wild-card data-* attribute
 */
 'data-*': PropTypes.string,

@chriddypchriddypApr 3, 2018

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Let's add aria-* too
@rmarren1rmarren1
changed the title
Added data-* attribute to all componentsAdded data-* and aria-* attributesApr 4, 2018
@rmarren1rmarren1
mentioned this pull request
Apr 4, 2018
 Merged

@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Hi @rmarren1,
I've also not been able to use the role attribute with html.A():
TypeError: Unexpected keyword argument `role`

This attribute is required for use with aria-* attributes, so it would be good if it were supported.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
Are there any elements where role should not be allowed? It is does not appear in https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes which is why it is currently not supported, but it could be hard-coded into the generation script if it applies to all components.
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Can be applied to any element:
Other documents of interest:
Hard-coding this seems sensible if that is already being done for aria-* as part of this PR.
For background, I bumped into this because of using Bootstrap which requires data-* for some of the scripted components. Have worked around the issue in the meantime client-side by using a mutation observer and adding the attributes as the elements appear.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
added role
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Thanks!
@chriddyp
chriddyp
commented
Apr 11, 2018

Copy link


Copy Markdown

Member
@rmarren1 - I'm 👍 with these changes. Is there anything else that you would like to add? Otherwise, I will merge and release.
@rmarren1
rmarren1
commented
Apr 11, 2018

Copy link


Copy Markdown

ContributorAuthor
I'm good with it, go ahead!
@chriddyp
chriddyp
merged commit 9aa7c8f
into
plotly:masterApr 23, 2018
@cpsievertcpsievert
mentioned this pull request
Apr 24, 2018

Closed

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


Reviewers


1 more reviewer

@chriddypchriddypchriddyp left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@rmarren1@ngnpope@chriddyp

, '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('^' + ".*" + '
Added data-* and aria-* attributes by rmarren1 · Pull Request #40 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Added data-* and aria-* attributes - #40
Merged
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Apr 23, 2018
Merged
Added data-* and aria-* attributes#40
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Conversation
@rmarren1
@rmarren1rmarren1
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
@rmarren1rmarren1
mentioned this pull request
Apr 2, 2018

Closed

chriddyp
chriddyp
reviewed
Apr 3, 2018
View reviewed changes
Comment threadscripts/generate-components.js
Outdated

 * A wild-card data-* attribute
 */
 'data-*': PropTypes.string,

@chriddypchriddypApr 3, 2018

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Let's add aria-* too
@rmarren1rmarren1
changed the title
Added data-* attribute to all componentsAdded data-* and aria-* attributesApr 4, 2018
@rmarren1rmarren1
mentioned this pull request
Apr 4, 2018
 Merged

@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Hi @rmarren1,
I've also not been able to use the role attribute with html.A():
TypeError: Unexpected keyword argument `role`

This attribute is required for use with aria-* attributes, so it would be good if it were supported.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
Are there any elements where role should not be allowed? It is does not appear in https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes which is why it is currently not supported, but it could be hard-coded into the generation script if it applies to all components.
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Can be applied to any element:
Other documents of interest:
Hard-coding this seems sensible if that is already being done for aria-* as part of this PR.
For background, I bumped into this because of using Bootstrap which requires data-* for some of the scripted components. Have worked around the issue in the meantime client-side by using a mutation observer and adding the attributes as the elements appear.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
added role
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Thanks!
@chriddyp
chriddyp
commented
Apr 11, 2018

Copy link


Copy Markdown

Member
@rmarren1 - I'm 👍 with these changes. Is there anything else that you would like to add? Otherwise, I will merge and release.
@rmarren1
rmarren1
commented
Apr 11, 2018

Copy link


Copy Markdown

ContributorAuthor
I'm good with it, go ahead!
@chriddyp
chriddyp
merged commit 9aa7c8f
into
plotly:masterApr 23, 2018
@cpsievertcpsievert
mentioned this pull request
Apr 24, 2018

Closed

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


Reviewers


1 more reviewer

@chriddypchriddypchriddyp left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@rmarren1@ngnpope@chriddyp

, '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('^' + ".*" + '
Added data-* and aria-* attributes by rmarren1 · Pull Request #40 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Added data-* and aria-* attributes - #40
Merged
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Apr 23, 2018
Merged
Added data-* and aria-* attributes#40
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Conversation
@rmarren1
@rmarren1rmarren1
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
@rmarren1rmarren1
mentioned this pull request
Apr 2, 2018

Closed

chriddyp
chriddyp
reviewed
Apr 3, 2018
View reviewed changes
Comment threadscripts/generate-components.js
Outdated

 * A wild-card data-* attribute
 */
 'data-*': PropTypes.string,

@chriddypchriddypApr 3, 2018

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Let's add aria-* too
@rmarren1rmarren1
changed the title
Added data-* attribute to all componentsAdded data-* and aria-* attributesApr 4, 2018
@rmarren1rmarren1
mentioned this pull request
Apr 4, 2018
 Merged

@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Hi @rmarren1,
I've also not been able to use the role attribute with html.A():
TypeError: Unexpected keyword argument `role`

This attribute is required for use with aria-* attributes, so it would be good if it were supported.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
Are there any elements where role should not be allowed? It is does not appear in https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes which is why it is currently not supported, but it could be hard-coded into the generation script if it applies to all components.
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Can be applied to any element:
Other documents of interest:
Hard-coding this seems sensible if that is already being done for aria-* as part of this PR.
For background, I bumped into this because of using Bootstrap which requires data-* for some of the scripted components. Have worked around the issue in the meantime client-side by using a mutation observer and adding the attributes as the elements appear.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
added role
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Thanks!
@chriddyp
chriddyp
commented
Apr 11, 2018

Copy link


Copy Markdown

Member
@rmarren1 - I'm 👍 with these changes. Is there anything else that you would like to add? Otherwise, I will merge and release.
@rmarren1
rmarren1
commented
Apr 11, 2018

Copy link


Copy Markdown

ContributorAuthor
I'm good with it, go ahead!
@chriddyp
chriddyp
merged commit 9aa7c8f
into
plotly:masterApr 23, 2018
@cpsievertcpsievert
mentioned this pull request
Apr 24, 2018

Closed

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


Reviewers


1 more reviewer

@chriddypchriddypchriddyp left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@rmarren1@ngnpope@chriddyp

, '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" + '
Added data-* and aria-* attributes by rmarren1 · Pull Request #40 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Added data-* and aria-* attributes - #40
Merged
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Apr 23, 2018
Merged
Added data-* and aria-* attributes#40
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Conversation
@rmarren1
@rmarren1rmarren1
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
@rmarren1rmarren1
mentioned this pull request
Apr 2, 2018

Closed

chriddyp
chriddyp
reviewed
Apr 3, 2018
View reviewed changes
Comment threadscripts/generate-components.js
Outdated

 * A wild-card data-* attribute
 */
 'data-*': PropTypes.string,

@chriddypchriddypApr 3, 2018

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Let's add aria-* too
@rmarren1rmarren1
changed the title
Added data-* attribute to all componentsAdded data-* and aria-* attributesApr 4, 2018
@rmarren1rmarren1
mentioned this pull request
Apr 4, 2018
 Merged

@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Hi @rmarren1,
I've also not been able to use the role attribute with html.A():
TypeError: Unexpected keyword argument `role`

This attribute is required for use with aria-* attributes, so it would be good if it were supported.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
Are there any elements where role should not be allowed? It is does not appear in https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes which is why it is currently not supported, but it could be hard-coded into the generation script if it applies to all components.
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Can be applied to any element:
Other documents of interest:
Hard-coding this seems sensible if that is already being done for aria-* as part of this PR.
For background, I bumped into this because of using Bootstrap which requires data-* for some of the scripted components. Have worked around the issue in the meantime client-side by using a mutation observer and adding the attributes as the elements appear.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
added role
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Thanks!
@chriddyp
chriddyp
commented
Apr 11, 2018

Copy link


Copy Markdown

Member
@rmarren1 - I'm 👍 with these changes. Is there anything else that you would like to add? Otherwise, I will merge and release.
@rmarren1
rmarren1
commented
Apr 11, 2018

Copy link


Copy Markdown

ContributorAuthor
I'm good with it, go ahead!
@chriddyp
chriddyp
merged commit 9aa7c8f
into
plotly:masterApr 23, 2018
@cpsievertcpsievert
mentioned this pull request
Apr 24, 2018

Closed

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


Reviewers


1 more reviewer

@chriddypchriddypchriddyp left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@rmarren1@ngnpope@chriddyp

, '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('^' + ".*" + '
Added data-* and aria-* attributes by rmarren1 · Pull Request #40 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Added data-* and aria-* attributes - #40
Merged
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Apr 23, 2018
Merged
Added data-* and aria-* attributes#40
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Conversation
@rmarren1
@rmarren1rmarren1
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
@rmarren1rmarren1
mentioned this pull request
Apr 2, 2018

Closed

chriddyp
chriddyp
reviewed
Apr 3, 2018
View reviewed changes
Comment threadscripts/generate-components.js
Outdated

 * A wild-card data-* attribute
 */
 'data-*': PropTypes.string,

@chriddypchriddypApr 3, 2018

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Let's add aria-* too
@rmarren1rmarren1
changed the title
Added data-* attribute to all componentsAdded data-* and aria-* attributesApr 4, 2018
@rmarren1rmarren1
mentioned this pull request
Apr 4, 2018
 Merged

@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Hi @rmarren1,
I've also not been able to use the role attribute with html.A():
TypeError: Unexpected keyword argument `role`

This attribute is required for use with aria-* attributes, so it would be good if it were supported.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
Are there any elements where role should not be allowed? It is does not appear in https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes which is why it is currently not supported, but it could be hard-coded into the generation script if it applies to all components.
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Can be applied to any element:
Other documents of interest:
Hard-coding this seems sensible if that is already being done for aria-* as part of this PR.
For background, I bumped into this because of using Bootstrap which requires data-* for some of the scripted components. Have worked around the issue in the meantime client-side by using a mutation observer and adding the attributes as the elements appear.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
added role
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Thanks!
@chriddyp
chriddyp
commented
Apr 11, 2018

Copy link


Copy Markdown

Member
@rmarren1 - I'm 👍 with these changes. Is there anything else that you would like to add? Otherwise, I will merge and release.
@rmarren1
rmarren1
commented
Apr 11, 2018

Copy link


Copy Markdown

ContributorAuthor
I'm good with it, go ahead!
@chriddyp
chriddyp
merged commit 9aa7c8f
into
plotly:masterApr 23, 2018
@cpsievertcpsievert
mentioned this pull request
Apr 24, 2018

Closed

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


Reviewers


1 more reviewer

@chriddypchriddypchriddyp left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@rmarren1@ngnpope@chriddyp

, '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('^' + ".*" + '
Added data-* and aria-* attributes by rmarren1 · Pull Request #40 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Added data-* and aria-* attributes - #40
Merged
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Apr 23, 2018
Merged
Added data-* and aria-* attributes#40
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Conversation
@rmarren1
@rmarren1rmarren1
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
@rmarren1rmarren1
mentioned this pull request
Apr 2, 2018

Closed

chriddyp
chriddyp
reviewed
Apr 3, 2018
View reviewed changes
Comment threadscripts/generate-components.js
Outdated

 * A wild-card data-* attribute
 */
 'data-*': PropTypes.string,

@chriddypchriddypApr 3, 2018

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Let's add aria-* too
@rmarren1rmarren1
changed the title
Added data-* attribute to all componentsAdded data-* and aria-* attributesApr 4, 2018
@rmarren1rmarren1
mentioned this pull request
Apr 4, 2018
 Merged

@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Hi @rmarren1,
I've also not been able to use the role attribute with html.A():
TypeError: Unexpected keyword argument `role`

This attribute is required for use with aria-* attributes, so it would be good if it were supported.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
Are there any elements where role should not be allowed? It is does not appear in https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes which is why it is currently not supported, but it could be hard-coded into the generation script if it applies to all components.
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Can be applied to any element:
Other documents of interest:
Hard-coding this seems sensible if that is already being done for aria-* as part of this PR.
For background, I bumped into this because of using Bootstrap which requires data-* for some of the scripted components. Have worked around the issue in the meantime client-side by using a mutation observer and adding the attributes as the elements appear.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
added role
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Thanks!
@chriddyp
chriddyp
commented
Apr 11, 2018

Copy link


Copy Markdown

Member
@rmarren1 - I'm 👍 with these changes. Is there anything else that you would like to add? Otherwise, I will merge and release.
@rmarren1
rmarren1
commented
Apr 11, 2018

Copy link


Copy Markdown

ContributorAuthor
I'm good with it, go ahead!
@chriddyp
chriddyp
merged commit 9aa7c8f
into
plotly:masterApr 23, 2018
@cpsievertcpsievert
mentioned this pull request
Apr 24, 2018

Closed

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


Reviewers


1 more reviewer

@chriddypchriddypchriddyp left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@rmarren1@ngnpope@chriddyp

, '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); }
})();
})();
Added data-* and aria-* attributes by rmarren1 · Pull Request #40 · plotly/dash-html-components · GitHub
Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Added data-* and aria-* attributes - #40
Merged
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Apr 23, 2018
Merged
Added data-* and aria-* attributes#40
chriddyp merged 2 commits into
plotly:masterfrom 
rmarren1:data-star
Conversation
@rmarren1
@rmarren1rmarren1
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
@rmarren1rmarren1
mentioned this pull request
Apr 2, 2018

Closed

chriddyp
chriddyp
reviewed
Apr 3, 2018
View reviewed changes
Comment threadscripts/generate-components.js
Outdated

 * A wild-card data-* attribute
 */
 'data-*': PropTypes.string,

@chriddypchriddypApr 3, 2018

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Let's add aria-* too
@rmarren1rmarren1
changed the title
Added data-* attribute to all componentsAdded data-* and aria-* attributesApr 4, 2018
@rmarren1rmarren1
mentioned this pull request
Apr 4, 2018
 Merged

@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Hi @rmarren1,
I've also not been able to use the role attribute with html.A():
TypeError: Unexpected keyword argument `role`

This attribute is required for use with aria-* attributes, so it would be good if it were supported.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
Are there any elements where role should not be allowed? It is does not appear in https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes which is why it is currently not supported, but it could be hard-coded into the generation script if it applies to all components.
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Can be applied to any element:
Other documents of interest:
Hard-coding this seems sensible if that is already being done for aria-* as part of this PR.
For background, I bumped into this because of using Bootstrap which requires data-* for some of the scripted components. Have worked around the issue in the meantime client-side by using a mutation observer and adding the attributes as the elements appear.
@rmarren1
rmarren1
commented
Apr 10, 2018

Copy link


Copy Markdown

ContributorAuthor
added role
@ngnpope
ngnpope
commented
Apr 10, 2018

Copy link


Copy Markdown

Thanks!
@chriddyp
chriddyp
commented
Apr 11, 2018

Copy link


Copy Markdown

Member
@rmarren1 - I'm 👍 with these changes. Is there anything else that you would like to add? Otherwise, I will merge and release.
@rmarren1
rmarren1
commented
Apr 11, 2018

Copy link


Copy Markdown

ContributorAuthor
I'm good with it, go ahead!
@chriddyp
chriddyp
merged commit 9aa7c8f
into
plotly:masterApr 23, 2018
@cpsievertcpsievert
mentioned this pull request
Apr 24, 2018

Closed

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


Reviewers


1 more reviewer

@chriddypchriddypchriddyp left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@rmarren1@ngnpope@chriddyp