#79 / Accessibility & Style fixes for Modal - #253

Merged
demariadaniel merged 18 commits into
iobiofrom
79/style-fixes-for-modal
Aug 13, 2025
Merged

#79 / Accessibility & Style fixes for Modal#253
demariadaniel merged 18 commits into
iobiofrom
79/style-fixes-for-modal

Conversation

@demariadaniel

@demariadanieldemariadaniel commented Aug 5, 2025•
edited
Loading

Copy link
Copy Markdown

Summary

Accessibility & UI Updates
Depends on changes in: overture-stack/iobio-components#80

Issues

Description of Changes

  • Updates Modal Badge Colors for contrast
  • Adds Error Message for Disabled Buttons
  • Fixes Iobio Labels & adds InfoLabelButtons with descriptions
  • Updated Type definitions & use of util functions from package
  • File ID Header

Readiness Checklist

  • Self Review
    • I have performed a self review of code
    • I have run the application locally and manually tested the feature
    • I have checked all updates to correct typos and misspellings
  • Formatting
    • Code follows the project style guide
    • Autmated code formatters (ie. Prettier) have been run
  • Local Testing
    • Successfully built all packages locally
    • Successfully ran all test suites, all unit and integration tests pass
  • Updated Tests
    • Unit and integration tests have been added that describe the bug that was fixed or the features that were added
  • Documentation
    • All new environment variables added to .env.schema file and documented in the README
    • All changes to server HTTP endpoints have open-api documentation
    • All new functions exported from their module have TSDoc comment documentation

@demariadanieldemariadaniel changed the title WIP: 79/style fixes for modal#79 / Accessibility & Style fixes for ModalAug 6, 2025
demariadaniel
demariadaniel commented Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/Modal/components.tsx Outdated
const theme = useTheme();
return (
<button css={optionStyle({ theme, isEnabled })} disabled={!isEnabled} onClick={onClick}>
<button aria-label={`Select ${title} Visualizer`} css={optionStyle({ theme, isEnabled })} onClick={onClick}>

@demariadanieldemariadanielAug 7, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

One callout here
We've added onClick behaviour to display an error message if the button is disabled
A disabled button cannot be clicked, so I had to remove the disabled attribute from the buttons to enable the error message behavior
So I think an aria-disabled should be added here to replace it so we have semantic/accessibility information included

@demariadanieldemariadanielAug 7, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Added

demariadaniel
demariadaniel commented Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx Outdated
ciaranschutte
ciaranschutte reviewed Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/index.tsx Outdated
Comment on lines +151 to +153
<div slot="content">
<p>{infoLabelPercentCopy[key]}</p>
</div>

@ciaranschutteciaranschutteAug 7, 2025

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.

why do we have a "slot" attribute here? I think this should be encapsulated by the components library that wraps the web components library

@demariadanieldemariadanielAug 8, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

slot is a web component convention and removing the div / slot attribute here also removes the copy.
Encapsulating in the JSX component is a good call.

joneubank
joneubank requested changes Aug 13, 2025
View reviewed changes

@joneubankjoneubank left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This looks good to me, one change to help simplify.

Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx Outdated
@demariadaniel
demariadaniel merged commit b7497c0 into iobioAug 13, 2025
2 checks passed
@demariadaniel
demariadaniel deleted the 79/style-fixes-for-modal branch August 13, 2025 22:08
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@joneubankjoneubankjoneubank requested changes
@justincorrigiblejustincorrigibleAwaiting requested review from justincorrigible
+1 more reviewer
@ciaranschutteciaranschutteciaranschutte 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

@demariadaniel@ciaranschutte@joneubank
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n 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;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
#79 / Accessibility & Style fixes for Modal - #253
Merged
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Aug 13, 2025
Merged
#79 / Accessibility & Style fixes for Modal#253
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Aug 5, 2025•

edited

Loading

Copy link


Copy Markdown

Summary
Accessibility & UI Updates

Depends on changes in: overture-stack/iobio-components#80
Issues
Description of Changes
  • Updates Modal Badge Colors for contrast
  • Adds Error Message for Disabled Buttons
  • Fixes Iobio Labels & adds InfoLabelButtons with descriptions
  • Updated Type definitions & use of util functions from package
  • File ID Header
Readiness Checklist
  • Self Review
    • I have performed a self review of code
    • I have run the application locally and manually tested the feature
    • I have checked all updates to correct typos and misspellings
  • Formatting
    • Code follows the project style guide
    • Autmated code formatters (ie. Prettier) have been run
  • Local Testing
    • Successfully built all packages locally
    • Successfully ran all test suites, all unit and integration tests pass
  • Updated Tests
    • Unit and integration tests have been added that describe the bug that was fixed or the features that were added
  •  Documentation

    • All new environment variables added to .env.schema file and documented in the README
    • All changes to server HTTP endpoints have open-api documentation
    • All new functions exported from their module have TSDoc comment documentation
@demariadanieldemariadaniel
changed the title
WIP: 79/style fixes for modal#79 / Accessibility & Style fixes for ModalAug 6, 2025
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/Modal/components.tsx
Outdated

	const theme = useTheme();
	return (
 <button css={optionStyle({ theme, isEnabled })} disabled={!isEnabled} onClick={onClick}>
 <button aria-label={`Select ${title} Visualizer`} css={optionStyle({ theme, isEnabled })} onClick={onClick}>
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

One callout here

We've added onClick behaviour to display an error message if the button is disabled

A disabled button cannot be clicked, so I had to remove the disabled attribute from the buttons to enable the error message behavior

So I think an aria-disabled should be added here to replace it so we have semantic/accessibility information included
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

Added
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

ciaranschutte
ciaranschutte
reviewed
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/index.tsx
Outdated


Comment on lines

+151
 to 
+153

 <div slot="content">
 <p>{infoLabelPercentCopy[key]}</p>
 </div>
@ciaranschutteciaranschutteAug 7, 2025

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.

why do we have a "slot" attribute here? I think this should be encapsulated by the components library that wraps the web components library
@demariadanieldemariadanielAug 8, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

slot is a web component convention and removing the div / slot attribute here also removes the copy.

Encapsulating in the JSX component is a good call.
joneubank
joneubank
requested changes
Aug 13, 2025
View reviewed changes
@joneubankjoneubank
left a comment


Copy link


Copy Markdown

Choose a reason for hiding this comment

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

This looks good to me, one change to help simplify.
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

@demariadaniel
demariadaniel
merged commit b7497c0
into
iobioAug 13, 2025

2 checks passed

@demariadaniel
demariadaniel
deleted the

79/style-fixes-for-modal

branch
August 13, 2025 22:08
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joneubankjoneubankjoneubank requested changes
@justincorrigiblejustincorrigibleAwaiting requested review from justincorrigible

+1 more reviewer

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

@demariadaniel@ciaranschutte@joneubank

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
#79 / Accessibility & Style fixes for Modal - #253
Merged
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Aug 13, 2025
Merged
#79 / Accessibility & Style fixes for Modal#253
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Aug 5, 2025•

edited

Loading

Copy link


Copy Markdown

Summary
Accessibility & UI Updates

Depends on changes in: overture-stack/iobio-components#80
Issues
Description of Changes
  • Updates Modal Badge Colors for contrast
  • Adds Error Message for Disabled Buttons
  • Fixes Iobio Labels & adds InfoLabelButtons with descriptions
  • Updated Type definitions & use of util functions from package
  • File ID Header
Readiness Checklist
  • Self Review
    • I have performed a self review of code
    • I have run the application locally and manually tested the feature
    • I have checked all updates to correct typos and misspellings
  • Formatting
    • Code follows the project style guide
    • Autmated code formatters (ie. Prettier) have been run
  • Local Testing
    • Successfully built all packages locally
    • Successfully ran all test suites, all unit and integration tests pass
  • Updated Tests
    • Unit and integration tests have been added that describe the bug that was fixed or the features that were added
  •  Documentation

    • All new environment variables added to .env.schema file and documented in the README
    • All changes to server HTTP endpoints have open-api documentation
    • All new functions exported from their module have TSDoc comment documentation
@demariadanieldemariadaniel
changed the title
WIP: 79/style fixes for modal#79 / Accessibility & Style fixes for ModalAug 6, 2025
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/Modal/components.tsx
Outdated

	const theme = useTheme();
	return (
 <button css={optionStyle({ theme, isEnabled })} disabled={!isEnabled} onClick={onClick}>
 <button aria-label={`Select ${title} Visualizer`} css={optionStyle({ theme, isEnabled })} onClick={onClick}>
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

One callout here

We've added onClick behaviour to display an error message if the button is disabled

A disabled button cannot be clicked, so I had to remove the disabled attribute from the buttons to enable the error message behavior

So I think an aria-disabled should be added here to replace it so we have semantic/accessibility information included
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

Added
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

ciaranschutte
ciaranschutte
reviewed
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/index.tsx
Outdated


Comment on lines

+151
 to 
+153

 <div slot="content">
 <p>{infoLabelPercentCopy[key]}</p>
 </div>
@ciaranschutteciaranschutteAug 7, 2025

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.

why do we have a "slot" attribute here? I think this should be encapsulated by the components library that wraps the web components library
@demariadanieldemariadanielAug 8, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

slot is a web component convention and removing the div / slot attribute here also removes the copy.

Encapsulating in the JSX component is a good call.
joneubank
joneubank
requested changes
Aug 13, 2025
View reviewed changes
@joneubankjoneubank
left a comment


Copy link


Copy Markdown

Choose a reason for hiding this comment

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

This looks good to me, one change to help simplify.
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

@demariadaniel
demariadaniel
merged commit b7497c0
into
iobioAug 13, 2025

2 checks passed

@demariadaniel
demariadaniel
deleted the

79/style-fixes-for-modal

branch
August 13, 2025 22:08
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joneubankjoneubankjoneubank requested changes
@justincorrigiblejustincorrigibleAwaiting requested review from justincorrigible

+1 more reviewer

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

@demariadaniel@ciaranschutte@joneubank

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
#79 / Accessibility & Style fixes for Modal - #253
Merged
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Aug 13, 2025
Merged
#79 / Accessibility & Style fixes for Modal#253
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Aug 5, 2025•

edited

Loading

Copy link


Copy Markdown

Summary
Accessibility & UI Updates

Depends on changes in: overture-stack/iobio-components#80
Issues
Description of Changes
  • Updates Modal Badge Colors for contrast
  • Adds Error Message for Disabled Buttons
  • Fixes Iobio Labels & adds InfoLabelButtons with descriptions
  • Updated Type definitions & use of util functions from package
  • File ID Header
Readiness Checklist
  • Self Review
    • I have performed a self review of code
    • I have run the application locally and manually tested the feature
    • I have checked all updates to correct typos and misspellings
  • Formatting
    • Code follows the project style guide
    • Autmated code formatters (ie. Prettier) have been run
  • Local Testing
    • Successfully built all packages locally
    • Successfully ran all test suites, all unit and integration tests pass
  • Updated Tests
    • Unit and integration tests have been added that describe the bug that was fixed or the features that were added
  •  Documentation

    • All new environment variables added to .env.schema file and documented in the README
    • All changes to server HTTP endpoints have open-api documentation
    • All new functions exported from their module have TSDoc comment documentation
@demariadanieldemariadaniel
changed the title
WIP: 79/style fixes for modal#79 / Accessibility & Style fixes for ModalAug 6, 2025
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/Modal/components.tsx
Outdated

	const theme = useTheme();
	return (
 <button css={optionStyle({ theme, isEnabled })} disabled={!isEnabled} onClick={onClick}>
 <button aria-label={`Select ${title} Visualizer`} css={optionStyle({ theme, isEnabled })} onClick={onClick}>
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

One callout here

We've added onClick behaviour to display an error message if the button is disabled

A disabled button cannot be clicked, so I had to remove the disabled attribute from the buttons to enable the error message behavior

So I think an aria-disabled should be added here to replace it so we have semantic/accessibility information included
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

Added
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

ciaranschutte
ciaranschutte
reviewed
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/index.tsx
Outdated


Comment on lines

+151
 to 
+153

 <div slot="content">
 <p>{infoLabelPercentCopy[key]}</p>
 </div>
@ciaranschutteciaranschutteAug 7, 2025

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.

why do we have a "slot" attribute here? I think this should be encapsulated by the components library that wraps the web components library
@demariadanieldemariadanielAug 8, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

slot is a web component convention and removing the div / slot attribute here also removes the copy.

Encapsulating in the JSX component is a good call.
joneubank
joneubank
requested changes
Aug 13, 2025
View reviewed changes
@joneubankjoneubank
left a comment


Copy link


Copy Markdown

Choose a reason for hiding this comment

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

This looks good to me, one change to help simplify.
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

@demariadaniel
demariadaniel
merged commit b7497c0
into
iobioAug 13, 2025

2 checks passed

@demariadaniel
demariadaniel
deleted the

79/style-fixes-for-modal

branch
August 13, 2025 22:08
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joneubankjoneubankjoneubank requested changes
@justincorrigiblejustincorrigibleAwaiting requested review from justincorrigible

+1 more reviewer

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

@demariadaniel@ciaranschutte@joneubank

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
#79 / Accessibility & Style fixes for Modal - #253
Merged
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Aug 13, 2025
Merged
#79 / Accessibility & Style fixes for Modal#253
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Aug 5, 2025•

edited

Loading

Copy link


Copy Markdown

Summary
Accessibility & UI Updates

Depends on changes in: overture-stack/iobio-components#80
Issues
Description of Changes
  • Updates Modal Badge Colors for contrast
  • Adds Error Message for Disabled Buttons
  • Fixes Iobio Labels & adds InfoLabelButtons with descriptions
  • Updated Type definitions & use of util functions from package
  • File ID Header
Readiness Checklist
  • Self Review
    • I have performed a self review of code
    • I have run the application locally and manually tested the feature
    • I have checked all updates to correct typos and misspellings
  • Formatting
    • Code follows the project style guide
    • Autmated code formatters (ie. Prettier) have been run
  • Local Testing
    • Successfully built all packages locally
    • Successfully ran all test suites, all unit and integration tests pass
  • Updated Tests
    • Unit and integration tests have been added that describe the bug that was fixed or the features that were added
  •  Documentation

    • All new environment variables added to .env.schema file and documented in the README
    • All changes to server HTTP endpoints have open-api documentation
    • All new functions exported from their module have TSDoc comment documentation
@demariadanieldemariadaniel
changed the title
WIP: 79/style fixes for modal#79 / Accessibility & Style fixes for ModalAug 6, 2025
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/Modal/components.tsx
Outdated

	const theme = useTheme();
	return (
 <button css={optionStyle({ theme, isEnabled })} disabled={!isEnabled} onClick={onClick}>
 <button aria-label={`Select ${title} Visualizer`} css={optionStyle({ theme, isEnabled })} onClick={onClick}>
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

One callout here

We've added onClick behaviour to display an error message if the button is disabled

A disabled button cannot be clicked, so I had to remove the disabled attribute from the buttons to enable the error message behavior

So I think an aria-disabled should be added here to replace it so we have semantic/accessibility information included
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

Added
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

ciaranschutte
ciaranschutte
reviewed
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/index.tsx
Outdated


Comment on lines

+151
 to 
+153

 <div slot="content">
 <p>{infoLabelPercentCopy[key]}</p>
 </div>
@ciaranschutteciaranschutteAug 7, 2025

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.

why do we have a "slot" attribute here? I think this should be encapsulated by the components library that wraps the web components library
@demariadanieldemariadanielAug 8, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

slot is a web component convention and removing the div / slot attribute here also removes the copy.

Encapsulating in the JSX component is a good call.
joneubank
joneubank
requested changes
Aug 13, 2025
View reviewed changes
@joneubankjoneubank
left a comment


Copy link


Copy Markdown

Choose a reason for hiding this comment

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

This looks good to me, one change to help simplify.
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

@demariadaniel
demariadaniel
merged commit b7497c0
into
iobioAug 13, 2025

2 checks passed

@demariadaniel
demariadaniel
deleted the

79/style-fixes-for-modal

branch
August 13, 2025 22:08
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joneubankjoneubankjoneubank requested changes
@justincorrigiblejustincorrigibleAwaiting requested review from justincorrigible

+1 more reviewer

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

@demariadaniel@ciaranschutte@joneubank

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
#79 / Accessibility & Style fixes for Modal - #253
Merged
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Aug 13, 2025
Merged
#79 / Accessibility & Style fixes for Modal#253
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Aug 5, 2025•

edited

Loading

Copy link


Copy Markdown

Summary
Accessibility & UI Updates

Depends on changes in: overture-stack/iobio-components#80
Issues
Description of Changes
  • Updates Modal Badge Colors for contrast
  • Adds Error Message for Disabled Buttons
  • Fixes Iobio Labels & adds InfoLabelButtons with descriptions
  • Updated Type definitions & use of util functions from package
  • File ID Header
Readiness Checklist
  • Self Review
    • I have performed a self review of code
    • I have run the application locally and manually tested the feature
    • I have checked all updates to correct typos and misspellings
  • Formatting
    • Code follows the project style guide
    • Autmated code formatters (ie. Prettier) have been run
  • Local Testing
    • Successfully built all packages locally
    • Successfully ran all test suites, all unit and integration tests pass
  • Updated Tests
    • Unit and integration tests have been added that describe the bug that was fixed or the features that were added
  •  Documentation

    • All new environment variables added to .env.schema file and documented in the README
    • All changes to server HTTP endpoints have open-api documentation
    • All new functions exported from their module have TSDoc comment documentation
@demariadanieldemariadaniel
changed the title
WIP: 79/style fixes for modal#79 / Accessibility & Style fixes for ModalAug 6, 2025
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/Modal/components.tsx
Outdated

	const theme = useTheme();
	return (
 <button css={optionStyle({ theme, isEnabled })} disabled={!isEnabled} onClick={onClick}>
 <button aria-label={`Select ${title} Visualizer`} css={optionStyle({ theme, isEnabled })} onClick={onClick}>
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

One callout here

We've added onClick behaviour to display an error message if the button is disabled

A disabled button cannot be clicked, so I had to remove the disabled attribute from the buttons to enable the error message behavior

So I think an aria-disabled should be added here to replace it so we have semantic/accessibility information included
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

Added
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

ciaranschutte
ciaranschutte
reviewed
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/index.tsx
Outdated


Comment on lines

+151
 to 
+153

 <div slot="content">
 <p>{infoLabelPercentCopy[key]}</p>
 </div>
@ciaranschutteciaranschutteAug 7, 2025

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.

why do we have a "slot" attribute here? I think this should be encapsulated by the components library that wraps the web components library
@demariadanieldemariadanielAug 8, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

slot is a web component convention and removing the div / slot attribute here also removes the copy.

Encapsulating in the JSX component is a good call.
joneubank
joneubank
requested changes
Aug 13, 2025
View reviewed changes
@joneubankjoneubank
left a comment


Copy link


Copy Markdown

Choose a reason for hiding this comment

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

This looks good to me, one change to help simplify.
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

@demariadaniel
demariadaniel
merged commit b7497c0
into
iobioAug 13, 2025

2 checks passed

@demariadaniel
demariadaniel
deleted the

79/style-fixes-for-modal

branch
August 13, 2025 22:08
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joneubankjoneubankjoneubank requested changes
@justincorrigiblejustincorrigibleAwaiting requested review from justincorrigible

+1 more reviewer

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

@demariadaniel@ciaranschutte@joneubank

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
#79 / Accessibility & Style fixes for Modal - #253
Merged
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Aug 13, 2025
Merged
#79 / Accessibility & Style fixes for Modal#253
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Aug 5, 2025•

edited

Loading

Copy link


Copy Markdown

Summary
Accessibility & UI Updates

Depends on changes in: overture-stack/iobio-components#80
Issues
Description of Changes
  • Updates Modal Badge Colors for contrast
  • Adds Error Message for Disabled Buttons
  • Fixes Iobio Labels & adds InfoLabelButtons with descriptions
  • Updated Type definitions & use of util functions from package
  • File ID Header
Readiness Checklist
  • Self Review
    • I have performed a self review of code
    • I have run the application locally and manually tested the feature
    • I have checked all updates to correct typos and misspellings
  • Formatting
    • Code follows the project style guide
    • Autmated code formatters (ie. Prettier) have been run
  • Local Testing
    • Successfully built all packages locally
    • Successfully ran all test suites, all unit and integration tests pass
  • Updated Tests
    • Unit and integration tests have been added that describe the bug that was fixed or the features that were added
  •  Documentation

    • All new environment variables added to .env.schema file and documented in the README
    • All changes to server HTTP endpoints have open-api documentation
    • All new functions exported from their module have TSDoc comment documentation
@demariadanieldemariadaniel
changed the title
WIP: 79/style fixes for modal#79 / Accessibility & Style fixes for ModalAug 6, 2025
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/Modal/components.tsx
Outdated

	const theme = useTheme();
	return (
 <button css={optionStyle({ theme, isEnabled })} disabled={!isEnabled} onClick={onClick}>
 <button aria-label={`Select ${title} Visualizer`} css={optionStyle({ theme, isEnabled })} onClick={onClick}>
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

One callout here

We've added onClick behaviour to display an error message if the button is disabled

A disabled button cannot be clicked, so I had to remove the disabled attribute from the buttons to enable the error message behavior

So I think an aria-disabled should be added here to replace it so we have semantic/accessibility information included
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

Added
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

ciaranschutte
ciaranschutte
reviewed
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/index.tsx
Outdated


Comment on lines

+151
 to 
+153

 <div slot="content">
 <p>{infoLabelPercentCopy[key]}</p>
 </div>
@ciaranschutteciaranschutteAug 7, 2025

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.

why do we have a "slot" attribute here? I think this should be encapsulated by the components library that wraps the web components library
@demariadanieldemariadanielAug 8, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

slot is a web component convention and removing the div / slot attribute here also removes the copy.

Encapsulating in the JSX component is a good call.
joneubank
joneubank
requested changes
Aug 13, 2025
View reviewed changes
@joneubankjoneubank
left a comment


Copy link


Copy Markdown

Choose a reason for hiding this comment

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

This looks good to me, one change to help simplify.
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

@demariadaniel
demariadaniel
merged commit b7497c0
into
iobioAug 13, 2025

2 checks passed

@demariadaniel
demariadaniel
deleted the

79/style-fixes-for-modal

branch
August 13, 2025 22:08
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joneubankjoneubankjoneubank requested changes
@justincorrigiblejustincorrigibleAwaiting requested review from justincorrigible

+1 more reviewer

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

@demariadaniel@ciaranschutte@joneubank

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

Skip to content
#79 / Accessibility & Style fixes for Modal - #253
Merged
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Aug 13, 2025
Merged
#79 / Accessibility & Style fixes for Modal#253
demariadaniel merged 18 commits into
iobiofrom 
79/style-fixes-for-modal
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Aug 5, 2025•

edited

Loading

Copy link


Copy Markdown

Summary
Accessibility & UI Updates

Depends on changes in: overture-stack/iobio-components#80
Issues
Description of Changes
  • Updates Modal Badge Colors for contrast
  • Adds Error Message for Disabled Buttons
  • Fixes Iobio Labels & adds InfoLabelButtons with descriptions
  • Updated Type definitions & use of util functions from package
  • File ID Header
Readiness Checklist
  • Self Review
    • I have performed a self review of code
    • I have run the application locally and manually tested the feature
    • I have checked all updates to correct typos and misspellings
  • Formatting
    • Code follows the project style guide
    • Autmated code formatters (ie. Prettier) have been run
  • Local Testing
    • Successfully built all packages locally
    • Successfully ran all test suites, all unit and integration tests pass
  • Updated Tests
    • Unit and integration tests have been added that describe the bug that was fixed or the features that were added
  •  Documentation

    • All new environment variables added to .env.schema file and documented in the README
    • All changes to server HTTP endpoints have open-api documentation
    • All new functions exported from their module have TSDoc comment documentation
@demariadanieldemariadaniel
changed the title
WIP: 79/style fixes for modal#79 / Accessibility & Style fixes for ModalAug 6, 2025
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/Modal/components.tsx
Outdated

	const theme = useTheme();
	return (
 <button css={optionStyle({ theme, isEnabled })} disabled={!isEnabled} onClick={onClick}>
 <button aria-label={`Select ${title} Visualizer`} css={optionStyle({ theme, isEnabled })} onClick={onClick}>
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

One callout here

We've added onClick behaviour to display an error message if the button is disabled

A disabled button cannot be clicked, so I had to remove the disabled attribute from the buttons to enable the error message behavior

So I think an aria-disabled should be added here to replace it so we have semantic/accessibility information included
@demariadanieldemariadanielAug 7, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

Added
demariadaniel
demariadaniel
commented
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

ciaranschutte
ciaranschutte
reviewed
Aug 7, 2025
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable/index.tsx
Outdated


Comment on lines

+151
 to 
+153

 <div slot="content">
 <p>{infoLabelPercentCopy[key]}</p>
 </div>
@ciaranschutteciaranschutteAug 7, 2025

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.

why do we have a "slot" attribute here? I think this should be encapsulated by the components library that wraps the web components library
@demariadanieldemariadanielAug 8, 2025

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

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

slot is a web component convention and removing the div / slot attribute here also removes the copy.

Encapsulating in the JSX component is a good call.
joneubank
joneubank
requested changes
Aug 13, 2025
View reviewed changes
@joneubankjoneubank
left a comment


Copy link


Copy Markdown

Choose a reason for hiding this comment

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

This looks good to me, one change to help simplify.
Comment threadcomponents/pages/explorer/BamTable/ToggleButtonPanel.tsx
Outdated

@demariadaniel
demariadaniel
merged commit b7497c0
into
iobioAug 13, 2025

2 checks passed

@demariadaniel
demariadaniel
deleted the

79/style-fixes-for-modal

branch
August 13, 2025 22:08
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joneubankjoneubankjoneubank requested changes
@justincorrigiblejustincorrigibleAwaiting requested review from justincorrigible

+1 more reviewer

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

@demariadaniel@ciaranschutte@joneubank