<details> and <summary> elements

[dbaron]

Description

The details and summary elements are existing HTML elements that represent a disclosure widget. However, they are not that widely used on the web because many cases of web content that wants to use such widgets wants capabilities that they don't provide.

There are a few areas of work here, at different stages of completeness:

Exclusive accordion (Explainer, HTML Spec PR (merged)) adds a name attribute to the details elements to allow grouping multiple details elements into an exclusive accordion in which at most one of them is open.

Improvements to stylability of the details and summary elements: Ability to style these elements is a major obstacle for use on the web. I have a rather out of date explainer for work I hope to pursue in this space, and I've started prototyping it. It would need significant iteration on the prototype, progress on the proposal, tests, and specification adoption before the start of 2024 in order to be included in Interop 2024.

There are also some existing accessibility issues with details and summary, some of which relate to lack of interoperability, that are also worth making progress on. The status here is similar to that of styling, or perhaps even a bit murkier.

Specification

https://html.spec.whatwg.org/multipage/C#the-details-element

Open Issues

see description above

Tests

Exclusive accordion:
https://wpt.fyi/results/html/semantics/interactive-elements/the-details-element/name-attribute.html

Details styling (these are very tentative, especially the pseudo-elements ones):
https://wpt.fyi/results/html/rendering/the-details-element/details-display-type-001.tentative.html
https://wpt.fyi/results/html/rendering/the-details-element/details-pseudo-elements-001.tentative.html
https://wpt.fyi/results/html/rendering/the-details-element/details-pseudo-elements-002.tentative.html

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

Exclusive accordion:

• Chromium intent to ship
• Exclusive accordions with <details name=""> mozilla/standards-positions#831
• exclusive accordions with <details name=""> WebKit/standards-positions#209

Browser bug reports

Exclusive accordion:

• https://crbug.com/1444057
• https://bugzilla.mozilla.org/show_bug.cgi?id=1856460
• https://bugs.webkit.org/show_bug.cgi?id=260893

Details styling:

• https://bugs.chromium.org/p/chromium/issues/detail?id=1469418
• https://bugzilla.mozilla.org/show_bug.cgi?id=1856374 (part)

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

Some examples of things that could be exclusive accordions are in the explainer.

Workarounds

No response

Accessibility Impact

Improved accessibility is one of the underlying goals here, since if developers use platform widgets they're likely to be more accessible and have more consistent behavior across sites than what the developers would build on their own.

Privacy Impact

No response

Other

No response

[foolip]

Clarification on scope. This is not just about new additions to <details> and <summary>, but the whole features. Tests:

https://wpt.fyi/results/html/rendering/the-details-element
https://wpt.fyi/results/html/semantics/interactive-elements/the-details-element
https://wpt.fyi/results/html/semantics/interactive-elements/the-summary-element

[dbaron]

For what it's worth, from the above list of tests, I'd want to exclude html/rendering/the-details-element/details-display-* . It's an area that we'd like to make changes in, an in fact some of the tests reflect the future plans and some reflect the current spec; see web-platform-tests/wpt#41299 (from me), web-platform-tests/wpt#41497 (from me), web-platform-tests/wpt#41766 (from me), and web-platform-tests/wpt#42367 (from @emilio), and also the currently out-of-date explainer that I'm hoping to update pretty soon.

[foolip]

From State of HTML preliminary results, <details> and <summary> were among the features that respondents expressed the most interest for. Note that this wasn't freeform, it's based on the features the survey asked about experience and sentiment for.

[scottaohara]

unfortunately not much in the way of a11y wpt tests - but some issues with just consistently exposing the details role here

[gsnedders]

So what's the current proposal here? Based on @dbaron and @foolip's comments above, presumably:

https://wpt.fyi/results/?label=master&label=experimental&aligned&q=%28path%3A%2Fhtml%2Frendering%2Fthe-details-element%20and%20not%20path%3A%2Fhtml%2Frendering%2Fthe-details-element%2Fdetails-display-%29%20or%20path%3A%2Fhtml%2Fsemantics%2Finteractive-elements%2Fthe-details-element%20or%20path%3A%2Fhtml%2Fsemantics%2Finteractive-elements%2Fthe-summary-element%20or%20%28path%3A%2Fhtml-aam%2Froles.html%20and%20%28subtest%3Ael-details%20or%20subtest%3Ael-summary%29%29

Several of these seem somewhat questionable for a details/summary focus area:

• /html/rendering/the-details-element/auto-expand-details-text-fragment.html fails in Firefox and Safari due to lack of support for beforematch,
• /html/rendering/the-details-element/details-pseudo-elements-*.tentative.html fail in Firefox and Safari because it is something with only the out-of-date explainer mentioned above.

Improvements to stylability of the details and summary elements: Ability to style these elements is a major obstacle for use on the web. I have a rather out of date explainer for work I hope to pursue in this space, and I've started prototyping it. It would need significant iteration on the prototype, progress on the proposal, tests, and specification adoption before the start of 2024 in order to be included in Interop 2024.

This is openui/open-ui#744, right? As it is, we have less than a month left of the proposal selection period, and without as much as a draft spec PR existing at this point it seems unlikely we're going to believe this is going to be in a spec by 1 Jan 2024.

[dbaron]

So adding on @gsnedders 's exclusions above yields this list which I think would be reasonable if we're excluding the details styling work... although I wonder if auto-expand-details-text-fragment.html could be rewritten to not depend on beforematch.

If we wanted to include the details styling work then I think the list would look more like this list.

I'm hoping to present the details styling work to the CSS WG sometime in December, but it sounds like that doesn't work with the deadline you mentioned.

[rik]

(I'm not sure if this is the appropriate place or time to post this)

There is a tracking bug for details/summary issues in WebKit that might be a useful source of test cases.

[nairnandu]

Thank you for proposing details and summary elements for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop 2024. This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year, if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.