Add an accessible focus trap, labeling, and scroll lock to the NotificationCenter panel

[greatest0fallt1me]

Description

This is a UI/UX issue. The src/components/notifications/NotificationCenter.tsx panel opened from the NotificationBell needs proper dialog/menu semantics: focus trapping, return-focus to the bell on close, Escape-to-close, an accessible name, and body scroll lock on mobile. Audit and complete its accessibility and responsive behavior.

Requirements and Context

• Apply useFocusTrap (src/hooks/useFocusTrap.ts) when the panel opens; return focus to the NotificationBell trigger on close.
• Add role="dialog"/appropriate semantics, aria-label, and aria-expanded on the bell.
• Lock body scroll on mobile and render the panel as a full-height sheet under the mobile breakpoint.
• Provide a clear empty state ("No notifications") and a labeled "mark all read" control.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b task/notification-center-a11y

2. Implement changes
   • src/components/notifications/NotificationCenter.tsx + .css
   • src/components/notifications/NotificationBell.tsx
3. Test and commit
   • npm run test
   • Verify trap/return-focus/Escape and mobile sheet
   • Include screenshots in the PR

Example commit message

task: add focus trap and mobile sheet to NotificationCenter

Acceptance Criteria

• Focus trapped while open; returns to bell on close
• Dialog labeled; bell exposes aria-expanded
• Body scroll locked; full-height sheet on mobile
• Empty state and labeled mark-all-read present

Guidelines

• WCAG 2.1 AA: 2.1.2, 2.4.3, 4.1.2; responsive
• Clear documentation and inline comments
• Timeframe: 96 hours