W3C home > Mailing lists > Public > public-html-comments@w3.org > January 2012

Re: html5, details node, events

From: T.J. Crowder <tj@crowdersoftware.com>
Date: Mon, 2 Jan 2012 16:01:10 +0000
Message-ID: <CAH65x-wUcT-h=0jR2DVi6sXXwZfktODwVZWkAozmjbPmnEzWtg@mail.gmail.com>
To: "Michael A. Peters" <mpeters@shastaherps.org>
Cc: "public-html-comments@w3.org" <public-html-comments@w3.org>
Agree there should be an event specified that is fired when the element is
expanded/collapsed.

(Off-topic: I didn't see a bug report for the lack of a keyboard mechanism
for `details` in the Chrome issues list, so I created one:
http://code.google.com/p/chromium/issues/detail?id=108938 You can add the
element to the tab order in the usual way [tabindex="0"], which solves half
the problem, but once you're on the element I can't find a keyboard
mechanism to open it.)
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

On 2 January 2012 15:12, Michael A. Peters <mpeters@shastaherps.org> wrote:

> Hello List,
>
> I currently use the html5 details tag primarily for works cited page. IE:
>
> <a id="stebbins1951"/>
> <details class="bibliography" id="dtls_stebbins1951">
>   <summary>Stebbins 1951</summary>
>   <p>
>   <span class="author">Stebbins, Robert C. - 1951</span>
>   <br/>
>   <span class="title">Amphibians of Western North America</span>
>   <br/>
>   <span class="publisher">University of California Press</span>
>   <br/>
>   <span class="plocale">Berkeley, CA</span>
>   </p>
> </details>
>
> I did not care that most browsers did not understand it, they showed it
> open by default. In Chrome, it made it a lot easier to scroll through the
> works cites page because all the references were closed until the user saw
> one they wanted more information on.
>
> However, it recently came to my attention that chrome does not implement
> details in an accessible way. The tab key passes right over it, leaving no
> method by which someone with difficulty using a mouse to open it.
>
> To remedy the situation, I started work on some JavaScript that will
> emulate details on browsers that do not support it and add an accessibility
> button with aria attributes that toggle emulated or genuine details.
> Emulated details was easy, genuine details was more difficult because the
> accessibility button had to be properly kept in sync with the state of the
> details when a user clicked on the summary to open and close the details.
>
> It seems there is no "open" or "close" event that I could attach JS too,
> what I finally ended up doing was using the DOMSubtreeModified event.
>
> That worked, opening or closing the details (either the standard way or by
> clicking the button) triggered scripting attached to DOMSubTreeModified to
> change the state of the accessibility button.
>
> However I understand that event is actually depricated so my code is
> already on a known path to obsolescence.
>
> I see there are all kinds of groovy events for html5 media, was the
> details node just overlooked or is there something I am missing?
>
> Thanks,
>
> Michael A. Peters
>
>
Received on Monday, 2 January 2012 16:24:07 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 2 January 2012 16:24:08 GMT