Website: add tabs to homepage comparison table#46407
Merged
Merged
Conversation
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Claude Code Review
This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.
Tip: disable this comment in your organization's Code Review settings.
fleet-release
added
the
~ga4-annotation
fleet-release
approved these changes
May 28, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Replaces the desktop comparison-table dropdown on the homepage with a row of clickable tabs, and adds matching LESS styles (including a smaller variant for ≤991px viewports).
Changes:
- Swap dropdown markup for five
comparison-tabdivs bound toclickSwitchComparisonTableColumn. - Add
[purpose='comparison-table-tabs']styles with active underline. - Add reduced padding/font size for the tabs at
max-width: 991px.
Reviewed changes
Copilot reviewed 1 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| website/views/pages/homepage.ejs | Replaces desktop comparison dropdown with five tab divs; selected friendly name still shown in header. |
| website/assets/styles/pages/homepage.less | Adds tab container/tab/active styles and a responsive override at ≤991px. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
WalkthroughThis PR replaces the dropdown-based vendor selector in the homepage "Moving to Fleet?" comparison table with a horizontal tab control. The tabs display five vendors (Jamf Pro, Workspace ONE, SCCM, Intune, PatchMyPC) as clickable elements that trigger Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@website/views/pages/homepage.ejs`:
- Around line 181-187: The clickable vendor tabs are implemented as <div>s and
are not keyboard-accessible; change each <div purpose="comparison-tab" ...> to a
semantic <button type="button"> while keeping the :class binding and
data-compare-with attribute and preserving the `@click` handler
clickSwitchComparisonTableColumn('...'); also add appropriate ARIA state (e.g.
aria-pressed or aria-selected bound to comparisonModeForIt === '<vendor>') and
ensure the container conveys a tablist/toolbar role if needed so keyboard and
screen-reader users can switch vendors with the existing
clickSwitchComparisonTableColumn logic.
🪄 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: CHILL
Plan: Pro
Run ID: a48ab580-a560-4c1f-a963-59bf660b1336
📒 Files selected for processing (2)
website/assets/styles/pages/homepage.lesswebsite/views/pages/homepage.ejs
Comment on lines
+181
to
+187
| <div purpose="comparison-table-tabs"> | ||
| <div purpose="comparison-tab" :class="[comparisonModeForIt === 'jamf' ? 'active' : '']" data-compare-with="jamf" @click="clickSwitchComparisonTableColumn('jamf')"><strong>Jamf Pro</strong></div> | ||
| <div purpose="comparison-tab" :class="[comparisonModeForIt === 'omnissa' ? 'active' : '']" data-compare-with="omnissa" @click="clickSwitchComparisonTableColumn('omnissa')"><strong>Workspace ONE</strong></div> | ||
| <div purpose="comparison-tab" :class="[comparisonModeForIt === 'sccm' ? 'active' : '']" data-compare-with="sccm" @click="clickSwitchComparisonTableColumn('sccm')"><strong>SCCM</strong></div> | ||
| <div purpose="comparison-tab" :class="[comparisonModeForIt === 'intune' ? 'active' : '']" data-compare-with="intune" @click="clickSwitchComparisonTableColumn('intune')"><strong>Intune</strong></div> | ||
| <div purpose="comparison-tab" :class="[comparisonModeForIt === 'patchmypc' ? 'active' : '']" data-compare-with="patchmypc" @click="clickSwitchComparisonTableColumn('patchmypc')"><strong>PatchMyPC</strong></div> | ||
| </div> |
Contributor
There was a problem hiding this comment.
Use semantic buttons for tab controls (keyboard/a11y blocker).
Line 182–Line 186 use clickable <div>s, which are not keyboard-accessible by default. Desktop users navigating by keyboard/screen reader can’t reliably switch vendors.
Suggested fix
- <div purpose="comparison-table-tabs">
- <div purpose="comparison-tab" :class="[comparisonModeForIt === 'jamf' ? 'active' : '']" data-compare-with="jamf" `@click`="clickSwitchComparisonTableColumn('jamf')"><strong>Jamf Pro</strong></div>
- <div purpose="comparison-tab" :class="[comparisonModeForIt === 'omnissa' ? 'active' : '']" data-compare-with="omnissa" `@click`="clickSwitchComparisonTableColumn('omnissa')"><strong>Workspace ONE</strong></div>
- <div purpose="comparison-tab" :class="[comparisonModeForIt === 'sccm' ? 'active' : '']" data-compare-with="sccm" `@click`="clickSwitchComparisonTableColumn('sccm')"><strong>SCCM</strong></div>
- <div purpose="comparison-tab" :class="[comparisonModeForIt === 'intune' ? 'active' : '']" data-compare-with="intune" `@click`="clickSwitchComparisonTableColumn('intune')"><strong>Intune</strong></div>
- <div purpose="comparison-tab" :class="[comparisonModeForIt === 'patchmypc' ? 'active' : '']" data-compare-with="patchmypc" `@click`="clickSwitchComparisonTableColumn('patchmypc')"><strong>PatchMyPC</strong></div>
- </div>
+ <div purpose="comparison-table-tabs">
+ <button type="button" purpose="comparison-tab" :class="[comparisonModeForIt === 'jamf' ? 'active' : '']" :aria-pressed="comparisonModeForIt === 'jamf'" data-compare-with="jamf" `@click`="clickSwitchComparisonTableColumn('jamf')"><strong>Jamf Pro</strong></button>
+ <button type="button" purpose="comparison-tab" :class="[comparisonModeForIt === 'omnissa' ? 'active' : '']" :aria-pressed="comparisonModeForIt === 'omnissa'" data-compare-with="omnissa" `@click`="clickSwitchComparisonTableColumn('omnissa')"><strong>Workspace ONE</strong></button>
+ <button type="button" purpose="comparison-tab" :class="[comparisonModeForIt === 'sccm' ? 'active' : '']" :aria-pressed="comparisonModeForIt === 'sccm'" data-compare-with="sccm" `@click`="clickSwitchComparisonTableColumn('sccm')"><strong>SCCM</strong></button>
+ <button type="button" purpose="comparison-tab" :class="[comparisonModeForIt === 'intune' ? 'active' : '']" :aria-pressed="comparisonModeForIt === 'intune'" data-compare-with="intune" `@click`="clickSwitchComparisonTableColumn('intune')"><strong>Intune</strong></button>
+ <button type="button" purpose="comparison-tab" :class="[comparisonModeForIt === 'patchmypc' ? 'active' : '']" :aria-pressed="comparisonModeForIt === 'patchmypc'" data-compare-with="patchmypc" `@click`="clickSwitchComparisonTableColumn('patchmypc')"><strong>PatchMyPC</strong></button>
+ </div>🤖 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 `@website/views/pages/homepage.ejs` around lines 181 - 187, The clickable
vendor tabs are implemented as <div>s and are not keyboard-accessible; change
each <div purpose="comparison-tab" ...> to a semantic <button type="button">
while keeping the :class binding and data-compare-with attribute and preserving
the `@click` handler clickSwitchComparisonTableColumn('...'); also add appropriate
ARIA state (e.g. aria-pressed or aria-selected bound to comparisonModeForIt ===
'<vendor>') and ensure the container conveys a tablist/toolbar role if needed so
keyboard and screen-reader users can switch vendors with the existing
clickSwitchComparisonTableColumn logic.
mike-j-thomas
approved these changes
May 29, 2026
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.
Changes:
Summary by CodeRabbit