Skip to content

[WIP] fix: address accessibility issue with dark theme using token background colors #6847

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 12, 2025
Merged

[WIP] fix: address accessibility issue with dark theme using token background colors #6847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe53306
Initial plan
Copilot Sep 12, 2025
93dcd00
Fix accessibility issues with dark theme by replacing hardcoded color…
Copilot Sep 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 8 additions & 45 deletions packages/react/src/Portal/Portal.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,84 +101,47 @@ export const WithPortalContext = () => {
<p>This story demonstrates how to use PortalContext to control where Portal content is rendered.</p>

{/* Default Portal */}
<div
className={clsx(classes.PortalContainer, classes.InnerContainer)}
style={{backgroundColor: '#f0f8ff', margin: '10px', padding: '10px'}}
>
<div className={clsx(classes.PortalContainer, classes.DefaultSection)}>
<strong>Default Portal (no context):</strong>
{mounted ? (
<Portal>
<div style={{backgroundColor: '#e6f3ff', padding: '8px', border: '1px solid #0366d6'}}>
Content in default portal
</div>
<div className={classes.DefaultPortalContent}>Content in default portal</div>
</Portal>
) : null}
</div>

{/* Portal with Context */}
<div
className={clsx(classes.PortalContainer, classes.InnerContainer)}
style={{backgroundColor: '#fff5f5', margin: '10px', padding: '10px'}}
>
<div className={clsx(classes.PortalContainer, classes.ContextSection)}>
<strong>Portal with PortalContext:</strong>
<PortalContext.Provider value={{portalContainerName: 'custom-portal'}}>
{mounted ? (
<Portal>
<div style={{backgroundColor: '#ffe6e6', padding: '8px', border: '1px solid #d73a49'}}>
Content in custom portal (via PortalContext)
</div>
<div className={classes.ContextPortalContent}>Content in custom portal (via PortalContext)</div>
</Portal>
) : null}
</PortalContext.Provider>
</div>

{/* Override context with containerName prop */}
<div
className={clsx(classes.PortalContainer, classes.InnerContainer)}
style={{backgroundColor: '#f0fff4', margin: '10px', padding: '10px'}}
>
<div className={clsx(classes.PortalContainer, classes.OverrideSection)}>
<strong>Context + containerName prop override:</strong>
<PortalContext.Provider value={{portalContainerName: 'custom-portal'}}>
{mounted ? (
<Portal containerName="override-portal">
<div style={{backgroundColor: '#e6ffe6', padding: '8px', border: '1px solid #28a745'}}>
Content overriding context with containerName prop
</div>
<div className={classes.OverridePortalContent}>Content overriding context with containerName prop</div>
</Portal>
) : null}
</PortalContext.Provider>
</div>
</div>

{/* Custom portal containers */}
<div
style={{
position: 'fixed',
bottom: '10px',
left: '10px',
backgroundColor: '#fffbf0',
padding: '10px',
border: '2px solid #f66a0a',
borderRadius: '4px',
maxWidth: '200px',
}}
>
<div className={classes.CustomPortalContainer}>
<strong>Custom Portal Container:</strong>
<div ref={customContainerRef} />
</div>

<div
style={{
position: 'fixed',
bottom: '10px',
right: '10px',
backgroundColor: '#f0fff0',
padding: '10px',
border: '2px solid #28a745',
borderRadius: '4px',
maxWidth: '200px',
}}
>
<div className={classes.OverridePortalContainer}>
<strong>Override Portal Container:</strong>
<div ref={overrideContainerRef} />
</div>
Expand Down
62 changes: 62 additions & 0 deletions packages/react/src/Portal/Portal.stories.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,65 @@
.InnerContainer {
background-color: var(--bgColor-success-muted);
}

/* Portal Context Story Styles */
.DefaultSection {
background-color: var(--bgColor-accent-muted);
margin: var(--base-size-8);
padding: var(--base-size-8);
}

.ContextSection {
background-color: var(--bgColor-attention-muted);
margin: var(--base-size-8);
padding: var(--base-size-8);
}

.OverrideSection {
background-color: var(--bgColor-success-muted);
margin: var(--base-size-8);
padding: var(--base-size-8);
}

.DefaultPortalContent {
background-color: var(--bgColor-accent-emphasis);
padding: var(--base-size-4);
border: var(--borderWidth-thin) solid var(--borderColor-accent-emphasis);
color: var(--fgColor-onEmphasis);
}

.ContextPortalContent {
background-color: var(--bgColor-attention-emphasis);
padding: var(--base-size-4);
border: var(--borderWidth-thin) solid var(--borderColor-attention-emphasis);
color: var(--fgColor-onEmphasis);
}

.OverridePortalContent {
background-color: var(--bgColor-success-emphasis);
padding: var(--base-size-4);
border: var(--borderWidth-thin) solid var(--borderColor-success-emphasis);
color: var(--fgColor-onEmphasis);
}

.CustomPortalContainer {
position: fixed;
bottom: var(--base-size-8);
left: var(--base-size-8);
background-color: var(--bgColor-neutral-muted);
padding: var(--base-size-8);
border: var(--borderWidth-thick) solid var(--borderColor-attention-emphasis);
border-radius: var(--borderRadius-medium);
max-width: 200px;
}

.OverridePortalContainer {
position: fixed;
bottom: var(--base-size-8);
right: var(--base-size-8);
background-color: var(--bgColor-neutral-muted);
padding: var(--base-size-8);
border: var(--borderWidth-thick) solid var(--borderColor-success-emphasis);
border-radius: var(--borderRadius-medium);
max-width: 200px;
}
Loading