refactor(Modal): focus secondary button by default when Modal has type danger (#12006)

* docs(Modal): add example of selectorPrimaryFocus, Danger Modal

* refactor(Modal): select secondary button by default when danger

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

Author: tw15egan

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

@@ -191,7 +191,9 @@ const Modal = React.forwardRef(function Modal(
     const initialFocus = (focusContainerElement) => {
       const containerElement = focusContainerElement || innerModal.current;
       const primaryFocusElement = containerElement
-        ? containerElement.querySelector(selectorPrimaryFocus)
+        ? containerElement.querySelector(
+            danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus
+          )
         : null;
 
       if (primaryFocusElement) {
@@ -211,7 +213,7 @@ const Modal = React.forwardRef(function Modal(
     if (open) {
       focusButton(innerModal.current);
     }
-  }, [open, selectorPrimaryFocus]);
+  }, [open, selectorPrimaryFocus, danger, prefix]);
 
   const modalBody = (
     <div

packages/react/src/components/Modal/Modal.stories.js

@@ -144,6 +144,19 @@ export const Default = () => {
   );
 };
 
+export const DangerModal = () => {
+  return (
+    <Modal
+      open
+      danger
+      modalHeading="Are you sure you want to delete this custom domain?"
+      modalLabel="Account resources"
+      primaryButtonText="Delete"
+      secondaryButtonText="Cancel"
+    />
+  );
+};
+
 export const Playground = () => {
   const { size, numberOfButtons, hasScrollingContent, ...modalProps } =
     props.modal();