fix: add tooltip and clearer terminal text for non-JS languages in Practice Sandbox#492
Conversation
✅ Deploy Preview for astounding-nougat-da0f6a ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@Xenon010101 is attempting to deploy a commit to the adityapaul2603-gmailcom's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThis PR addresses the issue where non-JavaScript languages (Python, Java, C++) were throwing syntax errors when users attempted execution. Both the Run button and Terminal now provide clear UI feedback that JavaScript-only execution is currently supported, with other languages noted as coming soon. ChangesJavaScript-only Execution Feedback
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 7✅ Passed checks (7 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/CodeEditor.jsx (1)
158-158: 💤 Low valueOptional: Consider an accessible tooltip for better UX.
The native
titleattribute works but isn't keyboard-accessible and has poor screen reader support. For a more accessible experience, you could add anaria-labelor use a proper tooltip component (e.g., Radix UI, Headless UI).Why this matters: Users navigating via keyboard won't see the explanation, and screen reader users may miss it entirely. Since you're teaching DSA concepts, accessibility helps all learners engage with your tool.
That said, the current implementation is functional for most users, so this is purely a nice-to-have improvement.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/CodeEditor.jsx` at line 158, The title attribute on the element in CodeEditor.jsx (title={!isJavaScript ? 'Code execution is currently only supported for JavaScript' : ''}) is not sufficiently accessible; replace or augment it by adding an accessible alternative such as an aria-label or aria-describedby when isJavaScript is false, or hook up a proper tooltip component (e.g., Radix/Headless tooltip) and expose its content via aria attributes so keyboard and screen-reader users can access the same message; update the element where title is set and ensure the logic still uses the isJavaScript condition to show/hide the message.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/CodeEditor.jsx`:
- Line 158: The title attribute on the element in CodeEditor.jsx
(title={!isJavaScript ? 'Code execution is currently only supported for
JavaScript' : ''}) is not sufficiently accessible; replace or augment it by
adding an accessible alternative such as an aria-label or aria-describedby when
isJavaScript is false, or hook up a proper tooltip component (e.g.,
Radix/Headless tooltip) and expose its content via aria attributes so keyboard
and screen-reader users can access the same message; update the element where
title is set and ensure the logic still uses the isJavaScript condition to
show/hide the message.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro Plus
Run ID: a89ea06c-2c45-4166-bd33-bd634c7c9d2d
📒 Files selected for processing (2)
src/components/CodeEditor.jsxsrc/components/PracticePage.jsx
1 participant
Description
The CodeEditor component already disabled the Run Code button for non-JavaScript languages (showing 'Coming Soon' text). However, it was missing a tooltip explaining why the button is disabled, and the terminal placeholder text assumed JavaScript only.
Changes
Related Issue
Fixes #477
Summary by CodeRabbit