About This HTML Issue
A summary element that is the first summary child of a details element can't have a role attribute, whatever its value.
That summary is the control that opens and closes its details element. Browsers expose it as a button and report whether the details is open, and the ARIA in HTML specification allows no role on it. With role="button", the role only repeats what the browser already provides, and the validator also warns that it is unnecessary. Any other value, such as heading or link, tells screen readers the element is something other than the control that shows and hides the content.
This often comes from accordion markup that was moved onto details and summary. A script-driven accordion built from div or span elements needs role="button" and aria-expanded on each toggle. With details, the browser handles keyboard input and tracks the open state, so you can delete both attributes. The validator reports aria-expanded in its own message.
If role="heading" was there to mark the summary as a section title, put a heading element inside the summary instead. Its content model allows headings, but some screen readers announce only the button and drop the heading level, so test it with the ones your users rely on. If the control needs to act as a link or a tab, build a link or a tab widget instead of using details.
Invalid example
The summary toggles its details, so role="button" is not allowed on it.
<details open>
<summary role="button">Billing address</summary>
<p>Enter the address that appears on your card statement.</p>
</details>
Valid example
Without the role attribute, the browser exposes the summary as a button that opens and closes the section.
<details open>
<summary>Billing address</summary>
<p>Enter the address that appears on your card statement.</p>
</details>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.