展開省略的議程資訊#259
Conversation
…h expandable rows
Dokploy Preview Deployment
|
📝 WalkthroughWalkthrough
ChangesTrack session table
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
There was a problem hiding this comment.
Pull request overview
This PR updates the session track table UI to allow expanding a track row so previously truncated session card content (e.g., title/speaker) can wrap and display fully, fitting the agenda view’s grid-based layout.
Changes:
- Add a per-session
keyand asessionsByKeycomputed Map to group sessions by track row. - Restructure the grid rendering to iterate per track row and render that row’s gridlines, sticky label cell, and sessions together.
- Introduce a CSS
:has()-driven expand toggle (chevron + hidden checkbox) and switch grid rows tominmax(rowHeight, auto)to support variable row heights.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <label class="expand-chevron-label text-[#99a1af] p-1 rounded-[4px] flex cursor-pointer transition-colors items-center"> | ||
| <input | ||
| class="sr-only" | ||
| type="checkbox" | ||
| > | ||
| <span class="expand-chevron-icon inline-flex transition-transform"> |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cc17017a52
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| <input | ||
| class="sr-only" | ||
| type="checkbox" |
There was a problem hiding this comment.
When the table is operated with a screen reader, this new control is exposed as a checkbox but its <label> contains only the icon and no text/aria-label, so users hear an unlabeled checkbox and cannot tell it expands the track row. Please give the input or label an accessible name such as aria-label tied to the track.
Useful? React with 👍 / 👎.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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 `@app/components/feature/CpSessionTrackTable.vue`:
- Around line 396-407: Add an accessible aria-label to the
checkbox/expand-chevron control in CpSessionTrackTable.vue, using the current
expand/collapse state and track name where available; add the corresponding
expandTrack translation key to every locale with appropriate fallback handling.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 2b467d66-976f-4b30-a129-fcb5b0e36a3f
📒 Files selected for processing (1)
app/components/feature/CpSessionTrackTable.vue
| <label class="expand-chevron-label text-[#99a1af] p-1 rounded-[4px] flex cursor-pointer transition-colors items-center"> | ||
| <input | ||
| class="sr-only" | ||
| type="checkbox" | ||
| > | ||
| <span class="expand-chevron-icon inline-flex transition-transform"> | ||
| <Icon | ||
| class="text-[16px]" | ||
| name="tabler:chevron-down" | ||
| /> | ||
| </span> | ||
| </label> |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Expand/collapse toggle has no accessible name.
The checkbox is sr-only and the enclosing <label> contains only a decorative chevron Icon, so assistive tech announces an unnamed "checkbox" with no indication of its purpose. Add an aria-label (ideally reflecting the current state and track) so the control is operable by screen-reader users.
♿ Proposed fix
<label class="expand-chevron-label text-[`#99a1af`] p-1 rounded-[4px] flex cursor-pointer transition-colors items-center">
<input
+ :aria-label="t('expandTrack', { track: track.name })"
class="sr-only"
type="checkbox"
>Add the corresponding expandTrack key to each locale message file (with fallback handling) if it does not already exist.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <label class="expand-chevron-label text-[#99a1af] p-1 rounded-[4px] flex cursor-pointer transition-colors items-center"> | |
| <input | |
| class="sr-only" | |
| type="checkbox" | |
| > | |
| <span class="expand-chevron-icon inline-flex transition-transform"> | |
| <Icon | |
| class="text-[16px]" | |
| name="tabler:chevron-down" | |
| /> | |
| </span> | |
| </label> | |
| <label class="expand-chevron-label text-[`#99a1af`] p-1 rounded-[4px] flex cursor-pointer transition-colors items-center"> | |
| <input | |
| :aria-label="t('expandTrack', { track: track.name })" | |
| class="sr-only" | |
| type="checkbox" | |
| > | |
| <span class="expand-chevron-icon inline-flex transition-transform"> | |
| <Icon | |
| class="text-[16px]" | |
| name="tabler:chevron-down" | |
| /> | |
| </span> | |
| </label> |
🤖 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 `@app/components/feature/CpSessionTrackTable.vue` around lines 396 - 407, Add
an accessible aria-label to the checkbox/expand-chevron control in
CpSessionTrackTable.vue, using the current expand/collapse state and track name
where available; add the corresponding expandTrack translation key to every
locale with appropriate fallback handling.
…h expandable rows
Summary by CodeRabbit
New Features
UI Improvements