Skip to content

Conversation

@google-labs-jules
Copy link
Contributor

💡 What:
- Modified src/components/chat/MessageItem.tsx to render Markdown links with target="_blank", rel="noopener noreferrer", and an appended sr-only span indicating "(opens in a new tab)".
- Modified src/components/chat/ToolRevealArtifact.tsx and src/components/wizard/ToolReveal.tsx to add rel="noopener noreferrer" and aria-label to the "Visit Website" buttons.

🎯 **Why:**
- **Usability:** Users were losing their chat session/context when clicking AI-generated links that opened in the same tab.
- **Security:** `rel="noopener noreferrer"` prevents the new page from accessing the `window.opener` property.
- **Accessibility:** Screen reader users need to know when a link will open a new tab to avoid confusion.

📸 **Before/After:**
- **Before:** Links opened in same tab, no "opens in new tab" announcement.
- **After:** Links open in new tab, screen readers announce "opens in a new tab". Visual appearance is consistent (violet text).

♿ **Accessibility:**
- Added `sr-only` text for dynamic markdown links.
- Added `aria-label` for static "Visit Website" buttons.

PR created automatically by Jules for task 9026427752305590526 started by @lightmyfireadmin

    - Customize `ReactMarkdown` renderer in `MessageItem` to open links in new tab
    - Add `rel="noopener noreferrer"` to all external links
    - Add visually hidden "(opens in a new tab)" text for accessibility in chat
    - Add `aria-label` to "Visit Website" buttons in tool reveal components

    This ensures users don't lose context when clicking links generated by the AI,
    and provides proper screen reader announcements.
@google-labs-jules
Copy link
Contributor Author

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@netlify
Copy link

netlify bot commented Jan 15, 2026

Deploy Preview for white-input-syndrome ready!

Name Link
🔨 Latest commit a08b8b0
🔍 Latest deploy log https://app.netlify.com/projects/white-input-syndrome/deploys/6968462876fd4500087af8f4
😎 Deploy Preview https://deploy-preview-18--white-input-syndrome.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant