Skip to content

summary should be interactive #656

@sh0ji

Description

@sh0ji

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.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions