details/summary - proposal

Currently the implementation(s) of summary/details elements do not match
the spec.

http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-details-element

In the spec, the details element is interactive content, the summary is not
its a summary, caption, or legend.

in webkit/blink the summary element is the interactive element (when
pressed it opens/closes the details element)
This is good because it provides a large default hit region to activate the
control

example to try in chrome/safari/opera
http://codepen.io/stevef/pen/CyauJ/

So as the spec/implementations are at odds, the implementations need to
change to match the spec or the spec needs to change to match
implementations or the spec needs to change to accommodate the positive
aspects of the current implementations while allowing for other use cases

An issue with current implementations is that when the summary element
includes other interactive elements (as it is allowed to), clicking on them
results in the details element being opened/closed (although this can be
overcome via scripting).

example to try in chrome/safari/opera
http://codepen.io/stevef/pen/xjJiy/

Issues with the current spec text:

The interactive part of the details element is the disclosure triangle ►
which is supposed to be an anonymous control in the shadow DOM

The <summary> itself is not interactive, so only the triangle provides the
actionable control. the summary text which is effectively the label for
control does not activate the control. There is no method provided to
associate a label with the anonymous control that can (a) provide an
increased hit region and (b) provide an explicitly associated label for the
anonymous control.

Given that what we want to provide for the use case of  having controls
inside the summary, after discussion around the issue[1], I have proposed
the following:

<details>
<summary id=x> <label for=x>Foo</label> </summary>
 ...
</details>


what this does is provide the author with the ability to add an explicit
label (providing the acc name) to the details control which also increases
the click region for improved accessibility/usability, while still allowing
interactive content inside the summary element.

[1] https://www.w3.org/Bugs/Public/show_bug.cgi?id=25140

feedback welcome!



--

Regards

SteveF
HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>