🎨 Palette: FeedButtonのフォーカス状態とURL自動選択の追加#1116
Conversation
Release: staging -> main (2026-07-14 00:29)
Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
このリポジトリでは staging 先行フローを採用しています。PR のターゲットを |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request enhances the accessibility and user experience of the FeedButton component by adding explicit focus-visible ring styles to the main button, the URL textarea, the copy button, and the open link. Additionally, it implements an automatic text selection feature on focus for the read-only URL textarea to facilitate copying. A corresponding learning entry has also been added to .Jules/palette.md. There are no review comments, so I have no feedback to provide.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| export function FeedButton({ | ||
| url, | ||
| className = "rounded-md border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800", | ||
| className = "rounded-md border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white dark:focus-visible:ring-offset-gray-950", |
There was a problem hiding this comment.
トリガーボタンのフォーカス用スタイル（focus-visible:ring-*）は className のデフォルト値に含まれているため、呼び出し元が独自の className を渡した場合に丸ごと失われます。一方、ポップオーバー内の textarea・コピーボタン・「開く」リンクはクラスがハードコードされているため常にフォーカスリングが表示されます。この非対称性により、カスタム className を使う呼び出し元でトリガーだけアクセシビリティが劣化します。cn() や別のメカニズムでフォーカス用スタイルをマージする構造にするか、少なくとも型や JSDoc でこの制約を明示することを検討してください。
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/src/components/feed-button.tsx
Line: 16
Comment:
**トリガーボタンのフォーカスリングがオーバーライド可能な問題**
トリガーボタンのフォーカス用スタイル（`focus-visible:ring-*`）は `className` のデフォルト値に含まれているため、呼び出し元が独自の `className` を渡した場合に丸ごと失われます。一方、ポップオーバー内の textarea・コピーボタン・「開く」リンクはクラスがハードコードされているため常にフォーカスリングが表示されます。この非対称性により、カスタム `className` を使う呼び出し元でトリガーだけアクセシビリティが劣化します。`cn()` や別のメカニズムでフォーカス用スタイルをマージする構造にするか、少なくとも型や JSDoc でこの制約を明示することを検討してください。
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
|
Warning Review limit reached
Next review available in: 15 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ 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 |
|
Closing because this Jules-managed branch cannot maintain a stable review-loop head: after the target branch is incorporated or a review fix is pushed, the bot appends the original generated change again. The current head is therefore not reliably the commit that passed target-fresh CI and review. |
了解いたしました。タスクが終了（obsolete）となったため、これ以上の作業は中止します。 |
1 participant
💡 What
focus-visibleスタイル) を追加しました。🎯 Why
📸 Before/After
♿ Accessibility
PR created automatically by Jules for task 3132800459713501280 started by @is0692vs
Greptile Summary
キーボードアクセシビリティ改善のPRです。FeedButtonコンポーネント内の全インタラクティブ要素（トリガーボタン・テキストエリア・コピーボタン・開くリンク）に
focus-visible:ringスタイルを追加し、URLテキストエリアへのフォーカス時に自動選択（onFocus={(e) => e.target.select()}）を追加しています。focus-visible:ring-2/dark:focus-visible:ring-whiteを追加し、キーボード操作時のフォーカス位置を視覚化onFocus自動選択を追加し、URL コピーの UX を向上.Jules/palette.mdに今回の学習内容を追記Confidence Score: 4/5
キーボードアクセシビリティの改善のみであり、機能ロジックへの影響はありません。安全にマージできます。
トリガーボタンのフォーカス用スタイルが
classNameのデフォルト値に組み込まれているため、呼び出し元が独自のclassNameを渡した場合に暗黙的に失われる構造があります。ポップオーバー内の要素はハードコードされているため常に有効ですが、トリガーだけこの非対称性が存在します。トリガーボタンの
classNameデフォルト値のフォーカス用スタイルについて、apps/web/src/components/feed-button.tsxを確認してください。Important Files Changed
focus-visible:ringスタイルを追加し、テキストエリアにonFocusでの自動選択を追加。トリガーボタンのフォーカス用スタイルがclassNameデフォルト値にのみ存在するため、カスタムclassNameを渡した呼び出し元では失われる構造になっている。Sequence Diagram
%%{init: {'theme': 'neutral'}}%% sequenceDiagram actor User as キーボードユーザー participant Trigger as トリガーボタン participant Dialog as ポップオーバー (dialog) participant Textarea as URL テキストエリア participant Copy as コピーボタン participant Open as 開くリンク User->>Trigger: Tab フォーカス Note over Trigger: focus-visible:ring 表示 ✅ User->>Trigger: Enter/Space クリック Trigger->>Dialog: ポップオーバーを開く User->>Textarea: Tab フォーカス Note over Textarea: focus-visible:ring 表示 ✅ Textarea->>Textarea: onFocus → e.target.select() (URL全選択) ✅ User->>Copy: Tab フォーカス Note over Copy: focus-visible:ring 表示 ✅ User->>Copy: Enter クリック → URLをクリップボードにコピー User->>Open: Tab フォーカス Note over Open: focus-visible:ring 表示 ✅ User->>Open: Enter クリック → 新タブでフィードを開く%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%% sequenceDiagram actor User as キーボードユーザー participant Trigger as トリガーボタン participant Dialog as ポップオーバー (dialog) participant Textarea as URL テキストエリア participant Copy as コピーボタン participant Open as 開くリンク User->>Trigger: Tab フォーカス Note over Trigger: focus-visible:ring 表示 ✅ User->>Trigger: Enter/Space クリック Trigger->>Dialog: ポップオーバーを開く User->>Textarea: Tab フォーカス Note over Textarea: focus-visible:ring 表示 ✅ Textarea->>Textarea: onFocus → e.target.select() (URL全選択) ✅ User->>Copy: Tab フォーカス Note over Copy: focus-visible:ring 表示 ✅ User->>Copy: Enter クリック → URLをクリップボードにコピー User->>Open: Tab フォーカス Note over Open: focus-visible:ring 表示 ✅ User->>Open: Enter クリック → 新タブでフィードを開くPrompt To Fix All With AI
Reviews (1): Last reviewed commit: "feat(ui): improve keyboard accessibility..." | Re-trigger Greptile
Context used: