From e77bd5f052d917574dbca131b0b8a8f64a889047 Mon Sep 17 00:00:00 2001
From: Kendall Gassner <kendallgassner@github.com>
Date: Fri, 7 Feb 2025 23:50:08 +0000
Subject: [PATCH 1/9] Allow a no-results option with role=none

---
 examples/index.html | 16 ++++++++++++----
 src/autocomplete.ts |  4 +++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index 2b90b7d..b7b09c7 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -100,9 +100,16 @@
         <div id="custom-fetching-items-popup-feedback" class="sr-only"></div>
       </auto-complete>
       <button type="submit">Save</button>
-    </form>
+    </form> 
     <script>
-      window.fetch = () => Promise.resolve(new Response(robotsList));
+      window.fetch = (url) => {
+        const query = url.split('?q=')[1]
+        console.log(query)
+        if (query === 'none') {
+          return  Promise.resolve(new Response('<li role="none" data-no-result-found="true">No results found!</li>'))
+        }
+        return Promise.resolve(new Response(robotsList));
+      }
       // fetchResult must be a function that return a Promise of string and that accepts as parameters an element and an URL
       document.querySelector("auto-complete#custom-fetching-method").fetchResult = async (el, url) => (await fetch(url)).text();
     </script>
@@ -119,7 +126,8 @@
       <button type="submit">Save</button>
     </form>
 
-<!--    <script type="module" src="./dist/bundle.js"></script>-->
-        <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script>
+   <script type="module" src="./dist/bundle.js"></script>
+        <!-- <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script> -->
   </body>
 </html>
+ 
\ No newline at end of file
diff --git a/src/autocomplete.ts b/src/autocomplete.ts
index 13126dc..9072274 100644
--- a/src/autocomplete.ts
+++ b/src/autocomplete.ts
@@ -209,7 +209,9 @@ export default class Autocomplete {
         this.identifyOptions()
         this.combobox.indicateDefaultOption()
         const allNewOptions = this.results.querySelectorAll('[role="option"]')
-        const hasResults = !!allNewOptions.length
+
+        const hasResults =
+          !!allNewOptions.length || !!this.results.querySelectorAll('[data-no-result-found="true"]').length
         const numOptions = allNewOptions.length
 
         const [firstOption] = allNewOptions

From 96a6015bd5a93b9a50078b93c675437de4559a20 Mon Sep 17 00:00:00 2001
From: Kendall Gassner <kendallgassner@github.com>
Date: Fri, 7 Feb 2025 23:52:04 +0000
Subject: [PATCH 2/9] uncomment script

---
 examples/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index b7b09c7..8ac4e16 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -126,8 +126,8 @@
       <button type="submit">Save</button>
     </form>
 
-   <script type="module" src="./dist/bundle.js"></script>
-        <!-- <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script> -->
+   <!-- <script type="module" src="./dist/bundle.js"></script> -->
+        <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script>
   </body>
 </html>
  
\ No newline at end of file

From e3395c9f18a2e7ff6b7dd36256b8b4dfbfb4d3fb Mon Sep 17 00:00:00 2001
From: Kendall Gassner <kendallgassner@github.com>
Date: Fri, 7 Feb 2025 23:52:23 +0000
Subject: [PATCH 3/9] uncomment script

---
 examples/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/index.html b/examples/index.html
index 8ac4e16..78099a5 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -126,7 +126,7 @@
       <button type="submit">Save</button>
     </form>
 
-   <!-- <script type="module" src="./dist/bundle.js"></script> -->
+        <!-- <script type="module" src="./dist/bundle.js"></script> -->
         <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script>
   </body>
 </html>

From 893113f4e47738135e267efc111040d9c3192724 Mon Sep 17 00:00:00 2001
From: Kendall Gassner <kendallgassner@github.com>
Date: Fri, 7 Feb 2025 15:52:48 -0800
Subject: [PATCH 4/9] Update examples/index.html

---
 examples/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/index.html b/examples/index.html
index 78099a5..af2d1ef 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -126,7 +126,7 @@
       <button type="submit">Save</button>
     </form>
 
-        <!-- <script type="module" src="./dist/bundle.js"></script> -->
+<!-- <script type="module" src="./dist/bundle.js"></script>-->
         <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script>
   </body>
 </html>

From 55240a9ee4574f76d4f674c5f99076ec0fb665b7 Mon Sep 17 00:00:00 2001
From: Kendall Gassner <kendallgassner@github.com>
Date: Fri, 7 Feb 2025 15:53:25 -0800
Subject: [PATCH 5/9] Update examples/index.html

---
 examples/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/index.html b/examples/index.html
index af2d1ef..b3dcb9f 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -126,7 +126,7 @@
       <button type="submit">Save</button>
     </form>
 
-<!-- <script type="module" src="./dist/bundle.js"></script>-->
+<!--    <script type="module" src="./dist/bundle.js"></script>-->
         <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script>
   </body>
 </html>

From 4cb7c754a42ed8f148026f988e638a9b22bc91bf Mon Sep 17 00:00:00 2001
From: Kendall Gassner <kendallgassner@github.com>
Date: Tue, 11 Feb 2025 12:40:37 -0800
Subject: [PATCH 6/9] Update examples/index.html

---
 examples/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/index.html b/examples/index.html
index b3dcb9f..3d312a2 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -104,7 +104,6 @@
     <script>
       window.fetch = (url) => {
         const query = url.split('?q=')[1]
-        console.log(query)
         if (query === 'none') {
           return  Promise.resolve(new Response('<li role="none" data-no-result-found="true">No results found!</li>'))
         }

From d4f133e9976c3241828350f821accee58aeb5aaa Mon Sep 17 00:00:00 2001
From: Kendall Gassner <kendallgassner@github.com>
Date: Tue, 11 Feb 2025 14:30:29 -0800
Subject: [PATCH 7/9] Update examples/index.html

---
 examples/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/index.html b/examples/index.html
index 3d312a2..617389c 100644
--- a/examples/index.html
+++ b/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="none" data-no-result-found="true">No results found!</li>'))
+          return  Promise.resolve(new Response('<li role="presentation" data-no-result-found="true">No results found!</li>'))
         }
         return Promise.resolve(new Response(robotsList));
       }

From 6923cd0a732e2c791099ad4de1a9582cd2c5b963 Mon Sep 17 00:00:00 2001
From: Kendall Gassner <kendallgassner@github.com>
Date: Tue, 11 Feb 2025 23:44:40 +0000
Subject: [PATCH 8/9] edits

---
 README.md                     |  8 ++++++++
 examples/index.html           |  2 +-
 test/auto-complete-element.js | 25 +++++++++++++++++++++++++
 web-test-runner.config.js     |  3 +++
 4 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9108c71..609f080 100644
--- a/README.md
+++ b/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.
 
diff --git a/examples/index.html b/examples/index.html
index 617389c..bd89f1f 100644
--- a/examples/index.html
+++ b/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));
       }
diff --git a/test/auto-complete-element.js b/test/auto-complete-element.js
index 7d1827f..e0d132b 100644
--- a/test/auto-complete-element.js
+++ b/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) {
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index 8647d26..3eb4366 100644
--- a/web-test-runner.config.js
+++ b/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()
     },

From a1f37376196c0b504cb3db461db1957492b04eb8 Mon Sep 17 00:00:00 2001
From: Kendall Gassner <kendallgassner@github.com>
Date: Wed, 12 Feb 2025 20:13:02 +0000
Subject: [PATCH 9/9] fix

---
 test/auto-complete-element.js | 50 +++++++++++++++++------------------
 web-test-runner.config.js     |  6 +++--
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/test/auto-complete-element.js b/test/auto-complete-element.js
index e0d132b..87cdcea 100644
--- a/test/auto-complete-element.js
+++ b/test/auto-complete-element.js
@@ -4,6 +4,31 @@ import {AutoCompleteElement} from '../src/index.ts'
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 describe('auto-complete element', function () {
+  describe('no results', () => {
+    beforeEach(function () {
+      document.body.innerHTML = `
+        <div id="mocha-fixture">
+          <auto-complete src="/noresults" 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, 'none')
+      await once(container, 'loadend')
+      assert.isTrue(container.open)
+      assert.equal(1, popup.children.length)
+    })
+  })
+
   describe('element creation', function () {
     it('creates from document.createElement', function () {
       const el = document.createElement('auto-complete')
@@ -434,31 +459,6 @@ 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) {
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index 3eb4366..24ebe22 100644
--- a/web-test-runner.config.js
+++ b/web-test-runner.config.js
@@ -28,9 +28,11 @@ 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')) {
+      } else if (method === 'GET' && url.startsWith('/noresults?q=none')) {
         response.status = 200
-        response.body = `<li role="presentation" aria-hidden="true" disabled data-no-result-found="true">No results found!</li>`
+        response.body = `
+            <li role="presentation" aria-hidden="true" disabled data-no-result-found="true">No results found!</li>
+          `
       }
       await next()
     },