fix(modal): allow data-modal-primary-focus in danger (#18951)

Author: ariellalgilmore

packages/react/src/components/Modal/Modal-test.js

@@ -395,6 +395,86 @@ describe('Modal', () => {
     expect(container.firstChild).toHaveClass(`${prefix}--modal--slug`);
     spy.mockRestore();
   });
+
+  it('should set correct focus if data-modal-primary-focus is used', () => {
+    render(
+      <Modal
+        open
+        id="custom-modal-id"
+        data-testid="modal-4"
+        loadingStatus="active"
+        loadingDescription="loading..."
+        primaryButtonText="Save"
+        secondaryButtonText="Cancel">
+        <p>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </p>
+        <TextInput
+          data-modal-primary-focus
+          id="text-input-1"
+          data-testid="text-input-1"
+          labelText="Domain name"
+        />
+      </Modal>
+    );
+
+    expect(screen.getByTestId('text-input-1')).toHaveFocus();
+  });
+
+  it('should set correct focus on a danger modal if data-modal-primary-focus is used', () => {
+    render(
+      <Modal
+        open
+        danger
+        id="custom-modal-id"
+        data-testid="modal-4"
+        loadingStatus="active"
+        loadingDescription="loading..."
+        primaryButtonText="Save"
+        secondaryButtonText="Cancel">
+        <p>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </p>
+        <TextInput
+          data-modal-primary-focus
+          id="text-input-1"
+          data-testid="text-input-1"
+          labelText="Domain name"
+        />
+      </Modal>
+    );
+
+    expect(screen.getByTestId('text-input-1')).toHaveFocus();
+  });
+
+  it('should set focus on secondary button if danger modal is used', () => {
+    render(
+      <Modal
+        open
+        danger
+        id="custom-modal-id"
+        data-testid="modal-4"
+        primaryButtonText="Save"
+        secondaryButtonText="Cancel">
+        <p>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </p>
+        <TextInput
+          id="text-input-1"
+          data-testid="text-input-1"
+          labelText="Domain name"
+        />
+      </Modal>
+    );
+
+    expect(screen.getByText('Cancel')).toHaveFocus();
+  });
 });
 
 describe('events', () => {

packages/react/src/components/Modal/Modal.tsx

@@ -437,11 +437,15 @@ const Modal = React.forwardRef(function Modal(
     if (!enableDialogElement) {
       const initialFocus = (focusContainerElement: HTMLElement | null) => {
         const containerElement = focusContainerElement || innerModal.current;
-        const primaryFocusElement = containerElement
-          ? containerElement.querySelector<HTMLElement | SVGElement>(
-              danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus
-            )
-          : null;
+        const primaryFocusElement =
+          containerElement &&
+          (containerElement.querySelector<HTMLElement | SVGElement>(
+            selectorPrimaryFocus
+          ) ||
+            (danger &&
+              containerElement.querySelector<HTMLElement | SVGElement>(
+                `.${prefix}--btn--secondary`
+              )));
 
         if (primaryFocusElement) {
           return primaryFocusElement;