Add Escape dismissal for creator profile image lightbox

[chiscookeke11]

Motivation

• Keyboard users need a way to dismiss an expanded creator avatar view with the Escape key and have focus returned to the element that opened it.
• The change scopes the Escape handling to the avatar lightbox so it does not interfere with other Escape bindings on the page.

Description

• Wrap the avatar in the shared Dialog when avatarUrl is present and import Dialog, DialogTrigger, DialogContent, DialogTitle, and DialogDescription from src/components/ui/dialog.
• Add avatarLightboxOpen state and avatarTriggerRef to control the lightbox and restore focus to the trigger on close via onCloseAutoFocus and close it on Escape via onEscapeKeyDown.
• Keep the non-image initials/fallback path unchanged so creators without an avatarUrl are unaffected.
• Add a regression test src/components/common/__tests__/CreatorProfileHeader.test.tsx for Escape-to-close/focus-restore and update src/components/common/__tests__/CreatorInitialsAvatar.test.tsx to use the accessible role='img' query.

Testing

• Ran pnpm test (Vitest) and all tests passed, including the new CreatorProfileHeader test and the updated CreatorInitialsAvatar test.
• Ran pnpm lint and the linter completed without errors.
• Ran pnpm build and the production build completed successfully.

---

Codex Task

Summary by Sourcery

Add an accessible lightbox for creator profile images that supports Escape-based dismissal and focus restoration to the avatar trigger.

New Features:

• Enable clicking a creator avatar with an image to open it in a dialog-style lightbox with an enlarged view.

Enhancements:

• Scope Escape key handling to the creator avatar lightbox and restore focus to the avatar trigger when the dialog closes for better keyboard accessibility.
• Reuse the avatar rendering logic for both inline and lightbox views to keep behavior consistent across avatar types.

Tests:

• Add a regression test for the creator profile header avatar lightbox Escape-to-close and focus-restore behavior.
• Update the CreatorInitialsAvatar test to assert via the accessible image role rather than label text for the initials fallback avatar.

[sourcery-ai]

Reviewer's Guide

Implements an accessible lightbox for creator profile images using the shared Dialog component, scoped Escape key handling, focus restoration to the avatar trigger, and corresponding tests, while keeping non-image avatar behavior unchanged and improving avatar test queries to use accessible roles.

Sequence diagram for Escape dismissal and focus restoration in creator profile image lightbox

sequenceDiagram
    actor User
    participant CreatorProfileHeader
    participant Dialog
    participant DialogContent
    participant avatarTriggerRef

    User->>CreatorProfileHeader: click avatar button
    CreatorProfileHeader->>CreatorProfileHeader: setAvatarLightboxOpen(true)
    CreatorProfileHeader->>Dialog: open=avatarLightboxOpen
    Dialog->>DialogContent: render DialogContent

    User->>DialogContent: press Escape
    DialogContent->>CreatorProfileHeader: onEscapeKeyDown()
    CreatorProfileHeader->>CreatorProfileHeader: setAvatarLightboxOpen(false)
    CreatorProfileHeader->>Dialog: onOpenChange(false)
    Dialog->>DialogContent: unmount DialogContent

    Dialog->>CreatorProfileHeader: onCloseAutoFocus(event)
    CreatorProfileHeader->>CreatorProfileHeader: event.preventDefault()
    CreatorProfileHeader->>avatarTriggerRef: focus()

Loading

File-Level Changes

Change	Details	Files
Add Dialog-based lightbox behavior for creator avatars with images, including Escape-to-close and focus restoration.	Introduce avatarLightboxOpen state and avatarTriggerRef in CreatorProfileHeader to control the lightbox and manage focus. Refactor avatar rendering into an avatar variable reused by both lightbox and fallback paths. Wrap the avatar in Dialog, DialogTrigger, and DialogContent when avatarUrl is present, styling the trigger button and modal for the enlarged image. Use onCloseAutoFocus to override default focus behavior and explicitly restore focus to the avatar trigger on close. Handle onEscapeKeyDown on the DialogContent to close only the avatar lightbox when Escape is pressed, avoiding interference with other Escape bindings. Retain the existing non-image avatar path (no avatarUrl) with the previous static div behavior so creators without avatars are unaffected.	src/components/common/CreatorProfileHeader.tsx
Tighten and extend tests to cover avatar lightbox accessibility and updated avatar semantics.	Add CreatorProfileHeader.test.tsx to verify Escape closes the avatar lightbox and that focus is restored to the avatar trigger after dismissal. Update CreatorInitialsAvatar tests to query the avatar via role='img' with an accessible name instead of label text, and assert initials on the avatar container.	src/components/common/__tests__/CreatorInitialsAvatar.test.tsx src/components/common/__tests__/CreatorProfileHeader.test.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• In the DialogContent onEscapeKeyDown handler, consider accepting the event and calling event.preventDefault() to ensure Escape is fully scoped to this lightbox and does not bubble to any page-level Escape handlers.
• Since avatar is now reused in both the lightbox and non-lightbox branches, double-check that its internal ARIA/role semantics still make sense when nested inside a button (i.e., avoid redundant or conflicting role="img"/labelling between the avatar and the lightbox image).

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In the `DialogContent` `onEscapeKeyDown` handler, consider accepting the event and calling `event.preventDefault()` to ensure Escape is fully scoped to this lightbox and does not bubble to any page-level Escape handlers.
- Since `avatar` is now reused in both the lightbox and non-lightbox branches, double-check that its internal ARIA/role semantics still make sense when nested inside a button (i.e., avoid redundant or conflicting `role="img"`/labelling between the avatar and the lightbox image).

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}