🎨 Palette: Markdownエディタのキーボードアクセシビリティ改善#1141
Conversation
Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
|
👋 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. |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
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? |
|
Warning Review limit reached
Next review available in: 32 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 |
|
このリポジトリでは 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 improves keyboard navigation accessibility in the MarkdownEditor component by adding focus-visible rings to the tab buttons and the textarea, and documents this improvement in .Jules/palette.md. The reviewer suggested adding rounded corner classes (rounded-tl-md for the "Write" button and rounded-b-md for the textarea) to align with the parent container's rounded corners and prevent the focus rings from overflowing.
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.
| tabIndex={mode === "write" ? 0 : -1} | ||
| onClick={() => onModeChange("write")} | ||
| className={`px-3 py-2 text-sm ${mode === "write" ? "bg-gray-100 font-medium dark:bg-gray-800" : ""}`} | ||
| className={`px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-gray-100 ${mode === "write" ? "bg-gray-100 font-medium dark:bg-gray-800" : ""}`} |
There was a problem hiding this comment.
親コンテナ（rounded-md）の角丸と合わせるため、一番左のタブである「Write」ボタンに rounded-tl-md を追加することをおすすめします。
これがないと、タブがアクティブな時の背景色（bg-gray-100 / dark:bg-gray-800）や、キーボードフォーカス時のインセットリング（focus-visible:ring-inset）の左上部分が、親コンテナの角丸を突き抜けて四角くはみ出して表示されてしまいます。
| className={`px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-gray-100 ${mode === "write" ? "bg-gray-100 font-medium dark:bg-gray-800" : ""}`} | |
| className={`px-3 py-2 text-sm rounded-tl-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-gray-100 ${mode === "write" ? "bg-gray-100 font-medium dark:bg-gray-800" : ""}`} |
| onChange={(e) => onChange(e.target.value)} | ||
| rows={12} | ||
| className="w-full resize-y border-0 bg-transparent p-3 font-mono text-sm focus:outline-none" | ||
| className="w-full resize-y border-0 bg-transparent p-3 font-mono text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-gray-100" |
There was a problem hiding this comment.
親コンテナ（rounded-md）の角丸と合わせるため、textarea に rounded-b-md を追加することをおすすめします。
これがないと、キーボードフォーカス時に表示されるインセットリング（focus-visible:ring-inset）の下側の角が四角いままになり、親コンテナの丸い角と干渉して見た目が不自然になってしまいます。
| className="w-full resize-y border-0 bg-transparent p-3 font-mono text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-gray-100" | |
| className="w-full resize-y border-0 bg-transparent p-3 font-mono text-sm rounded-b-md focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-gray-100" |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| tabIndex={mode === "write" ? 0 : -1} | ||
| onClick={() => onModeChange("write")} | ||
| className={`px-3 py-2 text-sm ${mode === "write" ? "bg-gray-100 font-medium dark:bg-gray-800" : ""}`} | ||
| className={`px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-gray-100 ${mode === "write" ? "bg-gray-100 font-medium dark:bg-gray-800" : ""}`} |
There was a problem hiding this comment.
When Windows High Contrast or forced-colors is active, the new tab focus indicator relies on ring-*, which is rendered as box-shadow and can be suppressed by the browser. Since this line also removes the native outline on :focus-visible, keyboard users can move focus between Write and Preview without any visible focus state.
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/src/components/markdown-editor.tsx
Line: 71
Comment:
**Forced-Colors Focus Disappears**
When Windows High Contrast or `forced-colors` is active, the new tab focus indicator relies on `ring-*`, which is rendered as box-shadow and can be suppressed by the browser. Since this line also removes the native outline on `:focus-visible`, keyboard users can move focus between Write and Preview without any visible focus state.
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!
| onChange={(e) => onChange(e.target.value)} | ||
| rows={12} | ||
| className="w-full resize-y border-0 bg-transparent p-3 font-mono text-sm focus:outline-none" | ||
| className="w-full resize-y border-0 bg-transparent p-3 font-mono text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-gray-100" |
There was a problem hiding this comment.
The textarea keeps focus:outline-none and adds only a focus-visible:ring-* replacement. In forced-colors mode, that ring can be dropped because it is box-shadow based, leaving the write-mode editor with no visible keyboard focus even though this control is the main editable field.
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/src/components/markdown-editor.tsx
Line: 100
Comment:
**Textarea Focus Ring Vanishes**
The textarea keeps `focus:outline-none` and adds only a `focus-visible:ring-*` replacement. In forced-colors mode, that ring can be dropped because it is box-shadow based, leaving the write-mode editor with no visible keyboard focus even though this control is the main editable field.
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!
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
|
#1140 が同じMarkdown editor focus修正をより完全に実装しているため重複として閉じます。 |
承知いたしました。別PRにて対応済みとのことですので、こちらの作業は終了とさせていただきます。 |
💡 What:
Markdownエディタのタブ（Write/Preview）およびテキストエリアに、キーボードフォーカス用のインジケーター（
focus-visibleスタイル）を追加しました。🎯 Why:
テキストエリアに
focus:outline-noneが指定されており、デフォルトのフォーカスリングが非表示になっていました。そのため、キーボードユーザーがフォーカス位置を視覚的に認識できず、アクセシビリティが著しく損なわれていました。📸 Before/After:
Before: タブやテキストエリアをキーボード（Tabキーなど）でフォーカスしても、視覚的な変化がありませんでした。
After: フォーカス時に適切なリング（
focus-visible:ring-2など）が表示されるようになりました。タブ等のレイアウト崩れを防ぐためring-insetも併せて適用しています。♿ Accessibility:
キーボードナビゲーションにおいて、フォーカス状態が視覚的に明確に認識できるようになりました（WCAG 2.1 Success Criterion 2.4.7 Focus Visible 対応）。
PR created automatically by Jules for task 4625974250784531189 started by @is0692vs
Greptile Summary
This PR improves keyboard focus styling for the Markdown editor.
Confidence Score: 4/5
The Markdown editor focus styling needs a forced-colors fallback before merging.
apps/web/src/components/markdown-editor.tsx
Important Files Changed
Prompt To Fix All With AI
Reviews (1): Last reviewed commit: "fix: add focus-visible styles to markdow..." | Re-trigger Greptile