Align enterprise page with product design#855
Conversation
📝 WalkthroughWalkthroughThe enterprise page now uses a ChangesEnterprise Page Redesign
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
Visual diffGenerated with
Summary:
Diff images are in |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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 `@apps/web/src/pages/enterprise.astro`:
- Around line 982-1034: The enterprise page styles are relying on fragile
positional selectors inside SolutionAppExample, so a wrapper or child-order
change will break the theming. Update the enterprise-specific rules in
enterprise.astro to target a stable hook exposed by SolutionAppExample, such as
a dedicated class, data-attribute, or part, and replace the > div >
div:first-child and a:nth-child(2) selectors with that explicit hook.
- Line 425: The new enterprise testimonial and related section copy are
hardcoded English and bypass the existing locale-based messaging on
enterprise.astro. Move the headings/body text at the enterprise testimonial and
the other newly added sections into the message catalog and render them through
the existing m.* pattern used elsewhere on the page, so locale-specific content
is selected consistently for all languages.
- Around line 1013-1029: Add visible :focus-visible styling for the app-example
anchor links in enterprise.astro, since the current rules for
.enterprise-product `#real-app-examples` > div > div:first-child a and
`#app-examples-cta` a only define hover states. Update the link selectors in this
section to include a matching focus-visible treatment (same kind of visual
emphasis as hover, without removing outline accessibility) so keyboard users can
clearly see focus on both the real-app examples links and the app-examples CTA.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: c3d24c95-1142-46e2-b454-48b1836f9063
📒 Files selected for processing (4)
_typos.tomlapps/web/public/pr-screenshots/enterprise-product-design.webpapps/web/src/pages/enterprise.astroapps/web/src/pages/native-build.astro
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
Cap-go/capacitor-updater(manual)
💤 Files with no reviewable changes (1)
- apps/web/src/pages/native-build.astro
Visual diffGenerated with
Summary:
Diff images are in |
|
Visual diffGenerated with
Summary:
Diff images are in |
…-product-design # Conflicts: # _typos.toml
Visual diffGenerated with
Summary:
Diff images are in |
Visual diffGenerated with
Summary:
Diff images are in |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/pages/enterprise.astro (1)
553-568: 🎯 Functional Correctness | 🔵 Trivial | ⚖️ Poor tradeoffComparison "table" loses structure for assistive tech and on mobile.
This grid is built from
div/span/strongrather than a real<table>, so screen readers get no column/row association between the header cells (Use case / Before / With Capgo Enterprise) and each row's data. At<820px(Line 947) the columns collapse into a single stack, leavingbefore/aftertext with no visible label to distinguish them. Consider a semantic<table>(withscope="col"headers), or at minimum render the column label inline within each cell for the stacked mobile layout.🤖 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 `@apps/web/src/pages/enterprise.astro` around lines 553 - 568, The enterprise comparison section built in the enterprise table markup should be made accessible and readable on mobile by replacing the current div/span/strong layout with a semantic table in the enterprise comparison rows or by adding explicit per-cell labels. Update the enterprise table header and the enterpriseBeforeAfterRows rendering so screen readers can associate Use case / Before / With Capgo Enterprise with each row, and ensure the <820px stacked layout still shows the column label inline with each before/after cell. Use the existing enterprise-table-wrap, enterprise-table-head, and enterpriseBeforeAfterRows structures to locate and refactor the comparison markup.
🤖 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 `@apps/web/src/pages/enterprise.astro`:
- Around line 402-407: Mark the four hero-meta checkmark spans as decorative by
adding aria-hidden="true" to each .check element in the enterprise hero markup.
Update the hero-meta block in enterprise.astro so it matches the other checkmark
usages in this file and keeps screen readers from announcing the glyph before
each label.
---
Outside diff comments:
In `@apps/web/src/pages/enterprise.astro`:
- Around line 553-568: The enterprise comparison section built in the enterprise
table markup should be made accessible and readable on mobile by replacing the
current div/span/strong layout with a semantic table in the enterprise
comparison rows or by adding explicit per-cell labels. Update the enterprise
table header and the enterpriseBeforeAfterRows rendering so screen readers can
associate Use case / Before / With Capgo Enterprise with each row, and ensure
the <820px stacked layout still shows the column label inline with each
before/after cell. Use the existing enterprise-table-wrap,
enterprise-table-head, and enterpriseBeforeAfterRows structures to locate and
refactor the comparison markup.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 10ca0e9c-4e30-4a84-a676-03effe9523a0
📒 Files selected for processing (4)
apps/shared/copy/messages.tsapps/web/public/pr-screenshots/enterprise-product-design.webpapps/web/src/components/solutions/SolutionAppExample.astroapps/web/src/pages/enterprise.astro
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
Cap-go/capacitor-updater(manual)
Visual diffGenerated with
Summary:
Diff images are in |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/pages/enterprise.astro (1)
700-714: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winAdd a live region for the FAQ answers.
Opening these
<details>rows reveals dynamic content, but.enterprise-faq-answeris not exposed through anaria-liveregion, so screen readers will not get the opened answer announced. Add a polite live region here or mirror the opened answer into a shared live announcer. As per coding guidelines,**/*.{astro,jsx,tsx,js,ts}: Dynamic content must use aria-live regions for accessibility.🤖 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 `@apps/web/src/pages/enterprise.astro` around lines 700 - 714, The FAQ expansion in enterpriseFaqItems is revealing dynamic answer content without any aria-live support, so screen readers won’t announce the opened text. Update the enterprise.astro FAQ rendering around the details/summary and .enterprise-faq-answer markup to include a polite live region, or mirror the active answer into a shared announcer that updates when a row opens. Keep the solution tied to the existing enterprise-faq-grid, enterprise-faq-item, and enterprise-faq-answer structure so the announcement follows the currently expanded item.Source: Coding guidelines
🤖 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 `@apps/web/src/pages/enterprise.astro`:
- Around line 556-582: The enterprise comparison table in enterprise.astro is
hiding the only header row from assistive tech on mobile while keeping the
wrapper exposed as a table, which removes header context for the stacked cells.
Update the enterprise-table-head / enterprise-table-wrap markup so the headers
remain in the accessibility tree (for example, visually hide the header row
instead of using display: none), or alternatively remove the table-related roles
in the mobile stacked layout. Keep the columnheader, rowheader, and cell
structure in sync with the responsive design, including the
enterpriseBeforeAfterRows rendering and the related comparison labels.
---
Outside diff comments:
In `@apps/web/src/pages/enterprise.astro`:
- Around line 700-714: The FAQ expansion in enterpriseFaqItems is revealing
dynamic answer content without any aria-live support, so screen readers won’t
announce the opened text. Update the enterprise.astro FAQ rendering around the
details/summary and .enterprise-faq-answer markup to include a polite live
region, or mirror the active answer into a shared announcer that updates when a
row opens. Keep the solution tied to the existing enterprise-faq-grid,
enterprise-faq-item, and enterprise-faq-answer structure so the announcement
follows the currently expanded item.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 74ac82e2-da6e-495b-8591-cd0dab1d06c1
📒 Files selected for processing (2)
apps/web/public/pr-screenshots/enterprise-product-design.webpapps/web/src/pages/enterprise.astro
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
Cap-go/capacitor-updater(manual)
Visual diffGenerated with
Summary:
Diff images are in |
Visual diffGenerated with
Summary:
Diff images are in |
Visual diffGenerated with
Summary:
Diff images are in |
Visual diffGenerated with
Summary:
Diff images are in |
Visual diffGenerated with
Summary:
Diff images are in |
Visual diffGenerated with
Summary:
Diff images are in |
Visual diffGenerated with
Summary:
Diff images are in |
1 participant
Summary
Screenshot
Visual diff
Generated with
bun run visual-diff:compare(2 screenshots, fuzz 1%).Summary:
Validation
bunx prettier --write apps/web/src/pages/enterprise.astro apps/shared/copy/messages.tsgit diff --checkbun run buildNODE_OPTIONS=--max-old-space-size=16384 bunx astro checkinapps/webbun run visual-diff:capture:after -- --suite web --routes /enterprise/bun run visual-diff:comparebun run visual-diff:report