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

add 'summary' element to list of focusable selectors #1163

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

VinceMalone
Copy link

@VinceMalone VinceMalone commented Sep 15, 2023

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
  • Ready to be merged

what about #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

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cd39f28:

Sandbox Source
userEvent-dom Configuration
userEvent-react Configuration

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant