Merge pull request #33 from github/indeterminate

Support input.indeterminate

Author: muan

index.js

@@ -184,7 +184,11 @@ function shouldCommit(event: Event) {
 function updateChecked(selected: Element, details: Element) {
   for (const el of details.querySelectorAll('[role="menuitemradio"], [role="menuitemcheckbox"]')) {
     const input = el.querySelector('input[type="radio"], input[type="checkbox"]')
-    el.setAttribute('aria-checked', (input instanceof HTMLInputElement ? input.checked : el === selected).toString())
+    let checkState = el === selected
+    if (input instanceof HTMLInputElement) {
+      checkState = input.indeterminate ? 'mixed' : input.checked
+    }
+    el.setAttribute('aria-checked', checkState.toString())
   }
 }
 

test/test.js

@@ -350,6 +350,54 @@ describe('details-menu element', function() {
     })
   })
 
+  describe('with labels as menu item with indeterminate checkboxes', function() {
+    beforeEach(function() {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <details>
+          <summary>Click</summary>
+          <details-menu>
+            <label tabindex="0" role="menuitemcheckbox" aria-checked="false"><input type="checkbox" name="robot"> Hubot</label>
+            <label tabindex="0" role="menuitemcheckbox" aria-checked="true"><input type="checkbox" name="robot" checked> Bender</label>
+            <label tabindex="0" role="menuitemcheckbox" aria-checked="false"><input type="checkbox" name="robot"> BB-8</label>
+          </details-menu>
+        </details>
+      `
+      document.body.append(container)
+    })
+
+    afterEach(function() {
+      document.body.innerHTML = ''
+    })
+
+    it('manages checked state and fires events', function() {
+      const details = document.querySelector('details')
+      const summary = document.querySelector('summary')
+      const item = details.querySelector('label')
+      const input = item.querySelector('input')
+      let eventCounter = 0
+      document.addEventListener('details-menu-selected', () => eventCounter++, true)
+
+      input.indeterminate = true
+      input.dispatchEvent(new Event('change', {bubbles: true}))
+
+      summary.dispatchEvent(new MouseEvent('click', {bubbles: true}))
+      assert(details.open, 'menu opens')
+      assert.equal(item.getAttribute('aria-checked'), 'mixed')
+
+      item.dispatchEvent(new MouseEvent('click', {bubbles: true}))
+      assert(details.open, 'menu stays open')
+      assert.equal(item.getAttribute('aria-checked'), 'true')
+      assert.equal(details.querySelectorAll('[aria-checked="true"]').length, 2)
+
+      item.dispatchEvent(new MouseEvent('click', {bubbles: true}))
+      assert.equal(item.getAttribute('aria-checked'), 'false')
+      assert.equal(details.querySelectorAll('[aria-checked="true"]').length, 1)
+
+      assert.equal(eventCounter, 3, 'selected event is fired three times')
+    })
+  })
+
   describe('with no valid menu items', function() {
     beforeEach(function() {
       const container = document.createElement('div')