Merge pull request #11 from muan/children

Ensure dynamically added child summary tags are polyfilled

src/details-element-polyfill/polyfill.coffee.erb

@@ -71,22 +71,21 @@ polyfillToggle = ->
       summary.setAttribute("aria-expanded", true)
 
 polyfillFocusAndARIA = ->
-  for summary in document.querySelectorAll("summary")
+  for summary in findElementsWithTagName(document.documentElement, "SUMMARY")
     addAttributesForSummary(summary)
 
   if MutationObserver?
     observer = new MutationObserver (mutations) ->
       for {addedNodes} in mutations
         for target in addedNodes
-          if target.tagName is "DETAILS"
-            if summary = target.querySelector("summary")
-              addAttributesForSummary(summary, target)
+          for summary in findElementsWithTagName(target, "SUMMARY")
+            addAttributesForSummary(summary)
 
     observer.observe(document.documentElement, subtree: true, childList: true)
   else
     document.addEventListener "DOMNodeInserted", (event) ->
-      if event.target.tagName is "SUMMARY"
-        addAttributesForSummary event.target
+      for summary in findElementsWithTagName(event.target, "SUMMARY")
+        addAttributesForSummary(summary)
 
 addAttributesForSummary = (summary, details) ->
   details ?= findClosestElementWithTagName(summary, "DETAILS")
@@ -138,6 +137,13 @@ onTogglingTrigger = (callback) ->
           event.preventDefault()
   , false
 
+findElementsWithTagName = (root, tagName) ->
+  elements = []
+  if root.nodeType is Node.ELEMENT_NODE
+    elements.push(root) if root.tagName is tagName
+    elements.push(root.getElementsByTagName(tagName)...)
+  elements
+
 findClosestElementWithTagName = do ->
   if typeof Element::closest is "function"
     (element, tagName) ->

test/src/test.coffee

@@ -3,15 +3,17 @@
 module "<details>",
   beforeEach: ->
     fixtureHTML = """
-      <details id="details">
-        <summary id="summary">Summary</summary>
-        <div id="content">Content</div>
-      </details>
+      <div id="container">
+        <details id="details">
+          <summary id="summary">Summary</summary>
+          <div id="content">Content</div>
+        </details>
+      </div>
     """
     document.body.insertAdjacentHTML("beforeend", fixtureHTML)
 
   afterEach: ->
-    document.body.removeChild(document.getElementById("details"))
+    document.body.removeChild(document.getElementById("container"))
 
 
 test "displays summary and hides content initially", (assert) ->
@@ -25,6 +27,9 @@ test "summary is focusable", (assert) ->
   done = assert.async()
   summary = getElement("summary")
   defer ->
+    if (typeof HTMLDetailsElement is "undefined")
+      assert.ok summary.hasAttribute("tabindex")
+      assert.ok summary.hasAttribute("role")
     summary.focus()
     assert.equal document.activeElement, summary
     done()