[A11y] Add Accessible Focus Ring to Notification Popover Action Buttons
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 7
- Avg merge
- 39m
- Merged PRs (30d)
- 39
Description
Target File
src/components/ui/notification-popover.tsx
Estimated Time
5-10 minutes
Difficulty
Level 1 (Beginner)
Why This Matters
All interactive icon buttons inside popover components must present visible focus rings when navigated via keyboard.
Current Behavior
The action buttons in notification-popover.tsx use hover transition styles but lack explicit focus-visible:ring-1 focus indicators.
Requested Change
Add focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#d4af37]/50 to the action button class list in src/components/ui/notification-popover.tsx.
Acceptance Criteria
- Action buttons in notification-popover.tsx show visible focus indicators when focused via keyboard Tab key.
- Code passes npm run lint.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open src/components/ui/notification-popover.tsx and locate the action button class list. Add the specified focus-visible ring classes, then run npm run lint and verify the buttons show visible focus indicators when reached with the keyboard Tab key.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 95/100