I believe the summary element should be considered an interactive element and that there shouldn't be any errors thrown when a click listener is attached to it:
// currently flags the following:
// jsx-a11y/click-events-have-key-events
// jsx-a11y/no-static-element-interactions
<summary onClick={clickHandler} />
The spec does list details element as interactive, but this is misleading since its activation behavior is triggered by its child summary OR a UA-provided affordance (all browsers add a shadow summary to accomplish this affordance). The spec for summary does also describe the summary activation behavior, making it more clear that the summary is the element that activates the details open state.
This all also makes logical sense since the details can contain interactive content, meaning it cannot itself be interactive:
<details>
<summary>More Information</summary>
<!-- this link couldn't be interactive if the parent details were interactive -->
<p>The <a href="#">details element</a> is fun!</p>
</details>
Further, both browsers and screen readers treat the summary like a button element (some screen readers actually call it an expandable button), including the same keyboard interaction model as a button: it is focusable without tabindex and Enter triggers click repeatedly when held (i.e., on keydown); Space triggers click on keyup only. I made a simple CodePen to demo/test this: https://codepen.io/sh0ji/pen/OJPppER.
Note that this also means that #582 is not a false positive.
I believe the
summaryelement should be considered an interactive element and that there shouldn't be any errors thrown when aclicklistener is attached to it:The spec does list
detailselement as interactive, but this is misleading since its activation behavior is triggered by its childsummaryOR a UA-provided affordance (all browsers add a shadowsummaryto accomplish this affordance). The spec forsummarydoes also describe thesummaryactivation behavior, making it more clear that thesummaryis the element that activates thedetailsopen state.This all also makes logical sense since the
detailscan contain interactive content, meaning it cannot itself be interactive:Further, both browsers and screen readers treat the
summarylike abuttonelement (some screen readers actually call it an expandable button), including the same keyboard interaction model as abutton: it is focusable withouttabindexand Enter triggersclickrepeatedly when held (i.e., onkeydown); Space triggersclickonkeyuponly. I made a simple CodePen to demo/test this: https://codepen.io/sh0ji/pen/OJPppER.Note that this also means that #582 is not a false positive.