Skip to content

feat: implement GDPR cookie consent banner with focus management#594

Open
DeePrincipal-dev-lang wants to merge 1 commit into
rinafcode:mainfrom
DeePrincipal-dev-lang:feat/gdpr-focus-management
Open

feat: implement GDPR cookie consent banner with focus management#594
DeePrincipal-dev-lang wants to merge 1 commit into
rinafcode:mainfrom
DeePrincipal-dev-lang:feat/gdpr-focus-management

Conversation

@DeePrincipal-dev-lang
Copy link
Copy Markdown

feat: GDPR Compliance — Cookie Consent Banner with Focus Management

Summary

Implements a GDPR-compliant cookie consent banner with full keyboard and screen
reader accessibility.

Changes

  • useGdprConsent hook — manages consent state (accepted / rejected / null)
    persisted to localStorage. Shows banner when no prior choice exists.

  • CookieConsentBanner component — fixed bottom banner with:

    • Focus trap (Tab/Shift+Tab cycle stays within the banner)
    • Focus restore (returns focus to the previously focused element on dismiss)
    • assertive screen reader announcement on mount
    • role="dialog", aria-modal, aria-labelledby, aria-describedby
    • Accept all / Reject non-essential buttons + Privacy Policy link
  • RootProviders — banner integrated globally, rendered after app content

Tests

14 unit tests added covering:

  • Hook: null default, stored value reads, accept/reject persistence, invalid
    stored value handling
  • Component: render/no-render logic, button actions, ARIA attributes, focus
    trap behaviour

Acceptance Criteria

  • ✅ GDPR banner properly implements focus management
  • ✅ All 14 tests pass
  • ✅ No regression in existing functionality
  • ✅ Follows project coding standards (Tailwind, lucide-react, TypeScript)
  • ✅ Accessibility guidelines followed (WCAG focus management, ARIA dialog
    pattern)
  • ✅ No TypeScript errors in new code

Closes #442

- Add useGdprConsent hook (localStorage persistence, accept/reject)
- Add CookieConsentBanner component with focus trap, focus restore,
  and assertive screen reader announcement
- Integrate banner into RootProviders
- Add 14 unit tests (hook + component)

Closes #gdpr-focus-management
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 29, 2026

@DeePrincipal-dev-lang Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@RUKAYAT-CODER
Copy link
Copy Markdown
Contributor

Kindly resolve conflict and fix workflow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

security GDPR Compliance : Focus Management

2 participants