Skip to content
This repository was archived by the owner on Jul 6, 2026. It is now read-only.

Hover text visible#2552

Merged
anth-volk merged 1 commit into
PolicyEngine:masterfrom
SEEDART007:hover-correction
Jun 19, 2025
Merged

Hover text visible#2552
anth-volk merged 1 commit into
PolicyEngine:masterfrom
SEEDART007:hover-correction

Conversation

@SEEDART007

Copy link
Copy Markdown

Fixes #2543

Screen.Recording.2025-05-20.122614.mp4

Copilot AI review requested due to automatic review settings May 20, 2025 07:10
@vercel

vercel Bot commented May 20, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
policyengine-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 20, 2025 7:42am

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull Request Overview

This PR fixes issue #2543 by ensuring that hover text is visible and updating hover color cues across the application. Key changes include:

  • Adding an onClick handler to show a modal in the InfoCircleOutlined component.
  • Changing hoverBackgroundColor from style.colors.WHITE to style.colors.BLUE_PRESSED in several HoverBox components for mobile layouts.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
src/pages/household/output/NetIncomeBreakdown.jsx Added an onClick event to trigger a modal on the info icon
src/layout/Header.jsx Updated hoverBackgroundColor to use a blue pressed color for improved visual feedback
Comments suppressed due to low confidence (3)

src/layout/Header.jsx:602

  • Verify that the BLUE_PRESSED color provides sufficient contrast with overlaid text or icons to ensure accessibility standards are maintained.
hoverBackgroundColor={style.colors.BLUE_PRESSED}

src/layout/Header.jsx:670

  • Ensure the blue pressed hover background in MobileDropdownHeader meets contrast requirements for clear readability.
hoverBackgroundColor={style.colors.BLUE_PRESSED}

src/layout/Header.jsx:733

  • Confirm that the hover background color change in MobileDropdownItem maintains adequate contrast for users with visual impairments.
hoverBackgroundColor={style.colors.BLUE_PRESSED}

@@ -320,13 +320,14 @@ function VariableArithmetic(props) {
className="info-icon-wrapper"
>
<InfoCircleOutlined

Copilot AI May 20, 2025

Copy link

Choose a reason for hiding this comment

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

Consider adding an accessible label (such as an aria-label or title attribute) to the InfoCircleOutlined component so that screen readers can clearly communicate its purpose.

Suggested change
<InfoCircleOutlined
<InfoCircleOutlined
aria-label="More information"

Copilot uses AI. Check for mistakes.

@anth-volk anth-volk left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

This is definitely a visual improvement. Approved pending test passage.

@anth-volk
anth-volk merged commit 381a32d into PolicyEngine:master Jun 19, 2025
2 checks passed
@github-project-automation github-project-automation Bot moved this from Todo to Done in policyengine-app Jun 19, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

The texts are not visible when hovered

3 participants