Fix search ARIA attributes

Author: andybywire

astro/src/pages/index.astro

@@ -41,8 +41,10 @@ const description = (page?.metaDescription as string) || "";
         type="search"
         id="search-box"
         name="search"
+        role="combobox"
+        aria-autocomplete="list"
         aria-expanded="false"
-        aria-controls="search-results"
+        aria-controls="result-details"
         aria-describedby="search-description"
       />
       <label for="search-box"

astro/src/scripts/searchScript.js

@@ -41,8 +41,10 @@ document.addEventListener('DOMContentLoaded', function () {
         }
 
         resultDetails.innerHTML = '';
-        results.forEach(result => {
+        results.forEach((result, index) => {
           const li = document.createElement('li');
+          li.setAttribute('role', 'option');
+          li.id = `search-option-${index}`;
           li.innerHTML = `<h3>
                             <a href="/${result.item.type}/${result.item.slug}" tabindex="0">${result.item.title}</a>
                             <span>${result.item.type}</span>