- From: Steve Faulkner <faulkner.steve@gmail.com>
- Date: Fri, 4 Apr 2014 14:13:24 +0100
- To: HTMLWG WG <public-html@w3.org>
- Message-ID: <CA+ri+Vk3WeYQh4qHX9vO4WU+6Xch9Oju6VqDKL=dcd6HxLOPQw@mail.gmail.com>
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/>
Received on Friday, 4 April 2014 13:14:32 UTC