|
46 | 46 | <input name="robot" type="text" aria-labelledby="robots-label" autofocus /> |
47 | 47 | <!-- if a clear button is passed in, recommended to be *before* UL elements to avoid conflicting with their blur logic --> |
48 | 48 | <button id="robot-clear">x</button> |
49 | | - <ul id="items-popup"></ul> |
| 49 | + <ul popover id="items-popup"></ul> |
50 | 50 | <!-- For built-in screen-reader announcements: |
51 | 51 | - Note the ID is the same as the <ul> with "feedback" appended |
52 | 52 | - Also note that aria attributes will be added programmatically if they aren't set correctly |
|
64 | 64 | <input id="robot-a" name="robot-a" type="text" aria-labelledby="robots-a-label" autofocus /> |
65 | 65 | <!-- if a clear button is passed in, recommended to be *before* UL elements to avoid conflicting with their blur logic --> |
66 | 66 | <button id="robot-a-clear">x</button> |
67 | | - <ul id="items-a-popup"></ul> |
| 67 | + <ul popover id="items-a-popup"></ul> |
68 | 68 | <!-- For built-in screen-reader announcements: |
69 | 69 | - Note the ID is the same as the <ul> with "feedback" appended |
70 | 70 | - Also note that aria attributes will be added programmatically if they aren't set correctly |
|
79 | 79 | <label id="robots-2-label" for="robot-2">Robots (without autoselect on enter)</label> |
80 | 80 | <auto-complete src="/demo" for="items-2-popup" aria-labelledby="robots-2-label"> |
81 | 81 | <input name="robot-2" type="text" aria-labelledby="robots-2-label" autofocus /> |
82 | | - <ul id="items-2-popup"></ul> |
| 82 | + <ul popover id="items-2-popup"></ul> |
83 | 83 | <div id="items-2-popup-feedback" class="sr-only"></div> |
84 | 84 | </auto-complete> |
85 | 85 | <button type="submit">Save</button> |
|
88 | 88 | <!-- example with a custom fetching result method --> |
89 | 89 | <form> |
90 | 90 | <label id="custom-fetching-robots-label" for="custom-fetching-robot">Custom Fetching Robots</label> |
91 | | - <auto-complete id="custom-fetching-method" src="/demo" for="custom-fetching-items-popup" aria-labelledby="custom-fetching-robots-label" data-autoselect="true"> |
92 | | - <input name="custom-fetching-robot" type="text" aria-labelledby="custom-fetching-robots-label" autofocus> |
93 | | - <ul id="custom-fetching-items-popup"></ul> |
| 91 | + <auto-complete |
| 92 | + id="custom-fetching-method" |
| 93 | + src="/demo" |
| 94 | + for="custom-fetching-items-popup" |
| 95 | + aria-labelledby="custom-fetching-robots-label" |
| 96 | + data-autoselect="true" |
| 97 | + > |
| 98 | + <input name="custom-fetching-robot" type="text" aria-labelledby="custom-fetching-robots-label" autofocus /> |
| 99 | + <ul popover id="custom-fetching-items-popup"></ul> |
94 | 100 | <div id="custom-fetching-items-popup-feedback" class="sr-only"></div> |
95 | 101 | </auto-complete> |
96 | 102 | <button type="submit">Save</button> |
|
107 | 113 | <auto-complete src="/demo" for="fetch-on-empty-items-popup" aria-labelledby="fetch-on-empty-robots-label" fetch-on-empty> |
108 | 114 | <input name="fetch-on-empty-robot" type="text" aria-labelledby="fetch-on-empty-robots-label" autofocus /> |
109 | 115 | <button id="fetch-on-empty-robot-clear">x</button> |
110 | | - <ul id="fetch-on-empty-items-popup"></ul> |
| 116 | + <ul popover id="fetch-on-empty-items-popup"></ul> |
111 | 117 | <div id="fetch-on-empty-items-popup-feedback" class="sr-only"></div> |
112 | 118 | </auto-complete> |
113 | 119 | <button type="submit">Save</button> |
|
0 commit comments