[WNMGDS-385] - Update dialog to focus on window (#639)

* update dialog * update snapshot * Add extra div for `dialog-content` * Update snapshot Co-authored-by: Bernard <[email protected]>
CMSgov · Mar 5, 2020 · 7170deb · 7170deb
1 parent 084d80f
commit 7170deb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 13 deletions.
diff --git a/packages/core/src/components/Dialog/Dialog.jsx b/packages/core/src/components/Dialog/Dialog.jsx
@@ -44,10 +44,11 @@ export const Dialog = function(props) {
   return (
     <AriaModal
       dialogClass={dialogClassNames}
+      focusDialog
       escapeExits={!escapeExitDisabled}
       includeDefaultStyles={false}
       onExit={onExit}
-      titleId="dialog-title"
+      titleId="dialog-title dialog-content"
       underlayClass="ds-c-dialog-wrap"
       {...modalProps}
     >
@@ -69,7 +70,11 @@ export const Dialog = function(props) {
             {closeText}
           </Button>
         </header>
-        <main role="main">{children}</main>
+        <main role="main">
+          <div id="dialog-content">
+            {children}
+          </div>
+        </main>
         {actions && (
           <aside className={actionsClassNames} role="complementary">
             {actions}

diff --git a/packages/core/src/components/Dialog/__snapshots__/Dialog.test.jsx.snap b/packages/core/src/components/Dialog/__snapshots__/Dialog.test.jsx.snap
@@ -10,9 +10,10 @@ Object {
   "wrapper": <Displaced
     dialogClass="ds-c-dialog ds-base"
     escapeExits={true}
+    focusDialog={true}
     includeDefaultStyles={false}
     mounted={true}
-    titleId="dialog-title"
+    titleId="dialog-title dialog-content"
     underlayClass="ds-c-dialog-wrap"
     underlayClickExits={false}
   >
@@ -35,7 +36,11 @@ Object {
       <main
         role="main"
       >
-        Foo
+        <div
+          id="dialog-content"
+        >
+          Foo
+        </div>
       </main>
     </div>
   </Displaced>,
@@ -62,6 +67,7 @@ exports[`Dialog renders react-aria-modal 1`] = `
   <Displaced
     dialogClass="ds-c-dialog ds-base"
     escapeExits={true}
+    focusDialog={true}
     getApplicationNode={
       [MockFunction] {
         "calls": Array [
@@ -72,7 +78,7 @@ exports[`Dialog renders react-aria-modal 1`] = `
     includeDefaultStyles={false}
     mounted={true}
     onExit={[MockFunction]}
-    titleId="dialog-title"
+    titleId="dialog-title dialog-content"
     underlayClass="ds-c-dialog-wrap"
     underlayClickExits={false}
   >
@@ -84,10 +90,11 @@ exports[`Dialog renders react-aria-modal 1`] = `
               class="ds-c-dialog-wrap"
             >
               <div
-                aria-labelledby="dialog-title"
+                aria-labelledby="dialog-title dialog-content"
                 class="ds-c-dialog ds-base"
                 id="react-aria-modal-dialog"
                 role="dialog"
+                tabindex="-1"
               >
                 <div
                   role="document"
@@ -113,7 +120,11 @@ exports[`Dialog renders react-aria-modal 1`] = `
                   <main
                     role="main"
                   >
-                    Bar
+                    <div
+                      id="dialog-content"
+                    >
+                      Bar
+                    </div>
                   </main>
                 </div>
               </div>
@@ -126,6 +137,7 @@ exports[`Dialog renders react-aria-modal 1`] = `
         dialogClass="ds-c-dialog ds-base"
         dialogId="react-aria-modal-dialog"
         escapeExits={true}
+        focusDialog={true}
         focusTrapPaused={false}
         getApplicationNode={
           [MockFunction] {
@@ -138,7 +150,7 @@ exports[`Dialog renders react-aria-modal 1`] = `
         mounted={true}
         onExit={[MockFunction]}
         scrollDisabled={true}
-        titleId="dialog-title"
+        titleId="dialog-title dialog-content"
         underlayClass="ds-c-dialog-wrap"
         underlayClickExits={false}
         underlayColor="rgba(0,0,0,0.5)"
@@ -149,7 +161,7 @@ exports[`Dialog renders react-aria-modal 1`] = `
           active={true}
           focusTrapOptions={
             Object {
-              "initialFocus": undefined,
+              "initialFocus": "#react-aria-modal-dialog",
             }
           }
           paused={false}
@@ -161,12 +173,13 @@ exports[`Dialog renders react-aria-modal 1`] = `
               style={Object {}}
             >
               <div
-                aria-labelledby="dialog-title"
+                aria-labelledby="dialog-title dialog-content"
                 className="ds-c-dialog ds-base"
                 id="react-aria-modal-dialog"
                 key="b"
                 role="dialog"
                 style={Object {}}
+                tabIndex="-1"
               >
                 <div
                   role="document"
@@ -201,7 +214,11 @@ exports[`Dialog renders react-aria-modal 1`] = `
                   <main
                     role="main"
                   >
-                    Bar
+                    <div
+                      id="dialog-content"
+                    >
+                      Bar
+                    </div>
                   </main>
                 </div>
               </div>
@@ -229,9 +246,10 @@ Object {
   "wrapper": <Displaced
     dialogClass="ds-c-dialog ds-base test-dialog ds-c-dialog--full"
     escapeExits={true}
+    focusDialog={true}
     includeDefaultStyles={false}
     mounted={true}
-    titleId="dialog-title"
+    titleId="dialog-title dialog-content"
     underlayClass="ds-c-dialog-wrap"
     underlayClickExits={false}
   >
@@ -254,7 +272,11 @@ Object {
       <main
         role="main"
       >
-        Foo
+        <div
+          id="dialog-content"
+        >
+          Foo
+        </div>
       </main>
       <aside
         className="ds-c-dialog__actions test-action"