Skip to content

Commit 5200aa8

Browse files
planeyangclaude
andauthored
fix(blog): Use focus-visible for topic filter button focus ring (#76)
Change focus ring on topic filter buttons to only appear on keyboard navigation, not on mouse clicks. This improves UX by removing the distracting blue circle that appeared when clicking topic badges. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 843adb3 commit 5200aa8

1 file changed

Lines changed: 1 addition & 1 deletion

File tree

apps/blog/components/essay/EssayFilters.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export function EssayFilters({
158158
key={value}
159159
onClick={() => handleTopicToggle(value)}
160160
aria-pressed={isSelected}
161-
className="essay-filters-topic-btn focus:outline-none focus:ring-2 focus:ring-action-primary focus:ring-offset-2 rounded-full"
161+
className="essay-filters-topic-btn focus:outline-none focus-visible:ring-2 focus-visible:ring-action-primary focus-visible:ring-offset-2 rounded-full"
162162
data-topic={value}
163163
data-selected={isSelected}
164164
>

0 commit comments

Comments
 (0)