Disable auto-focus on confirmation modal children by default

Author: kraenhansen

packages/compass-components/src/hooks/use-confirmation.spec.tsx

@@ -43,7 +43,9 @@ describe('use-confirmation', function () {
         within(modal).getByText('This action can not be undone.')
       ).to.exist;
       expect(within(modal).getByText('Yes')).to.exist;
-      expect(within(modal).getByText('Cancel')).to.exist;
+      const cancelElement = within(modal).getByText('Cancel');
+      expect(cancelElement).to.exist;
+      expect(cancelElement.parentElement).to.equal(document.activeElement);
     });
 
     it('handles cancel action', async function () {
@@ -78,10 +80,13 @@ describe('use-confirmation', function () {
             screen.getByRole('button', { name: 'Confirm' })
           ).to.have.attribute('aria-disabled', 'true');
 
-          userEvent.type(
-            screen.getByRole('textbox', { name: /Type "Yes"/ }),
-            'Yes'
-          );
+          const textInputElement = screen.getByRole('textbox', {
+            name: /Type "Yes"/,
+          });
+
+          // The input should have focus
+          expect(textInputElement).to.equal(document.activeElement);
+          userEvent.type(textInputElement, 'Yes');
 
           expect(
             screen.getByRole('button', { name: 'Confirm' })

packages/compass-components/src/hooks/use-confirmation.tsx

@@ -18,7 +18,10 @@ export { ConfirmationModalVariant };
 type ConfirmationModalProps = React.ComponentProps<typeof ConfirmationModal>;
 
 type ConfirmationProperties = Partial<
-  Pick<ConfirmationModalProps, 'title' | 'variant' | 'requiredInputText'>
+  Pick<
+    ConfirmationModalProps,
+    'title' | 'variant' | 'requiredInputText' | 'initialFocus'
+  >
 > & {
   buttonText?: React.ReactNode;
   confirmButtonProps?: Omit<ButtonProps, 'onClick'>;
@@ -196,6 +199,13 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({
           onClick: handleCancel,
         }}
         requiredInputText={confirmationProps.requiredInputText ?? undefined}
+        initialFocus={
+          confirmationProps.initialFocus ??
+          (confirmationProps.requiredInputText
+            ? 'auto'
+            : // TODO: Update this once https://jira.mongodb.org/browse/LG-5735 gets resolved
+              '[data-testid=lg-confirmation_modal-footer-cancel_button]')
+        }
       >
         {confirmationProps.description}
         {confirmationProps.warning && (

packages/compass-components/src/hooks/use-error-details.spec.tsx

@@ -0,0 +1,46 @@
+import {
+  render,
+  screen,
+  waitFor,
+  within,
+  userEvent,
+} from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import React from 'react';
+
+import { ConfirmationModalArea } from './use-confirmation';
+import { showErrorDetails } from './use-error-details';
+
+describe('use-error-details', function () {
+  context('showErrorDetails global function', function () {
+    let modal: HTMLElement;
+    beforeEach(async function () {
+      render(
+        <ConfirmationModalArea>
+          <button
+            type="button"
+            onClick={() => {
+              showErrorDetails({
+                details: { oh: 'noes' },
+                closeAction: 'back',
+              });
+            }}
+          >
+            Open Modal
+          </button>
+        </ConfirmationModalArea>
+      );
+      userEvent.click(screen.getByText('Open Modal'));
+      await waitFor(() => {
+        modal = screen.getByTestId('confirmation-modal');
+      });
+    });
+
+    it('renders modal with cancel button focused', function () {
+      expect(within(modal).getByText('Error details')).to.exist;
+      const confirmElement = within(modal).getByText('Back');
+      expect(confirmElement).to.exist;
+      expect(confirmElement.parentElement).to.equal(document.activeElement);
+    });
+  });
+});

packages/compass-components/src/hooks/use-error-details.tsx

@@ -25,7 +25,7 @@ export const showErrorDetails = function showErrorDetails({
     buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()),
     confirmButtonProps: {
       variant: ButtonVariant.Default,
-      autoFocus: true,
     },
+    initialFocus: '[data-testid=lg-confirmation_modal-footer-confirm_button]',
   });
 };

packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts

@@ -676,10 +676,6 @@ describe('Collection aggregations tab', function () {
       const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
       await errorDetailsJson.waitForDisplayed();
 
-      // exit details
-      // leafygreen autofocus triggers a tooltip on the error code element,
-      // "Tab" to remove the focus
-      await browser.keys('Tab');
       // now click the close button
       await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       // wait for the modal to go away

packages/compass-e2e-tests/tests/collection-documents-tab.test.ts

@@ -727,10 +727,6 @@ FindIterable<Document> result = collection.find(filter);`);
       const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
       await errorDetailsJson.waitForDisplayed();
 
-      // exit details
-      // leafygreen autofocus triggers a tooltip on the error code element,
-      // "Tab" to remove the focus
-      await browser.keys('Tab');
       // now click the close button
       await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       // wait for the modal to go away

packages/compass-e2e-tests/tests/collection-import.test.ts

@@ -597,9 +597,6 @@ describe('Collection import', function () {
       expect(await errorDetailsJson.getText()).to.include(
         'schemaRulesNotSatisfied'
       );
-      // leafygreen autofocus triggers a tooltip on the error code element,
-      // "Tab" to remove the focus
-      await browser.keys('Tab');
       // now click the close button
       await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       // wait for the modal to go away