Menu:Comprehensive Popover Synchronization

Build 4055 on fix/auto-tooltip-measurement
Reviewing disabled
The baseline is taller than the new snapshot (1184x339 to 1184x255).
Fail
Menu.stories.tsx
Unable to find role="menu"
View in Storybook
Chrome 140
1184x255
Linux Ubuntu 24.04.4
b87f9c on fix/auto-tooltip-measurement
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="menu"

Ignored nodes: comments, script, style
<div
  id="storybook-root"
>
  <div
    class="t1qus5ra tzsuqk4 tdwg465"
    data-font-display="auto"
    data-tasty="3.5.0"
    data-uikit="0.175.0"
    id="cube-ui-kit-root"
    style="--pointer: pointer;"
  >
    <div
      class="t12gf898 t1n6hq80 tpwy5yn"
    >
      <h3
        class="t1w99uaf tw2oerx t1p1b4yz tvzcrb9 tzyry6x"
        data-level="3"
        data-qa="Title"
      >
        Popover Synchronization
      </h3>
      <p
        class="t1qus5s7 tzsuql1 t1w8kzvy tvzcrb9"
        data-qa="Paragraph"
      >
        Only one popover can be open at a time. Opening any trigger automatically closes others. By default, pressing a Button or ItemButton inside an open popover dismisses the popover (modals and other Dialogs are unaffected). Use 
        <code>
          data-popover-keep
        </code>
         on the button (or any ancestor) to opt out — e.g. for toggles inside the popover footer. Popover triggers wrapped by MenuTrigger or DialogTrigger (type="popover") auto-skip the dismiss.
      </p>
      <div
        class="t1sjj4ks th4bvkm"
      >
        <button
          aria-expanded="false"
          aria-haspopup="true"
          class="tmhv0ab t1qszop1 t6tf6n t17nk9tk t1ovi0me te1i9c5 t1i7dkhx tke4i9d"
          data-has-content=""
          data-has-icon=""
          data-has-icons=""
          data-hovered=""
          data-is-icon-shown=""
          data-popover-dismiss=""
          data-popover-trigger="true"
          data-qa="Button"
          data-react-aria-pressable="true"
          data-size="small"
          data-theme="default"
          data-type="outline"
          id="react-aria2047042360-«r0»"
          tabindex="0"
          type="button"
        >
          <div
            aria-hidden="true"
            data-element="Icon"
          >
            <div
              class="t1jmhyvk t17azbmd tor3rd t166b1d1"
              data-entered=""
              data-phase="entered"
            >
              <span
                aria-hidden="true"
                class="t1kfsv3 t4sw4i5 t1dubzfl t6sqepu tsalwcn t1gbwho7 tuwj5oj"
                data-qa="MoreIcon"
              >
                <svg
                  class="tabler-icon tabler-icon-dots-vertical "
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
                  />
                  <path
                    d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
                  />
                  <path
                    d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            data-element="Label"
          >
            MenuTrigger
          </div>
        </button>
        <div
          class="t53inq2"
          data-popover-trigger=""
        >
          <button
            class="tmhv0ab t1qszop1 t6tf6n t17nk9tk t1ovi0me te1i9c5 t1i7dkhx tke4i9d"
            data-has-content=""
            data-popover-dismiss=""
            data-qa="Button"
            data-react-aria-pressable="true"
            data-size="small"
            data-text-only=""
            data-theme="default"
            data-type="outline"
            tabindex="0"
            type="button"
          >
            <div
              data-element="Label"
            >
              Anchored Menu
            </div>
          </button>
        </div>
        <div
          class="t53inq2"
          data-popover-trigger=""
        >
          <button
            class="tmhv0ab t1qszop1 t6tf6n t17nk9tk t1ovi0me te1i9c5 t1i7dkhx tke4i9d"
            data-has-content=""
            data-popover-dismiss=""
            data-qa="Button"
            data-react-aria-pressable="true"
            data-size="small"
            data-text-only=""
            data-theme="default"
            data-type="outline"
            tabindex="0"
            type="button"
          >
            <div
              data-element="Label"
            >
              Context Menu (Right-click)
            </div>
          </button>
        </div>
        <div
          class="t1p0z5d8 t17azbmd t1jnwtbd"
          data-qa="SelectWrapper"
          data-size="small"
          data-suffix=""
          data-theme="default"
          data-type="outline"
        >
          <div
            aria-hidden="true"
            data-a11y-ignore="aria-hidden-focus"
            data-react-aria-prevent-focus="true"
            data-testid="hidden-select-container"
            style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; width: 1px; white-space: nowrap; top: 0px; left: 0px;"
          >
            <label>
              <select
                tabindex="-1"
              >
                <option />
                <option
                  value="option1"
                >
                  Option 1
                </option>
                <option
                  value="option2"
                >
                  Option 2
                </option>
                <option
                  value="option3"
                >
                  Option 3
                </option>
                <option
                  value="option4"
                >
                  Option 4
                </option>
              </select>
            </label>
          </div>
          <button
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="react-aria2047042360-«ra»"
            class="t1k55y2g taa7b0x t10tlk52 t1yy3iza tpb14gy tdlsyyt ttcpdeq tr8a3c"
            data-description="none"
            data-has-end-content=""
            data-has-label=""
            data-has-right-icon=""
            data-input-type="select"
            data-popover-trigger="true"
            data-qa="Select"
            data-react-aria-pressable="true"
            data-shape="button"
            data-size="small"
            data-suffix=""
            data-theme="default"
            data-type="outline"
            id="«r2»"
            tabindex="0"
            type="button"
          >
            <div
              data-element="Label"
              id="react-aria2047042360-«ra»"
            >
              Option 1
            </div>
            <div
              data-element="RightIcon"
            >
              <div
                class="t1jmhyvk t17azbmd tor3rd t166b1d1"
                data-entered=""
                data-phase="entered"
              >
                <span
                  aria-hidden="true"
    ...
    at Object.Om [as waitFor] (https://626ee6db91d1c8004a912249-ytxohjeiog.capture-loopback.chromatic.com/assets/iframe-D1LE6kCB.js:129:3293)
    at Ij.invoke (https://626ee6db91d1c8004a912249-ytxohjeiog.capture-loopback.chromatic.com/assets/iframe-D1LE6kCB.js:713:9408)
    at Ij.intercept (https://626ee6db91d1c8004a912249-ytxohjeiog.capture-loopback.chromatic.com/assets/iframe-D1LE6kCB.js:713:6908)
    at Ij.track (https://626ee6db91d1c8004a912249-ytxohjeiog.capture-loopback.chromatic.com/assets/iframe-D1LE6kCB.js:713:6640)
    at waitFor (https://626ee6db91d1c8004a912249-ytxohjeiog.capture-loopback.chromatic.com/assets/iframe-D1LE6kCB.js:713:5960)
    at Z.play (https://626ee6db91d1c8004a912249-ytxohjeiog.capture-loopback.chromatic.com/assets/Menu.stories-BONq0ByT.js:1:40838)
    at async tH.runPhase (https://626ee6db91d1c8004a912249-ytxohjeiog.capture-loopback.chromatic.com/assets/iframe-D1LE6kCB.js:911:607)
    at async tH.render (https://626ee6db91d1c8004a912249-ytxohjeiog.capture-loopback.chromatic.com/assets/iframe-D1LE6kCB.js:911:3459)