a11y: add aria-label and visible focus ring to notification popover close button
Open
Beginner friendly
Nobody has claimed this yet.
area:dashboard
beginner friendly
community
contributions-welcome
difficulty:beginner
difficulty:easy
enhancement
good first issue
help wanted
time:<15m
type:a11y
up-for-grabs
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 7
- Avg merge
- 48m
- Merged PRs (30d)
- 41
Description
🎯 What needs to be done
Add aria-label="Close notification menu" and focus-visible:ring-2 focus-visible:ring-gold/50 to the dismiss button in notification-popover.tsx.
Why this matters
Icon-only buttons require explicit aria-label attributes so screen readers announce their function to assistive technology users.
📍 Where to work
src/components/ui/notification-popover.tsx
✅ Acceptance criteria
- Close button has explicit
aria-label. - Keyboard navigation displays a visible gold focus ring.
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 notification popover’s dismiss button. Confirm the button exposes the requested accessible name and that keyboard focus displays the visible gold focus ring; done means both acceptance criteria are satisfied.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, 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