🎨 Palette: Add focus-visible states to core buttons - #4347
Conversation
Co-authored-by: dieterolson <198168927+dieterolson@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. |
![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: 7d0771c844
ℹ️ About Codex in GitHub
Your team has set up Codex to 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 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| outline: none; | ||
| box-shadow: 0 0 0 2px var(--panel-bg), 0 0 0 4px var(--accent-cyan); |
There was a problem hiding this comment.
When forced-colors: active is used, such as Windows High Contrast mode, browsers suppress author box shadows and replace author background colors with system colors. Removing the native outline here therefore makes the new .btn indicator disappear entirely; the later .tab-btn rule has the same problem. Keep an outline or add a forced-colors override so keyboard focus remains visible in this environment.
Useful? React with 👍 / 👎.
| .tab-btn:focus-visible { | ||
| outline: none; | ||
| background: var(--cell-hover-bg); | ||
| border-radius: 4px; |
There was a problem hiding this comment.
In the normal themes, keyboard focus on a tab is indicated only by this background because the outline is removed. Against the tab bar's --bg-color, --cell-hover-bg has only about 1.72:1 contrast in the dark theme and 1.18:1 in the light theme, making the focus change especially difficult to perceive in light mode. Use a distinct outline or ring like the .btn treatment rather than relying solely on this low-contrast fill.
Useful? React with 👍 / 👎.
|
Consolidated into #4408. Closing to reduce CI/CD runner load. |
1 participant
💡 What: Added
focus-visiblestyling to.btnand.tab-btnclasses inindex.css.🎯 Why: To ensure that core interactive elements have clear visual focus indicators when navigated via keyboard, improving accessibility for keyboard-only users.
📸 Before/After: N/A (CSS style addition)
♿ Accessibility: Resolves an accessibility issue where standard buttons utilizing the
.btnand.tab-btnutility classes lacked focus ring accessibility, despite inputs and other tabs being styled properly.PR created automatically by Jules for task 14866957424878358747 started by @dieterolson