Tabs:With Context Menu Only

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 "tab" and name "Document.txt"

Here are the accessible roles:

  paragraph:

  Name "":
  <p
    class="t1qus5ra tzsun74 tedikbi tvzcrb9"
    data-qa="Paragraph"
  />

  --------------------------------------------------
  tablist:

  Name "Tabs":
  <div
    aria-label="Tabs"
    aria-orientation="horizontal"
    data-collection="react-aria3787845950-«r0»"
    data-element="TabList"
    id="react-aria3787845950-«r1»"
    role="tablist"
  />

  --------------------------------------------------
  tab:

  Name "Tab 1":
  <button
    aria-controls="react-aria3787845950-«r1»-tabpanel-tab1"
    aria-haspopup="menu"
    aria-selected="true"
    class="tl6e8zw tssijxt t10tlk52 t1yy3iza t1nkccp9 tdlsyyt trd6vso t1hssgv3"
    data-active=""
    data-collection="react-aria3787845950-«r0»"
    data-deletable=""
    data-description="none"
    data-focus-visible=""
    data-has-actions=""
    data-has-end-content=""
    data-has-label=""
    data-key="tab1"
    data-placement="top"
    data-preserve-actions-space=""
    data-qa="Tab-tab1"
    data-react-aria-pressable="true"
    data-selected=""
    data-shape="sharp"
    data-size="medium"
    data-theme="default"
    data-type="file"
    id="react-aria3787845950-«r1»-tab-tab1"
    role="tab"
    tabindex="0"
  />

  Name "Tab 2":
  <button
    aria-haspopup="menu"
    aria-selected="false"
    class="tl6e8zw tssijxt t10tlk52 t1yy3iza t1nkccp9 tdlsyyt trd6vso t1hssgv3"
    data-collection="react-aria3787845950-«r0»"
    data-deletable=""
    data-description="none"
    data-focus-visible=""
    data-has-actions=""
    data-has-end-content=""
    data-has-label=""
    data-key="tab2"
    data-placement="top"
    data-preserve-actions-space=""
    data-qa="Tab-tab2"
    data-react-aria-pressable="true"
    data-shape="sharp"
    data-size="medium"
    data-theme="default"
    data-type="file"
    id="react-aria3787845950-«r1»-tab-tab2"
    role="tab"
    tabindex="-1"
  />

  Name "Tab 3":
  <button
    aria-haspopup="menu"
    aria-selected="false"
    class="tl6e8zw tssijxt t10tlk52 t1yy3iza t1nkccp9 tdlsyyt trd6vso t1hssgv3"
    data-collection="react-aria3787845950-«r0»"
    data-deletable=""
    data-description="none"
    data-focus-visible=""
    data-has-actions=""
    data-has-end-content=""
    data-has-label=""
    data-key="tab3"
    data-placement="top"
    data-preserve-actions-space=""
    data-qa="Tab-tab3"
    data-react-aria-pressable="true"
    data-shape="sharp"
    data-size="medium"
    data-theme="default"
    data-type="file"
    id="react-aria3787845950-«r1»-tab-tab3"
    role="tab"
    tabindex="-1"
  />

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

  Name "Close":
  <button
    aria-label="Close"
    class="t6roax6 t9f2go3 tyus8 t14a6v3d t9iyiaw t1hg60b7 t1tvpq6 t1dp114j"
    data-context=""
    data-has-icon=""
    data-qa="ItemAction"
    data-react-aria-pressable="true"
    data-theme="current"
    data-type="clear"
    tabindex="-1"
    type="button"
  />

  Name "Close":
  <button
    aria-label="Close"
    class="t6roax6 t9f2go3 tyus8 t14a6v3d t9iyiaw t1hg60b7 t1tvpq6 t1dp114j"
    data-context=""
    data-has-icon=""
    data-qa="ItemAction"
    data-react-aria-pressable="true"
    data-theme="current"
    data-type="clear"
    tabindex="-1"
    type="button"
  />

  Name "Close":
  <button
    aria-label="Close"
    class="t6roax6 t9f2go3 tyus8 t14a6v3d t9iyiaw t1hg60b7 t1tvpq6 t1dp114j"
    data-context=""
    data-has-icon=""
    data-qa="ItemAction"
    data-react-aria-pressable="true"
    data-theme="current"
    data-type="clear"
    tabindex="-1"
    type="button"
  />

  --------------------------------------------------
  tabpanel:

  Name "Tab 1":
  <section
    aria-labelledby="react-aria3787845950-«r1»-tab-tab1"
    class="ta92fq0"
    data-active=""
    data-qa="TabPanel"
    data-qaval="tab1"
    id="react-aria3787845950-«r1»-tabpanel-tab1"
    role="tabpanel"
    tabindex="0"
  />

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

    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 play (https://626ee6db91d1c8004a912249-vlrrdemvmu.capture-loopback.chromatic.com/assets/Tabs.stories-CqAuaVmD.js:1:18102)
    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)