Menu:Menu Synchronization

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 "button" and name `/Click to test menu synchronization/`

Here are the accessible roles:

  heading:

  Name "Menu Synchronization Demo":
  <h3
    class="t1w99uaf tw2oerx t1p1b4yz tvzcrb9 tzyry6x"
    data-level="3"
    data-qa="Title"
  />

  --------------------------------------------------
  paragraph:

  Name "":
  <p
    class="t1qus5s7 tzsuql1 t1w8kzvy tvzcrb9"
    data-qa="Paragraph"
  />

  Name "":
  <p
    class="t1w99uaf t18ydirl t1kd1xm4 tvzcrb9"
    data-qa="Paragraph"
  />

  Name "":
  <p
    class="t1qus5s7 tzsuqly t1nrlld8 tvzcrb9"
    data-qa="Paragraph"
  />

  Name "":
  <p
    class="t1qus5s7 tzsuqly ttf4ggb tvzcrb9"
    data-qa="Paragraph"
  />

  Name "":
  <p
    class="t1qus5s7 tzsuqly ttf4ggb tvzcrb9"
    data-qa="Paragraph"
  />

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

  Name "":
  <div
    class="t1q8x568 tzsuqk4 tu5266a t15r6zwe"
    role="region"
  />

  Name "":
  <div
    class="t1q8x568 tzsuqk4 t12gf7ez t15r6zwe"
    role="region"
  />

  Name "":
  <div
    class="t1q8x568 tzsuqk4 t12gf7ez t15r6zwe"
    role="region"
  />

  --------------------------------------------------
  button:

  Name "Open Menu":
  <button
    aria-expanded="false"
    aria-haspopup="true"
    aria-label="Open Menu"
    class="tmhv0ab t1qszop1 t6tf6n t17nk9tk t1ovi0me te1i9c5 t1i7dkhx tke4i9d"
    data-has-content=""
    data-has-icon=""
    data-has-icons=""
    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-aria5619015540-«r0»"
    tabindex="0"
    type="button"
  />

  Name "Edit Menu":
  <button
    class="tmhv0ab t1qszop1 t6tf6n t17nk9tk t1ovi0me te1i9c5 t1i7dkhx tke4i9d"
    data-has-content=""
    data-popover-dismiss=""
    data-popover-trigger="true"
    data-qa="Button"
    data-react-aria-pressable="true"
    data-size="small"
    data-theme="default"
    data-type="outline"
    tabindex="0"
    type="button"
  />

  --------------------------------------------------
  alert:

  Name "":
  <div
    class="t1e6sldv tzsuqk4 t15hnpf0 t15r6zwe"
    data-qa="Alert"
    data-shape="card"
    data-type="info"
    name="Alert"
    role="alert"
  />

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

    at Object.getElementError (https://626ee6db91d1c8004a912249-vlrrdemvmu.capture-loopback.chromatic.com/assets/iframe-3bctFqtb.js:742:284)
    at https://626ee6db91d1c8004a912249-vlrrdemvmu.capture-loopback.chromatic.com/assets/iframe-3bctFqtb.js:137:112
    at https://626ee6db91d1c8004a912249-vlrrdemvmu.capture-loopback.chromatic.com/assets/iframe-3bctFqtb.js:129:4040
    at https://626ee6db91d1c8004a912249-vlrrdemvmu.capture-loopback.chromatic.com/assets/iframe-3bctFqtb.js:745:377
    at Fj.invoke (https://626ee6db91d1c8004a912249-vlrrdemvmu.capture-loopback.chromatic.com/assets/iframe-3bctFqtb.js:713:9407)
    at Fj.track (https://626ee6db91d1c8004a912249-vlrrdemvmu.capture-loopback.chromatic.com/assets/iframe-3bctFqtb.js:713:6640)
    at Object.getByRole (https://626ee6db91d1c8004a912249-vlrrdemvmu.capture-loopback.chromatic.com/assets/iframe-3bctFqtb.js:713:5960)
    at q.play (https://626ee6db91d1c8004a912249-vlrrdemvmu.capture-loopback.chromatic.com/assets/Menu.stories-B1MhE3H_.js:1:27654)
    at https://626ee6db91d1c8004a912249-vlrrdemvmu.capture-loopback.chromatic.com/assets/iframe-3bctFqtb.js:911:3500
    at eH.runPhase (https://626ee6db91d1c8004a912249-vlrrdemvmu.capture-loopback.chromatic.com/assets/iframe-3bctFqtb.js:911:613)