fix: Prevent description duplication in Modal header

[raunakab]

Description

When no description prop is provided to Modal.Header, the component was falling back to rendering the title as the description, causing visual and ARIA duplication.

Changes:

• Add hasDescription state to ModalContext to track if description exists
• Only render DialogPrimitive.Description when the description prop is provided
• Suppress Radix aria-describedby warning via conditional prop when no description prop is provided

Fixes #7603.

How Has This Been Tested?

No UI changes; screenshots not required.

Additional Options

• [Optional] Override Linear Check

---

Summary by cubic

Prevent duplicate descriptions in Modal.Header. We now render a description only when the prop is provided and remove aria-describedby when it’s not, preventing visual/ARIA duplication and suppressing the Radix warning.

^{Written for commit 9c78588. Summary will update on new commits.}

[greptile-apps]

Greptile Summary

This PR fixes a bug where the Modal component displayed duplicate text when no description prop was provided. Previously, the component fell back to rendering the title as the description ({description || title}), causing both visual and ARIA accessibility duplication.

• Added hasDescription state to ModalContext to track whether a description prop exists
• Conditionally renders DialogPrimitive.Description only when description is truthy
• Suppresses Radix UI's aria-describedby warning by setting the attribute to undefined when no description exists
• Uses a useEffect in ModalHeader to synchronize the description state with the context

Confidence Score: 5/5

• This PR is safe to merge - it's a straightforward bug fix with minimal scope and no breaking changes
• The changes are well-contained to a single file, follow React best practices, maintain backward compatibility (existing callers with description props work identically), and properly address both the visual duplication and accessibility warning issues
• No files require special attention

Important Files Changed

Filename	Overview
web/src/refresh-components/Modal.tsx	Added hasDescription state to track description prop presence, conditionally renders DialogPrimitive.Description only when description exists, and suppresses Radix aria-describedby warning when no description provided. Fixes title duplication issue.

Sequence Diagram

sequenceDiagram
    participant User
    participant ModalContent
    participant ModalContext
    participant ModalHeader
    participant DialogPrimitive.Content
    participant DialogPrimitive.Description

    User->>ModalContent: Opens modal
    ModalContent->>ModalContext: Creates context with hasDescription=false
    ModalContent->>ModalHeader: Renders header
    
    alt description prop provided
        ModalHeader->>ModalContext: setHasDescription(true)
        ModalHeader->>DialogPrimitive.Description: Renders description
        ModalContext-->>DialogPrimitive.Content: aria-describedby set normally
    else no description prop
        ModalHeader->>ModalContext: setHasDescription(false)
        Note over ModalHeader: DialogPrimitive.Description not rendered
        ModalContext-->>DialogPrimitive.Content: aria-describedby=undefined
    end

Loading

[cubic-dev-ai]

1 issue found across 1 file

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="web/src/refresh-components/Modal.tsx">

<violation number="1" location="web/src/refresh-components/Modal.tsx:340">
P2: When a description is provided, hasDescription is only set after the first paint via useEffect, so the dialog initially renders without aria-describedby. This can prevent screen readers from announcing the description on open. Use useLayoutEffect (or another pre-paint update) so aria-describedby is set before the dialog is announced.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[evan-onyx]

cubic said smth maybe valid