Provide example of how to test <details><summary>...

[laurelthorburn]

Relevant code or config:

<details>
<summary>accordion item 1</summary>
some accordion 1 content
</details>

or i like this example from mn docs

<details name="requirements">
  <summary>Graduation Requirements</summary>
  <p>
    Requires 40 credits, including a passing grade in health, geography,
    history, economics, and wood shop.
  </p>
</details>
<details name="requirements">
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>
<details name="requirements">
  <summary>Job Requirements</summary>
  <p>
    Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance,
    privacy, security, and internationalization, as well as a dislike of
    broccoli.
  </p>
</details>

What you did:

I have been trying to find an example of how to capture a user's click on a summary of the <details> for an accordion.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details

What happened:

I was expecting to be able to use getByRole but it doesn't appear to take the details or summary as a role, it does capture the details under group but it feels like the name should be the text in the summary? details could take a name but we fear that could end up with wacky side effects?

I am looking to test basic behavior like the accordion is expanded while the others are collapsed.

thanks.

Reproduction:

use the mdn example above and then provide an example of how you were able to test it using native RTL. We came up with a work around using a toggle simulation, but i would really like to use get by role and have the user just click the summary

Problem description:

Suggested solution:

can we use getbyrole to trigger the user's action on the summay?