feat(component): add autoFocusConfirmButton for confirm-modal (#7801)

close #5813

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/LakojjjzZNf6ogjOVwKE/aff35b76-9f73-4d15-b2cb-c25b03e2e2c3.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/LakojjjzZNf6ogjOVwKE/aff35b76-9f73-4d15-b2cb-c25b03e2e2c3.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/aff35b76-9f73-4d15-b2cb-c25b03e2e2c3.mp4">CleanShot 2024-08-09 at 11.25.46.mp4</video>

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -17,6 +17,11 @@ export interface ConfirmModalProps extends ModalProps {
   cancelText?: React.ReactNode;
   cancelButtonOptions?: Omit<ButtonProps, 'children'>;
   reverseFooter?: boolean;
+  /**
+   * Auto focus on confirm button when modal opened
+   * @default true
+   */
+  autoFocusConfirm?: boolean;
 }
 
 export const ConfirmModal = ({
@@ -30,6 +35,7 @@ export const ConfirmModal = ({
   onConfirm,
   onCancel,
   width = 480,
+  autoFocusConfirm = true,
   ...props
 }: ConfirmModalProps) => {
   const onConfirmClick = useCallback(() => {
@@ -73,6 +79,7 @@ export const ConfirmModal = ({
         <Button
           onClick={onConfirmClick}
           data-testid="confirm-modal-confirm"
+          autoFocus={autoFocusConfirm}
           {...confirmButtonOptions}
         >
           {confirmText}