Merge pull request #114 from github/add-popover-support

add support for popovers
github · Nov 13, 2023 · fd5c94b · fd5c94b
2 parents f5299d4 + c240d6e
commit fd5c94b
Show file tree

Hide file tree

Showing 6 changed files with 2,719 additions and 7,996 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -46,7 +46,7 @@
         <input name="robot" type="text" aria-labelledby="robots-label" autofocus />
         <!-- if a clear button is passed in, recommended to be *before* UL elements to avoid conflicting with their blur logic -->
         <button id="robot-clear">x</button>
-        <ul id="items-popup"></ul>
+        <ul popover id="items-popup"></ul>
         <!-- For built-in screen-reader announcements:
           - Note the ID is the same as the <ul> with "feedback" appended
           - Also note that aria attributes will be added programmatically if they aren't set correctly  
@@ -64,7 +64,7 @@
         <input id="robot-a" name="robot-a" type="text" aria-labelledby="robots-a-label" autofocus />
         <!-- if a clear button is passed in, recommended to be *before* UL elements to avoid conflicting with their blur logic -->
         <button id="robot-a-clear">x</button>
-        <ul id="items-a-popup"></ul>
+        <ul popover id="items-a-popup"></ul>
         <!-- For built-in screen-reader announcements:
           - Note the ID is the same as the <ul> with "feedback" appended
           - Also note that aria attributes will be added programmatically if they aren't set correctly  
@@ -79,7 +79,7 @@
       <label id="robots-2-label" for="robot-2">Robots (without autoselect on enter)</label>
       <auto-complete src="/demo" for="items-2-popup" aria-labelledby="robots-2-label">
         <input name="robot-2" type="text" aria-labelledby="robots-2-label" autofocus />
-        <ul id="items-2-popup"></ul>
+        <ul popover id="items-2-popup"></ul>
         <div id="items-2-popup-feedback" class="sr-only"></div>
       </auto-complete>
       <button type="submit">Save</button>
@@ -88,9 +88,15 @@
     <!-- example with a custom fetching result method -->
     <form>
       <label id="custom-fetching-robots-label" for="custom-fetching-robot">Custom Fetching Robots</label>
-      <auto-complete id="custom-fetching-method" src="/demo" for="custom-fetching-items-popup" aria-labelledby="custom-fetching-robots-label" data-autoselect="true">
-        <input name="custom-fetching-robot" type="text" aria-labelledby="custom-fetching-robots-label" autofocus>
-        <ul id="custom-fetching-items-popup"></ul>
+      <auto-complete
+        id="custom-fetching-method"
+        src="/demo"
+        for="custom-fetching-items-popup"
+        aria-labelledby="custom-fetching-robots-label"
+        data-autoselect="true"
+      >
+        <input name="custom-fetching-robot" type="text" aria-labelledby="custom-fetching-robots-label" autofocus />
+        <ul popover id="custom-fetching-items-popup"></ul>
         <div id="custom-fetching-items-popup-feedback" class="sr-only"></div>
       </auto-complete>
       <button type="submit">Save</button>
@@ -107,7 +113,7 @@
       <auto-complete src="/demo" for="fetch-on-empty-items-popup" aria-labelledby="fetch-on-empty-robots-label" fetch-on-empty>
         <input name="fetch-on-empty-robot" type="text" aria-labelledby="fetch-on-empty-robots-label" autofocus />
         <button id="fetch-on-empty-robot-clear">x</button>
-        <ul id="fetch-on-empty-items-popup"></ul>
+        <ul popover id="fetch-on-empty-items-popup"></ul>
         <div id="fetch-on-empty-items-popup-feedback" class="sr-only"></div>
       </auto-complete>
       <button type="submit">Save</button>