Skip to content

[P1] Dialog: No focus return to trigger on close #384

Description

@sujaypawar

Summary

Dialog doesn't return focus to trigger button when closed - users lose their place.

Severity: P1 (High)
WCAG: 2.4.3 Focus Order (Level A)
Component: Dialog
File: src/components/dialog/dialog.tsx:104-110

Issue

After closing dialog, focus doesn't return to the button that opened it. Keyboard users must Tab from page start.

User Impact: "I opened a dialog, made changes, closed it. Now I'm back at the top of the page and have to Tab through 50 elements to get back to where I was."

Fix (1 hour)

const triggerRef = useRef<HTMLElement | null>(null);

const handleOpen = () => {
  triggerRef.current = document.activeElement as HTMLElement;
  setOpenState(true);
};

const handleClose = () => {
  setOpenState(false);
  // Return focus after animation
  setTimeout(() => {
    if (triggerRef.current) {
      triggerRef.current.focus();
    }
  }, 300);
};

Testing

  • Store trigger element on open
  • Return focus on close
  • Test with multiple dialogs
  • Test with programmatic close
  • Verify timing with animation

Related: #369, #371, #375
Priority: P1

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions