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-brSamD fPEpaB" data-qa="Underlay" /> <div class="sc-ktwOfi fRZApU" data-qa="ModalWrapper" data-type="modal" > <div class="sc-hABBmJ ctPpOq" data-is-exited="" data-ismodal="false" data-qa="Modal" data-type="modal" > <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-aria1428769631-:r1:" class="sc-fmKFGs iEIxYV" data-id="Dialog" data-is-dismissable="" data-qa="Dialog" data-size="small" data-type="modal" role="dialog" style="--dialog-size:360px;" tabindex="-1" > <button aria-label="Dismiss" class="sc-eDLKkx iQiUMp" data-is-single-icon-only="" data-qa="ModalCloseButton" data-size="medium" data-theme="default" data-type="neutral" type="button" > <span aria-label="close" class="anticon anticon-close" data-element="ButtonIcon" role="img" > <svg aria-hidden="true" data-icon="close" fill="currentColor" fill-rule="evenodd" focusable="false" height="1em" viewBox="64 64 896 896" width="1em" > <path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z" /> </svg> </span> </button> <header class="sc-eTNRI glSxzB" data-qa="Header" > <h1 class="sc-dmyCSP cCQZlf" data-level="1" data-qa="Title" id="react-aria1428769631-:r1:" > 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> </div> 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-brSamD fPEpaB" data-qa="Underlay" /> <div class="sc-ktwOfi fRZApU" data-qa="ModalWrapper" data-type="modal" > <div class="sc-hABBmJ ctPpOq" data-is-exited="" data-ismodal="false" data-qa="Modal" data-type="modal" > <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-aria1428769631-:r1:" class="sc-fmKFGs iEIxYV" data-id="Dialog" data-is-dismissable="" data-qa="Dialog" data-size="small" data-type="modal" role="dialog" style="--dialog-size:360px;" tabindex="-1" > <button aria-label="Dismiss" class="sc-eDLKkx iQiUMp" data-is-single-icon-only="" data-qa="ModalCloseButton" data-size="medium" data-theme="default" data-type="neutral" type="button" > <span aria-label="close" class="anticon anticon-close" data-element="ButtonIcon" role="img" > <svg aria-hidden="true" data-icon="close" fill="currentColor" fill-rule="evenodd" focusable="false" height="1em" viewBox="64 64 896 896" width="1em" > <path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z" /> </svg> </span> </button> <header class="sc-eTNRI glSxzB" data-qa="Header" > <h1 class="sc-dmyCSP cCQZlf" data-level="1" data-qa="Title" id="react-aria1428769631-:r1:" > 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> </div>View in Storybook
Chrome 105
1200x900
Linux Linux Ubuntu 20.04.4
26a204 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-brSamD fPEpaB" data-qa="Underlay" /> <div class="sc-ktwOfi fRZApU" data-qa="ModalWrapper" data-type="modal" > <div class="sc-hABBmJ ctPpOq" data-is-exited="" data-ismodal="false" data-qa="Modal" data-type="modal" > <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-aria1428769631-:r1:" class="sc-fmKFGs iEIxYV" data-id="Dialog" data-is-dismissable="" data-qa="Dialog" data-size="small" data-type="modal" role="dialog" style="--dialog-size:360px;" tabindex="-1" > <button aria-label="Dismiss" class="sc-eDLKkx iQiUMp" data-is-single-icon-only="" data-qa="ModalCloseButton" data-size="medium" data-theme="default" data-type="neutral" type="button" > <span aria-label="close" class="anticon anticon-close" data-element="ButtonIcon" role="img" > <svg aria-hidden="true" data-icon="close" fill="currentColor" fill-rule="evenodd" focusable="false" height="1em" viewBox="64 64 896 896" width="1em" > <path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z" /> </svg> </span> </button> <header class="sc-eTNRI glSxzB" data-qa="Header" > <h1 class="sc-dmyCSP cCQZlf" data-level="1" data-qa="Title" id="react-aria1428769631-:r1:" > 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> </div> at Wa (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:157:3360) at https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:165:235 at Ap.invoke (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:9139) at Ap.intercept (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:6668) at Ap.track (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:6400) at findByRole (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:5672) at S.play (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/Dialog.stories-C81LzYgB.js:1:3681) at async https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/sb-preview/runtime.js:118:3588 at async StoryRender.runPhase (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/sb-preview/runtime.js:118:912) at async StoryRender.render (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/sb-preview/runtime.js:118:3536)