feat(code): iframe component - #203
Open
coryrylan wants to merge 1 commit into
Open
Conversation
github-actions
Bot
added
scope(internals)
scope(code)
scope(docs)
dependencies
📝 WalkthroughWalkthroughThe PR adds the ChangesIframe component
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant ParentDocument
participant Iframe
participant ResizeObserver
ParentDocument->>Iframe: Render templated srcdoc
ParentDocument->>Iframe: Send theme message
Iframe->>ResizeObserver: Observe body size
ResizeObserver-->>Iframe: Report dimensions
Iframe-->>ParentDocument: Send resize message
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 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. 🔧 ESLint
projects/code/package.jsonESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. projects/code/src/bundle.tsESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox. projects/code/src/iframe/define.tsESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.
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: 4
🤖 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 `@projects/code/src/iframe/iframe.css`:
- Around line 4-18: In the :host rule, insert a blank line after the
custom-property declarations and before display: block;, preserving all existing
declarations and values.
In `@projects/code/src/iframe/iframe.examples.ts`:
- Around line 17-28: Add a descriptive aria-label to every nve-iframe example so
each native browsing context has an accessible name. Update
projects/code/src/iframe/iframe.examples.ts at 17-28, 38-56, 66-68, 78-92, and
102-106, and apply the same requirement to the installation sample in
projects/site/src/docs/code/iframe.md at 16-27.
In `@projects/code/src/iframe/iframe.test.axe.ts`:
- Around line 11-19: Update the beforeEach setup for element in the Iframe
metadata test to call querySelector with the Iframe generic and explicitly
reject a null result, matching the guard pattern used in iframe.test.ts.
In `@projects/code/src/iframe/iframe.ts`:
- Around line 106-113: Update the iframe title binding in render() to use a
non-empty fallback such as “Embedded content” whenever ariaLabel is unset or
empty, while preserving the configured ariaLabel when provided.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: 93881312-ebe3-426c-b886-89a6b6572cf7
📒 Files selected for processing (17)
projects/code/DEVELOPMENT.mdprojects/code/package.jsonprojects/code/src/bundle.tsprojects/code/src/iframe/define.tsprojects/code/src/iframe/iframe.cssprojects/code/src/iframe/iframe.examples.tsprojects/code/src/iframe/iframe.test.axe.tsprojects/code/src/iframe/iframe.test.lighthouse.tsprojects/code/src/iframe/iframe.test.ssr.tsprojects/code/src/iframe/iframe.test.tsprojects/code/src/iframe/iframe.tsprojects/code/src/iframe/index.tsprojects/code/src/index.test.lighthouse.tsprojects/code/vitest.ssr.tsprojects/internals/eslint/src/local/example-approved-domains.jsprojects/site/src/_11ty/layouts/common.jsprojects/site/src/docs/code/iframe.md
- Added the nve-iframe component to render isolated content with dynamic height and theme synchronization. - Implemented iframe styling and functionality to handle resizing and theme updates. Signed-off-by: Cory Rylan <crylan@nvidia.com>
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
projects/code/src/iframe/iframe.css (1)
4-12: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winAdd the blank line Stylelint requires before
display: block;.The
declaration-empty-line-beforerule still flags line 8. Insert a blank line between the custom-property declarations and the regular declarations.🎨 Proposed fix
:host { --width: var(--_width, fit-content); --height: var(--_height, fit-content); --border: none; + display: block; width: fit-content; height: fit-content; border: var(--border); }🤖 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 `@projects/code/src/iframe/iframe.css` around lines 4 - 12, In the :host rule, insert a blank line after the custom-property declarations for --width, --height, and --border, before the display declaration, to satisfy Stylelint's declaration-empty-line-before rule.Source: Linters/SAST tools
projects/code/src/iframe/iframe.ts (1)
106-113: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winProvide a non-empty fallback for the iframe
title.
title=${this.ariaLabel}has no fallback. WhenariaLabelis unset, Lit renderstitle="", not a removed attribute. Official Lit documentation confirms this: "In attribute expressions, nothing removes the attribute, while undefined and null will render an empty string." An emptytitleon the internal iframe fails accessibility checks (as flagged by the Lighthouse fixture in a prior review, before it was updated to always passaria-label).Add a fallback, e.g.,
title=${this.ariaLabel || 'Embedded content'}.🐛 Proposed fix
render() { return html`<iframe internal-host - title=${this.ariaLabel} + title=${this.ariaLabel || 'Embedded content'} sandbox="allow-scripts" `@load`=${this.#syncTheme} ></iframe>`; }🤖 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 `@projects/code/src/iframe/iframe.ts` around lines 106 - 113, Update the iframe title binding in render() to use a non-empty fallback when ariaLabel is unset, such as “Embedded content,” while preserving the configured ariaLabel when provided.
🤖 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 `@projects/code/src/iframe/iframe.ts`:
- Around line 65-77: Update the class-level `@description` in the nve-iframe JSDoc
to use clear active voice, replacing the awkward usage phrase with wording that
identifies the component as the subject while preserving the meaning about
rendering dynamically generated or isolated content.
In `@projects/site/src/docs/code/iframe.md`:
- Around line 38-40: Add documentation sections in the iframe guide alongside
the existing Fixed Size example for the public OverflowClip and
DynamicallyUpdatedContent examples. Reference the corresponding example names
from iframe.examples.json so the overflow boundary and dynamically updated
content behaviors are exposed consistently with the existing sections.
---
Duplicate comments:
In `@projects/code/src/iframe/iframe.css`:
- Around line 4-12: In the :host rule, insert a blank line after the
custom-property declarations for --width, --height, and --border, before the
display declaration, to satisfy Stylelint's declaration-empty-line-before rule.
In `@projects/code/src/iframe/iframe.ts`:
- Around line 106-113: Update the iframe title binding in render() to use a
non-empty fallback when ariaLabel is unset, such as “Embedded content,” while
preserving the configured ariaLabel when provided.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: 1ab30b26-6333-4b70-95c4-ba975f88cb5d
📒 Files selected for processing (17)
projects/code/DEVELOPMENT.mdprojects/code/package.jsonprojects/code/src/bundle.tsprojects/code/src/iframe/define.tsprojects/code/src/iframe/iframe.cssprojects/code/src/iframe/iframe.examples.tsprojects/code/src/iframe/iframe.test.axe.tsprojects/code/src/iframe/iframe.test.lighthouse.tsprojects/code/src/iframe/iframe.test.ssr.tsprojects/code/src/iframe/iframe.test.tsprojects/code/src/iframe/iframe.tsprojects/code/src/iframe/index.tsprojects/code/src/index.test.lighthouse.tsprojects/code/vitest.ssr.tsprojects/internals/eslint/src/local/example-approved-domains.jsprojects/site/src/_11ty/layouts/common.jsprojects/site/src/docs/code/iframe.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
nve-iframecomponent for rendering isolated, sandboxed content.Documentation
Tests