Dialog:Close On Esc Close Behavior Hide

Build 1128 on react-18-support
1200px
Reviewing disabled
View latest build
ErrorBuild 1128 on react-18-support
View Storybook
ErrorBuild 1128 on react-18-support
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-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 function

This 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)