Fail
Unable to find role="dialog" Ignored nodes: comments, script, style <div id="storybook-root" > <div class="sc-ifyrAs bxYbUy root" data-font-display="auto" id="cube-ui-kit-root" style="--cube-dynamic-viewport-height:900px;" > <button class="sc-eDLKkx jhFjPS" data-is-hovered="" data-qa="Button" data-size="medium" data-theme="default" data-type="secondary" type="button" > Click me! </button> <div aria-live="polite" class="sc-irLvIq ScExs" data-qa="NotificationsBar" role="region" tabindex="0" /> <div class="sc-dmXWDj hqqULc" data-is-exited="" data-ismodal="true" data-placement="bottom" data-qa="Popover" role="presentation" style="position: absolute; z-index: 100000;" > <div data-focus-guard="true" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;" tabindex="-1" /> <div class="sc-fHejqy cNMbGF" data-focus-lock-disabled="disabled" > <section aria-labelledby="react-aria3417825533-:r3:" class="sc-fmKFGs iEIxYV" data-id="Dialog" data-qa="Dialog" data-size="small" data-type="popover" id="react-aria3417825533-:r0:" role="dialog" style="--dialog-size:360px;" tabindex="-1" > <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;" > <button aria-label="Dismiss" id="react-aria3417825533-:r4:" style="width: 1px; height: 1px;" tabindex="-1" /> </div> <header class="sc-eTNRI kOhTCv" data-qa="Header" > <h1 class="sc-dmyCSP cCQZlf" data-level="1" data-qa="Title" id="react-aria3417825533-:r3:" > Modal title </h1> <span class="sc-guDLey iyRwlj" data-qa="Text" > Header </span> </header> <section class="sc-csKJxZ bpTIRB" data-qa="Content" > <p class="sc-guDLey glxbvP" data-qa="Paragraph" > Test content </p> <p class="sc-guDLey glxbvP" data-qa="Paragraph" > Test content </p> </section> <div class="sc-blmEgr eVeAnU" data-id="Footer" data-qa="Footer" > <div class="sc-hLQSwg jJQAiL" data-qa="ButtonGroup" > <button class="sc-eDLKkx jhFjPS" data-qa="Button" data-size="medium" data-theme="default" data-type="primary" type="button" > Action </button> <button class="sc-eDLKkx jhFjPS" data-qa="Button" data-size="medium" data-theme="default" data-type="secondary" type="button" > Sec </button> <button class="sc-eDLKkx jhFjPS" data-qa="Button" data-size="medium" data-theme="default" data-type="secondary" type="button" > Cancel </button> </div> <span class="sc-guDLey iyRwlj" data-qa="Text" > Footer </span> </div> </section> </div> <div data-focus-guard="true" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;" tabindex="-1" /> </div> </div> </div>View in Storybook
Chrome 105
648x470
Linux Linux Ubuntu 20.04.4
7673b0 on react-18-support
Caught exception in
play
functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: Unable to find role="dialog" Ignored nodes: comments, script, style <div id="storybook-root" > <div class="sc-ifyrAs bxYbUy root" data-font-display="auto" id="cube-ui-kit-root" style="--cube-dynamic-viewport-height:900px;" > <button class="sc-eDLKkx jhFjPS" data-is-hovered="" data-qa="Button" data-size="medium" data-theme="default" data-type="secondary" type="button" > Click me! </button> <div aria-live="polite" class="sc-irLvIq ScExs" data-qa="NotificationsBar" role="region" tabindex="0" /> <div class="sc-dmXWDj hqqULc" data-is-exited="" data-ismodal="true" data-placement="bottom" data-qa="Popover" role="presentation" style="position: absolute; z-index: 100000;" > <div data-focus-guard="true" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;" tabindex="-1" /> <div class="sc-fHejqy cNMbGF" data-focus-lock-disabled="disabled" > <section aria-labelledby="react-aria3417825533-:r3:" class="sc-fmKFGs iEIxYV" data-id="Dialog" data-qa="Dialog" data-size="small" data-type="popover" id="react-aria3417825533-:r0:" role="dialog" style="--dialog-size:360px;" tabindex="-1" > <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;" > <button aria-label="Dismiss" id="react-aria3417825533-:r4:" style="width: 1px; height: 1px;" tabindex="-1" /> </div> <header class="sc-eTNRI kOhTCv" data-qa="Header" > <h1 class="sc-dmyCSP cCQZlf" data-level="1" data-qa="Title" id="react-aria3417825533-:r3:" > Modal title </h1> <span class="sc-guDLey iyRwlj" data-qa="Text" > Header </span> </header> <section class="sc-csKJxZ bpTIRB" data-qa="Content" > <p class="sc-guDLey glxbvP" data-qa="Paragraph" > Test content </p> <p class="sc-guDLey glxbvP" data-qa="Paragraph" > Test content </p> </section> <div class="sc-blmEgr eVeAnU" data-id="Footer" data-qa="Footer" > <div class="sc-hLQSwg jJQAiL" data-qa="ButtonGroup" > <button class="sc-eDLKkx jhFjPS" data-qa="Button" data-size="medium" data-theme="default" data-type="primary" type="button" > Action </button> <button class="sc-eDLKkx jhFjPS" data-qa="Button" data-size="medium" data-theme="default" data-type="secondary" type="button" > Sec </button> <button class="sc-eDLKkx jhFjPS" data-qa="Button" data-size="medium" data-theme="default" data-type="secondary" type="button" > Cancel </button> </div> <span class="sc-guDLey iyRwlj" data-qa="Text" > Footer </span> </div> </section> </div> <div data-focus-guard="true" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;" tabindex="-1" /> </div> </div> </div> at Object.Wa [as waitFor] (https://626ee6db91d1c8004a912249-zyapbvjgrp.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:157:3360) at Ap.invoke (https://626ee6db91d1c8004a912249-zyapbvjgrp.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:9139) at Ap.intercept (https://626ee6db91d1c8004a912249-zyapbvjgrp.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:6668) at Ap.track (https://626ee6db91d1c8004a912249-zyapbvjgrp.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:6400) at waitFor (https://626ee6db91d1c8004a912249-zyapbvjgrp.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:5672) at l.play (https://626ee6db91d1c8004a912249-zyapbvjgrp.capture-loopback.chromatic.com/assets/Dialog.stories-C81LzYgB.js:1:2667) at async https://626ee6db91d1c8004a912249-zyapbvjgrp.capture-loopback.chromatic.com/sb-preview/runtime.js:118:3588 at async StoryRender.runPhase (https://626ee6db91d1c8004a912249-zyapbvjgrp.capture-loopback.chromatic.com/sb-preview/runtime.js:118:912) at async StoryRender.render (https://626ee6db91d1c8004a912249-zyapbvjgrp.capture-loopback.chromatic.com/sb-preview/runtime.js:118:3536)