UI fixes#997
Conversation
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Size Change: 0 B Total Size: 1.1 MB ℹ️ View Unchanged
|
Deploying livecodes with
|
| Latest commit: |
49ce085
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5e1eb93a.livecodes.pages.dev |
| Branch Preview URL: | https://ui-fixes.livecodes.pages.dev |
WalkthroughThree iframes ( ChangesAccessibility and UI Styling Fixes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Stylelint (17.13.0)src/livecodes/styles/app.scssConfigurationError: Could not find "stylelint-config-sass-guidelines". Do you need to install the package or use the "configBasedir" option? src/livecodes/styles/inc-modal.scssConfigurationError: Could not find "stylelint-config-sass-guidelines". Do you need to install the package or use the "configBasedir" option? src/livecodes/styles/inc-menu.scssConfigurationError: Could not find "stylelint-config-sass-guidelines". Do you need to install the package or use the "configBasedir" option? Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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.
Inline comments:
In `@src/livecodes/core.ts`:
- Line 290: The hardcoded string 'Result' assigned to iframe.title in the
core.ts file is a user-facing label that should be localized through the i18n
system instead of being a literal string. Replace the hardcoded 'Result' string
with an appropriate i18n key reference, add the text string to the i18n
resources, and then run npm run i18n-export to update the internationalization
exports as per the coding guidelines.
In `@src/livecodes/main.ts`:
- Line 87: The hardcoded string "LiveCodes App" in the iframe.title assignment
is user-facing text that should be localized through the i18n system. Extract
this string from the hardcoded literal in the iframe.title line and add it to
the i18n resources file. Replace the hardcoded string with a reference to the
i18n resource key. After adding the new text to the i18n resources, run npm run
i18n-export as per the coding guidelines to complete the internationalization
flow.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 25942888-2644-4fbb-8a0f-5c1a7f4a7675
📒 Files selected for processing (6)
src/livecodes/core.tssrc/livecodes/main.tssrc/livecodes/styles/app.scsssrc/livecodes/styles/inc-menu.scsssrc/livecodes/styles/inc-modal.scsssrc/sdk/index.ts
| iframe = document.createElement('iframe'); | ||
| iframe.name = 'result'; | ||
| iframe.id = 'result-frame'; | ||
| iframe.title = 'Result'; |
There was a problem hiding this comment.
Localize the iframe title instead of hardcoding it
This user-facing label should come from i18n resources, not a literal string.
Suggested change
- iframe.title = 'Result';
+ iframe.title = window.deps.translateString('core.resultFrameTitle', 'Result');As per coding guidelines, src/livecodes/**/*.{ts,tsx,html}: Export user-facing text strings for internationalization; run npm run i18n-export after adding new text.
🤖 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/livecodes/core.ts` at line 290, The hardcoded string 'Result' assigned to
iframe.title in the core.ts file is a user-facing label that should be localized
through the i18n system instead of being a literal string. Replace the hardcoded
'Result' string with an appropriate i18n key reference, add the text string to
the i18n resources, and then run npm run i18n-export to update the
internationalization exports as per the coding guidelines.
Source: Coding guidelines
|
|
||
| const iframe = document.createElement('iframe'); | ||
| iframe.name = 'app'; | ||
| iframe.title = 'LiveCodes App'; |
There was a problem hiding this comment.
Move iframe title text to i18n resources
"LiveCodes App" is user-facing and should be localized via existing i18n flow.
As per coding guidelines, src/livecodes/**/*.{ts,tsx,html}: Export user-facing text strings for internationalization; run npm run i18n-export after adding new text.
🤖 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/livecodes/main.ts` at line 87, The hardcoded string "LiveCodes App" in
the iframe.title assignment is user-facing text that should be localized through
the i18n system. Extract this string from the hardcoded literal in the
iframe.title line and add it to the i18n resources file. Replace the hardcoded
string with a reference to the i18n resource key. After adding the new text to
the i18n resources, run npm run i18n-export as per the coding guidelines to
complete the internationalization flow.
Source: Coding guidelines
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — UI polish and accessibility: focus outline consistency, menu CSS cleanup, modal tab color alignment, and iframe titles.
- Focus outline consistency —
.snackbar--button:focusnow uses the samevar(--outline-color)outline as the global:focus-visiblerule; Monaco editor getsoutline: noneto prevent flash on editor switch. - Menu submenu refactoring —
#app-menu-projectsubmenu show rules simplified toli:hover > .submenu/li:focus-within > .submenu; stale selectors for#app-menu-help(no submenus) and#open-list(no matching ID) removed. - Modal tab accent color — Changed from
var(--brand-cyan)tovar(--outline-color)for consistency with the focus ring, adapting saturation for light theme. - Iframe titles —
titleattributes added to app iframe (LiveCodes App), result iframe (Result), and SDK embed iframe (LiveCodes Embedded Playground) for screen reader accessibility.
DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏
|
1 participant
Summary by CodeRabbit
Style
Accessibility