html5, details node, events

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

html5, details node, events

Michael A. Peters-2
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

Reply | Threaded
Open this post in threaded view
|

Re: html5, details node, events

Jeffrey Way
Yeah, I'm curious to hear the answer to this as well. It's been a known issue for quite some time...

Jeffrey

On Mon, Jan 2, 2012 at 10:12 AM, Michael A. Peters <[hidden email]> 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


Reply | Threaded
Open this post in threaded view
|

Re: html5, details node, events

T.J. Crowder
In reply to this post by Michael A. Peters-2
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 <[hidden email]> 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


Reply | Threaded
Open this post in threaded view
|

Re: html5, details node, events

Michael A. Peters-2
How does one go about filing an official request to have an event
handler added to expand/collapse of the details node in the HTML5 spec?

It seems to me that it is clearly necessary and once browser vendors
start adding it they will see the need as well, I would hate for
different browsers to come up with different mechanisms resulting in a
need to detect browser features when using details.

Thank you for the chrome bug report. It seems to me that Opera is the
only browser that correctly interprets an Enter as a click for not
anchor/form elements that have tabindex=0 set.

T.J. Crowder wrote:

> 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 <[hidden email]
> <mailto:[hidden email]>> wrote:

*snip see archives*

Reply | Threaded
Open this post in threaded view
|

Re: html5, details node, events

Michael[tm] Smith
"Michael A. Peters" <[hidden email]>, 2012-01-05 17:37 -0800:

> How does one go about filing an official request to have an event handler
> added to expand/collapse of the details node in the HTML5 spec?

File the request a bugzilla bug against the HTML spec:

  http://w3.org/brief/MjA2

--
Michael[tm] Smith
http://people.w3.org/mike/+