Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

summary should be interactive #656

Open
sh0ji opened this issue Dec 19, 2019 · 4 comments · Fixed by #712 · May be fixed by #985
Open

summary should be interactive #656

sh0ji opened this issue Dec 19, 2019 · 4 comments · Fixed by #712 · May be fixed by #985
Assignees
Labels

Comments

@sh0ji
Copy link

sh0ji commented Dec 19, 2019

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.

@jessebeach
Copy link
Collaborator

@sh0ji you're totally right, summary should be interactive. Let me figure out where to fix this. It's probably in aria-query or axobject-query. Great sleuthing here!

https://w3c.github.io/html-aria/#el-summary
https://w3c.github.io/html-aria/#el-details

@jessebeach
Copy link
Collaborator

This was closed erroneously. This issue is still present.

@stuartjnelson
Copy link

I know this is bad open-source etiquette. We're also experiencing this problem currently. Does anyone have any pointers about what we'd need to do in order to fix? I'd be happy putting together a PR

@jessebeach
Copy link
Collaborator

@stuartjnelson hello! Yes, a PR would be very helpful. I start my holiday PTO in a few days and I'll have time to focus on this project next week, so your timing is perfect.

@khiga8 khiga8 linked a pull request May 6, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
3 participants