Description
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.