Merge pull request #5 from github/fix-disable-click

Disabled option behavior fix

Author: muan

combobox-nav.js

@@ -63,13 +63,15 @@ function commitWithElement(event: MouseEvent) {
   if (!(event.target instanceof Element)) return
   const target = event.target.closest('[role="option"]')
   if (!target) return
-  fireCommitEvent(target)
   event.preventDefault()
+  if (target.getAttribute('aria-disabled') === 'true') return
+  fireCommitEvent(target)
 }
 
 function commit(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement): boolean {
   const target = list.querySelector('[aria-selected="true"]')
-  if (!target || target.getAttribute('aria-disabled') === 'true') return false
+  if (!target) return false
+  if (target.getAttribute('aria-disabled') === 'true') return true
   fireCommitEvent(target)
   return true
 }

examples/index.html

@@ -15,7 +15,7 @@
     </label>
     <ul role="listbox" id="list-id">
       <li id="baymax" role="option">Baymax</li>
-      <li><del>BB-8</del></li>
+      <li id="bb-8" role="option" aria-disabled="true"><del>BB-8</del></li>
       <li id="hubot" role="option">Hubot</li>
       <li id="r2-d2" role="option">R2-D2</li>
     </ul>

test/test.js

@@ -2,6 +2,10 @@ function press(input, key, ctrlKey) {
   input.dispatchEvent(new KeyboardEvent('keydown', {key, ctrlKey}))
 }
 
+function click(element) {
+  element.dispatchEvent(new MouseEvent('click', {bubbles: true}))
+}
+
 describe('combobox-nav', function() {
   describe('with API', function() {
     beforeEach(function() {
@@ -84,6 +88,7 @@ describe('combobox-nav', function() {
       assert.equal(options[4].getAttribute('aria-selected'), 'true')
       assert.equal(input.getAttribute('aria-activedescendant'), 'wall-e')
       press(input, 'Enter')
+      click(options[4])
 
       press(input, 'p', true)
       assert.equal(options[3].getAttribute('aria-selected'), 'true')
@@ -107,9 +112,9 @@ describe('combobox-nav', function() {
         expectedTargets.push(target.id)
       })
 
-      options[2].dispatchEvent(new MouseEvent('click', {bubbles: true}))
-      options[1].dispatchEvent(new MouseEvent('click', {bubbles: true}))
-      options[0].dispatchEvent(new MouseEvent('click', {bubbles: true}))
+      click(options[2])
+      click(options[1])
+      click(options[0])
 
       assert.equal(expectedTargets.length, 2)
       assert.equal(expectedTargets[0], 'hubot')