fix focus

Author: paula-stacho

packages/compass-components/src/components/modals/error-details-modal.tsx

@@ -6,10 +6,9 @@ import { Modal } from './modal';
 import { Button, Code, ModalFooter } from '../leafygreen';
 import { ModalBody } from './modal-body';
 import { ModalHeader } from './modal-header';
-import { ModalFooterButton } from './modal-footer-button';
 
-const backButtonStyles = css({
-  float: 'left',
+const leftDirectionFooter = css({
+  justifyContent: 'left',
 });
 
 type ModalProps = React.ComponentProps<typeof Modal>;
@@ -33,22 +32,24 @@ function ErrorDetailsModal({
     return JSON.stringify(details, undefined, 2);
   }, [details]);
   return (
-    <Modal setOpen={onClose} {...modalProps}>
+    <Modal setOpen={onClose} initialFocus="#error-details-json" {...modalProps}>
       <ModalHeader title={title} subtitle={subtitle} />
       <ModalBody>
-        <Code language="json" data-testid="error-details-json">
+        <Code
+          language="json"
+          data-testid="error-details-json"
+          id="error-details-json"
+        >
           {prettyDetails}
         </Code>
       </ModalBody>
-      <ModalFooter>
+      <ModalFooter
+        className={cx(closeAction === 'back' && leftDirectionFooter)}
+      >
         <Button
           data-testid={`error-details-${closeAction}-button`}
-          onClick={() => {
-            console.log('onClick');
-            onClose();
-          }}
+          onClick={onClose}
           variant="default"
-          className={cx(closeAction === 'back' && backButtonStyles)}
         >
           {closeAction === 'back' ? 'Back' : 'Close'}
         </Button>

packages/compass-crud/src/components/document-list.tsx

@@ -606,10 +606,7 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
           />
           <ErrorDetailsModal
             open={!!errorDetailsOpen}
-            onClose={() => {
-              console.log('is closing');
-              setErrorDetailsOpen(undefined);
-            }}
+            onClose={() => setErrorDetailsOpen(undefined)}
             details={errorDetailsOpen?.details}
             closeAction={errorDetailsOpen?.closeAction || 'close'}
           />

packages/compass-import-export/src/components/export-code-view.tsx

@@ -74,6 +74,7 @@ function ExportCodeView({
       <Code
         className={codeStyles}
         data-testid="export-collection-code-preview-wrapper"
+        id="export-collection-code-preview-wrapper"
         language="javascript"
         copyable
       >

packages/compass-import-export/src/components/export-modal.tsx

@@ -246,7 +246,12 @@ function ExportModal({
   }, [isOpen, resetExportFormState]);
 
   return (
-    <Modal open={isOpen} setOpen={closeExport} data-testid="export-modal">
+    <Modal
+      open={isOpen}
+      setOpen={closeExport}
+      data-testid="export-modal"
+      initialFocus="#export-collection-code-preview-wrapper"
+    >
       <ModalHeader
         title="Export"
         subtitle={aggregation ? `Aggregation on ${ns}` : `Collection ${ns}`}