edits

Author: kendallgassner

README.md

@@ -69,6 +69,14 @@ item whose display text needs to be different:
 <li role="option" data-autocomplete-value="bb8">BB-8 (astromech)</li>
 ```
 
+Use `data-no-result-found="true"` to show a no results message inside the autocomplete popover. Be sure to add `role="presentation"` 
+to this element so that screen readers do not mistake this as an auto-complete option. The auto-complete-element has built in functionality that
+handles aria-live announcing number of search results so this should be purely decorative. 
+
+```html
+<li role="presentation" aria-hidden="true" disabled data-no-result-found="true">No results found!</li>
+```
+
 ### A Note on Clear button
 While `input type="search"` comes with an `x` that clears the content of the field and refocuses it on many browsers, the implementation for this control is not keyboard accessible, and so we've opted to enable a customizable clear button so that your keyboard users will be able to interact with it.
 

examples/index.html

@@ -105,7 +105,7 @@
       window.fetch = (url) => {
         const query = url.split('?q=')[1]
         if (query === 'none') {
-          return  Promise.resolve(new Response('<li role="presentation" data-no-result-found="true">No results found!</li>'))
+          return  Promise.resolve(new Response('<li role="presentation" aria-hidden="true" data-no-result-found="true">No results found!</li>'))
         }
         return Promise.resolve(new Response(robotsList));
       }

test/auto-complete-element.js

@@ -434,6 +434,31 @@ describe('auto-complete element', function () {
       assert.isFalse(popup.matches(':popover-open'), 'is not popover-open')
     })
   })
+
+  describe('no results', () => {
+    beforeEach(function () {
+      document.body.innerHTML = `
+        <div id="mocha-fixture">
+          <auto-complete src="/no_results" for="popup">
+            <input type="text">
+            <ul id="popup"></ul>
+            <div id="popup-feedback"></div>
+          </auto-complete>
+        </div>
+      `
+    })
+
+    it('checks that no results is displayed', async () => {
+      const container = document.querySelector('auto-complete')
+      const input = container.querySelector('input')
+      const popup = container.querySelector('#popup')
+
+      triggerInput(input, 'hub')
+      await once(container, 'loadend')
+      assert.equal(1, popup.children.length)
+      
+    })
+  })
 })
 
 function waitForElementToChange(el) {

web-test-runner.config.js

@@ -28,6 +28,9 @@ export default {
             <li role="option" aria-disabled="true"><span>fourth</span></li>
             <li><a role="option" href="#hash">link</a></li>
           `
+      } else if (method === 'GET' && url.startsWith('/no_results?q=hub')) {
+        response.status = 200
+        response.body = `<li role="presentation" aria-hidden="true" disabled data-no-result-found="true">No results found!</li>`
       }
       await next()
     },