user-event
user-event copied to clipboard
add 'summary' element to list of focusable selectors
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)
- in firefox, the same is true
- unfortunately, safari doesn't provide a way to inspect its accessibility tree, but it matches the behavior of other vendors via
document.activeElement
- in chrome, the element is given a more abstract role called "DisclosureTriangle", but is always marked as focusable ("Details" is not)
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 thedetails
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 asdetails
without a descendentsummary
), this doesn't change the most common case wheredetails > summary
is focusable