user-event icon indicating copy to clipboard operation
user-event copied to clipboard

add 'summary' element to list of focusable selectors

Open VinceMalone opened this issue 1 year ago • 1 comments

What:

add summary element to list of focusable selectors

Why:

in all major browsers, the summary element is focusable via keyboard (when it's a direct descendent of a details element)

making this change will allow user.tab() (via getTabDestination()) to focus summary elements; which matches the behavior found in all major browsers.

  • in chrome, firefox, and safari: document.activeElement results in the <summary> element
  • in devtools, the summary element is consistently labeled as focusable
    • in chrome, the element is given a more abstract role called "DisclosureTriangle", but is always marked as focusable ("Details" is not) screenshot of chrome devtools — Details, DisclosureTriangle, focusable: true, expanded: false screenshot of chrome devtools — role: DisclosureTriangle, focusable: true, expanded: false
    • in firefox, the same is true screenshot of firefox devtools — role: summary, DOMNode: summary, states: [collpased, focusable, selectable text, …]
    • unfortunately, safari doesn't provide a way to inspect its accessibility tree, but it matches the behavior of other vendors via document.activeElement

How:

Checklist:

  • [ ] Documentation
  • [ ] Tests
  • [x] Ready to be merged

what about https://github.com/testing-library/user-event/pull/947 and what about details being marked as "interactive content" per the spec, but summary technically is not?

i understand there's some nuance to <details> without a <summary> and that details is the one that marked as "interactive content", but what reflects reality is that...

  • all major browsers treat the summary element as interactive (see above); and never the details element itself
  • MDN reports an implicit role of "button" for <summary>, where as <details> has an implicit role of "group" (this more or less matches what's seen in devtools)
  • even if there's more nuance in addition to a focusable summary element (such as details without a descendent summary), this doesn't change the most common case where details > summary is focusable

VinceMalone avatar Sep 15 '23 16:09 VinceMalone