[WIP] fix: address accessibility issue with dark theme using token background colors#6847
Merged
francinelucca merged 2 commits intochore/add-portal-contextfrom Sep 12, 2025
Merged
Conversation
|
…s with design tokens Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>
Contributor
|
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
github-actions
bot
added
the
integration-tests: recommended
github-actions
bot
requested a deployment
to
storybook-preview-6847
Contributor
size-limit report 📦
|
1 similar comment
Contributor
size-limit report 📦
|
francinelucca
approved these changes
Sep 12, 2025
francinelucca
merged commit 4ad5155
into
chore/add-portal-context
49 of 79 checks passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new
PortalContextto the@primer/reactlibrary, allowing more flexible and context-driven control over where portal content is rendered. The changes include updates to the corePortalcomponent, its exports, new Storybook examples, and additional tests to ensure correct behavior when usingPortalContextand container overrides.Changelog
New
PortalContexttoPortal.tsx, allowing consumers to specify aportalContainerNamevia React context, which determines the portal root container for content rendering. ThePortalcomponent now prioritizes the context value unless overridden by its owncontainerNameprop.Portal.test.tsxto verify correct portal rendering behavior when usingPortalContext, including context-only, default fallback, undefined context, and prop override scenarios.WithPortalContext) inPortal.features.stories.tsxto demonstrate how to usePortalContextfor controlling portal rendering, including context and prop override cases.Changed
index.tsand the package entry point to includePortalContext, making it available for consumers.WithPortalContextStorybook story by replacing hardcoded background and border colors with proper Primer design tokens, ensuring the story adapts correctly to both light and dark themes with excellent color contrast.Removed
Rollout strategy
Testing & Reviewing
Accessibility Fix
The Portal context story previously used hardcoded colors (
#f0f8ff,#e6f3ff, etc.) that didn't adapt to dark theme, causing accessibility issues. This has been resolved by:var(--bgColor-accent-muted),var(--bgColor-attention-emphasis), etc. for backgroundsvar(--borderColor-*-emphasis)for bordersvar(--fgColor-onEmphasis)for proper text contrast on emphasis backgroundsScreenshots:
Merge checklist
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.