Add keyboard support and accessibility polyfill for IE11 & Edge

[muan]

👋🏻 This follows the definitions in https://www.w3.org/TR/html-aam-1.0/#summary-and-details-elements:

The summary element should be focusable by default.

Pressing the spacebar or enter key when the summary element has focus will show the details element content if the content is hidden. If the details element content is showing and the summary element has focus, pressing the spacebar or enter key will hide the details element content.

In accessibility APIs that do not have such a fine grained role, the summary element should be mapped to a button role.

When the details element content is shown, on the summary element (ROLE_SYSTEM_PUSHBUTTON), set STATE_SYSTEM_EXPANDED. The hidden and shown states of the details element content is reflected by the absence or presence of the open attribute.

And adds

1. Toggling aria-expanded on <summary>
2. tabindex and role to <summary>
3. enter and space trigger for <summary>
4. Test for <summary> being focusable

---

It'd be nice to test addAttributesForSummary when details isn't supported. Is checking for navigator.userAgent in test.coffee the only way?

I also tried adding a test for enter/space trigger, but the keydown event simulation doesn't seem to trigger the default action when I tested in Chrome 🤔.

cc @josh @dgraham @keithamus

[keithamus]

This all looks excellent and matches with the linked spec 👌 💯

[javan]

Ideally, we'd only create a single MutationObserver (or DOMNodeInserted listener). Think this could be combined with the one in polyfillToggleEvent?

[muan]

polyfillToggleEvent only get called when support.element and not support.toggleEvent while polyfillFocusAndARIA only get called when not support.element, so only one MutationObserver will ever get created. Do you think it's worth combining them still? The conditions make it a bit awkward when I tried. 🤔

[javan]

This closest trip up the DOM could be avoided if the details element was (optionally) passed too. You already have a reference to it in the mutation observer callback.

[javan]

I prefer using parens for function calls in CoffeeScript even though they're optional. Mind updating to follow that style throughout?

[javan]

Since this is so similar to clickEventIsSignificant, maybe there should be a single eventIsSignificant function with the common parts. And the event handlers can check the unique parts, e.g.:

addEventListener "keydown", (event) ->
  if eventIsSignificant(event)
    if event.keyCode in [13, 32]
      ...

[javan]

Thank you! And sorry for the delay in reviewing. These are welcomed improvements.

I also tried adding a test for enter/space trigger, but the keydown event simulation doesn't seem to trigger the default action when I tested in Chrome

What did you try? Dispatching an event with the right properties (like keyCode) seems like it'd work.

[javan]

Do you think it's appropriate for a polyfill to manage aria-expanded, tabindex, and role? Those attributes won't be present in browsers with native <details> support.

[javan]

Should probably avoid overwriting these attributes if they're present initially:

summary.setAttribute("tabindex", "0") unless summary.hasAttribute("tabindex")
...

[muan]

What did you try? Dispatching an event with the right properties (like keyCode) seems like it'd work.

Something like this: http://jsbin.com/yatubamege/1/edit?js,console,output If it works, details should be opened on load. In debugging I found this:

[1] Starting with Chrome 53, untrusted events do not invoke the default action.
— https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted#Browser_compatibility

I think this might be the cause. I tested in Safari & Firefox, the events don't work either, but I couldn't find any reference other than this one for Chrome.

---

Do you think it's appropriate for a polyfill to manage aria-expanded, tabindex, and role? Those attributes won't be present in browsers with native <details> support.

I think it is. The attributes aren't present, but the characteristics they simulate are there, and these attributes were designed to add support for these characteristics.

---

Thanks for the review ⭐ I made all the other changes.

[javan]

Thank you! I just released v2.0.0 with these changes.