UseDragAndDrop:Direct Hook With Table

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 `/drag to reorder/i`

Here are the accessible roles:

  gridcell:

  Name "":
  <td
    class="data-table-sticky-cell"
    data-collection="react-aria3748201851-_r_1_"
    data-column-index="0"
    data-key="react-aria-2"
    data-level="1"
    data-rac=""
    data-slot="drag"
    id="react-aria3748201851-_r_e_"
    role="gridcell"
    tabindex="-1"
  />

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

  Name "":
  <button
    aria-describedby="react-aria-description-0"
    aria-label=""
    class="nimbus-button css-14mv4lw"
    data-drag-handle=""
    data-react-aria-pressable="true"
    slot="drag"
    style="pointer-events: none;"
    tabindex="0"
    type="button"
  />

  --------------------------------------------------gridcell:

  Name "Select row Alice Admin":
  <td
    class="nimbus-data-table__cell css-2vowno data-table-sticky-cell"
    data-collection="react-aria3748201851-_r_1_"
    data-column-index="1"
    data-key="react-aria-3"
    data-level="1"
    data-rac=""
    data-slot="selection"
    id="react-aria3748201851-_r_f_"
    role="gridcell"
    tabindex="-1"
  />

  --------------------------------------------------
  checkbox:

  Name "Select row Alice Admin":
  <input
    aria-label="Select row"
    aria-labelledby="react-aria3748201851-_r_c_ react-aria3748201851-_r_3_-1-name react-aria3748201851-_r_3_-1-role"
    data-react-aria-pressable="true"
    id="react-aria3748201851-_r_c_"
    name="select-row"
    tabindex="0"
    title=""
    type="checkbox"
  />

  --------------------------------------------------rowheader:

  Name "Alice":
  <td
    class="nimbus-data-table__cell css-2vowno"
    data-collection="react-aria3748201851-_r_1_"
    data-column-index="2"
    data-key="1:name"
    data-level="1"
    data-rac=""
    id="react-aria3748201851-_r_3_-1-name"
    role="rowheader"
    tabindex="-1"
  />

  --------------------------------------------------rowheader:

  Name "Admin":
  <td
    class="nimbus-data-table__cell css-2vowno"
    data-collection="react-aria3748201851-_r_1_"
    data-column-index="3"
    data-key="1:role"
    data-level="1"
    data-rac=""
    id="react-aria3748201851-_r_3_-1-role"
    role="rowheader"
    tabindex="-1"
  />

  --------------------------------------------------gridcell:

  Name "":
  <td
    class="nimbus-data-table__cell css-2vowno data-table-sticky-cell"
    data-collection="react-aria3748201851-_r_1_"
    data-column-index="4"
    data-key="react-aria-4"
    data-level="1"
    data-rac=""
    data-slot="pin-row-cell"
    id="react-aria3748201851-_r_i_"
    role="gridcell"
    tabindex="-1"
  />

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

  Name "Pin row":
  <button
    aria-label="Pin row"
    aria-pressed="false"
    class="nimbus-toggle-button css-1b3olr3"
    data-rac=""
    data-react-aria-pressable="true"
    tabindex="0"
    type="button"
  />

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

    at Object.getElementError (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:742:284)
    at https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:137:112
    at https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:129:4047
    at https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:745:382
    at Ile.invoke (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:713:9449)
    at Ile.track (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:713:6679)
    at Object.getByRole (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:713:5997)
    at https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/use-drag-and-drop.stories-CZKQWPiR.js:1:4741
    at async https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:537:8556
    at async https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:537:8556