Notifications:Notifications In Modal

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

TestingLibraryElementError: Unable to find an accessible element with the role "dialog"

Here are the accessible roles:

  button:

  Name "Open Notifications":
  <button
    aria-label="Open Notifications"
    class="sc-eDLKkx jhFjPS"
    data-is-hovered=""
    data-is-single-icon-only=""
    data-qa="Button"
    data-size="medium"
    data-theme="default"
    data-type="clear"
    type="button"
  />

  --------------------------------------------------
  img:

  Name "bell":
  <span
    aria-label="bell"
    class="anticon anticon-bell"
    data-element="ButtonIcon"
    role="img"
  />

  --------------------------------------------------
  region:

  Name "":
  <div
    aria-live="polite"
    class="sc-irLvIq ScExs"
    data-qa="NotificationsBar"
    role="region"
    tabindex="0"
  />

  --------------------------------------------------

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
      aria-label="Open Notifications"
      class="sc-eDLKkx jhFjPS"
      data-is-hovered=""
      data-is-single-icon-only=""
      data-qa="Button"
      data-size="medium"
      data-theme="default"
      data-type="clear"
      type="button"
    >
      <span
        aria-label="bell"
        class="anticon anticon-bell"
        data-element="ButtonIcon"
        role="img"
      >
        <svg
          aria-hidden="true"
          data-icon="bell"
          fill="currentColor"
          focusable="false"
          height="1em"
          viewBox="64 64 896 896"
          width="1em"
        >
          <path
            d="M816 768h-24V428c0-141.1-104.3-257.8-240-277.2V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.8C336.3 170.2 232 286.9 232 428v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48z"
          />
        </svg>
      </span>
    </button>
    <div
      aria-live="polite"
      class="sc-irLvIq ScExs"
      data-qa="NotificationsBar"
      role="region"
      tabindex="0"
    />
  </div>
</div>
    at Object.getElementError (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:143:284)
    at https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:165:164
    at https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:157:4163
    at https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:165:387
    at Ap.invoke (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:9139)
    at Ap.track (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:6400)
    at Object.getByRole (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/index-DkXnQHFk.js:27:5672)
    at b.play (https://626ee6db91d1c8004a912249-cegcyhlizc.capture-loopback.chromatic.com/assets/Notifications.stories-CQEVDye4.js:913:4722)
    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)