Opening a `ConfirmationModal` from a `ContextualMenu` does not move keyboard focus to the modal

[jademathre-canonical]

When opening a ConfirmationModal from a ContextualMenu, the focus does not move keyboard focus to the modal. This issue may require more than one ContextualMenu elements to reproduce. Shift+Tabing does eventually move the focus and trap it in the ConfirmationModal. The tabIndex to reach the ConfirmationModal is just before the first ContextualMenu component. Screencapture showing opening the modal, Shift+Tabing as the focus moves behind the modal until eventually reaching and being trapped in the ConfirmationModal:

Screencast.from.2026-04-28.14-04-28.mp4

[edlerd]

Interesting, this should work and focus the modal close button by default. There is an optional focusRef parameter for Modal, but that is not set in the ConfirmationModal. Though I see ConfirmationModal is spreading props to modal, so maybe your use case is setting a focusRef on the ConfirmationModal usage?

[jademathre-canonical]

focusRef is not being set on the ConfirmationModal in my usage:

<ConfirmationModal
  title="Unsaved changes"
  confirmButtonLabel="Discard and edit"
  cancelButtonLabel="Go back to editing"
  onConfirm={handleDiscardAndEdit}
  close={handleGoBack}
>
  ...
</ConfirmationModal>

The default close button focus does not appear to be triggered. It seems like the focus management may be interacting poorly with ContextualMenu when the modal is mounted. In this case, the ConfirmationModal is opened when an Edit action is triggered from a ContextualMenu in a sibling component while another note is already being edited.

Clicking Edit calls handleEditStart, which sets pendingEditNoteId, causing the modal to mount:

const handleEditStart = (noteId: number): void => {
  if (editingNoteId !== null && editingNoteId !== noteId) {
    setPendingEditNoteId(noteId);
  } else {
    setEditingNoteId(noteId);
  }
};

{pendingEditNoteId !== null && (
  <ConfirmationModal ... />
)}

[edlerd]

Thanks for the context, @jademathre-canonical

I suspect either a timing issue with the closeButtonRef.current.focus(); call inside Modal.tsx or it could be some other component also calling focus on the page when modal mounts.