Dialog:Close Behavior Hide Fullscreen

Build 1073 on react-aria-deps-combined
1200px
Reviewing disabled
View latest build
ErrorBuild 1073 on react-aria-deps-combined
View Storybook
ErrorBuild 1073 on react-aria-deps-combined
View Storybook
  • Discussions
  • Interactions
Fail
Dialog.stories.tsx
Unable to find role="dialog"

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="sc-idXgbr kBfjgZ root"
    data-font-display="block"
    id="cube-ui-kit-root"
    style="--cube-dynamic-viewport-height:900px;"
  >
    <button
      class="sc-eDvSVe fOGegL"
      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-ipEyDJ kBRIKt"
      data-qa="NotificationsBar"
      role="region"
      tabindex="0"
    />
    <div
      class="sc-bqWxrE mTbfW"
      data-qa="Underlay"
    />
    <div
      class="sc-ksBlkl lhPMdW"
      data-qa="ModalWrapper"
      data-type="fullscreen"
    >
      <div
        class="sc-hBxehG jnTqGz"
        data-is-exited=""
        data-ismodal="false"
        data-qa="Modal"
        data-type="fullscreen"
      >
        <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-fEXmlR iYrOEP"
          data-focus-lock-disabled="disabled"
        >
          <section
            aria-labelledby="react-aria9218306320-2"
            class="sc-fnGiBr fXbzEe"
            data-id="Dialog"
            data-is-dismissable=""
            data-qa="Dialog"
            data-size="small"
            data-type="fullscreen"
            role="dialog"
            style="--dialog-size:360px;"
            tabindex="-1"
          >
            <button
              aria-label="Dismiss"
              class="sc-eDvSVe gCgnbg"
              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"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
                  />
                </svg>
              </span>
            </button>
            <header
              class="sc-eDWCr hutFxx"
              data-qa="Header"
            >
              <h1
                class="sc-dkrFOg dwOwmn"
                data-level="1"
                data-qa="Title"
                id="react-aria9218306320-2"
              >
                Modal title
              </h1>
              <span
                class="sc-gswNZR jkWyoV"
                data-qa="Text"
              >
                Header
              </span>
            </header>
            <section
              class="sc-csuSiG bJRdol"
              data-qa="Content"
            >
              <p
                class="sc-gswNZR kfnoyX"
                data-qa="Paragraph"
              >
                Test content
              </p>
              <p
                class="sc-gswNZR kfnoyX"
                data-qa="Paragraph"
              >
                Test content
              </p>
            </section>
            <div
              class="sc-bjfHbI hjFKWd"
              data-id="Footer"
              data-qa="Footer"
            >
              <div
                class="sc-hLBbgP kmEYfl"
                data-qa="ButtonGroup"
              >
                <button
                  class="sc-eDvSVe fOGegL"
                  data-qa="Button"
                  data-size="medium"
                  data-theme="default"
                  data-type="primary"
                  type="button"
                >
                  Action
                </button>
                <button
                  class="sc-eDvSVe fOGegL"
                  data-qa="Button"
                  data-size="medium"
                  data-theme="default"
                  data-type="secondary"
                  type="button"
                >
                  Sec
                </button>
                <button
                  class="sc-eDvSVe fOGegL"
                  data-qa="Button"
                  data-size="medium"
                  data-theme="default"
                  data-type="secondary"
                  type="button"
                >
                  Cancel
                </button>
              </div>
              <span
                class="sc-gswNZR jkWyoV"
                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
8377c6 on react-aria-deps-combined
Caught exception in play function

This story threw an error after it finished rendering which means interactions may not have been executed fully.

Error: ignoredException
    at https://626ee6db91d1c8004a912249-skhbsvfavl.capture-loopback.chromatic.com/sb-preview/runtime.js:4:91104