fix: remove multiple active results and keep only one

hugomods · May 5, 2023 · 1dd929d · 1dd929d
1 parent 20384da
commit 1dd929d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/assets/search/js/navigator.ts b/assets/search/js/navigator.ts
@@ -7,22 +7,22 @@ class Navigator {
 
     private current(): null | HTMLElement {
         const modal = this.modal()
-        return modal ? modal.querySelector('.search-result.active') : document.querySelector('.search-container .search-result.active')
+        return modal ? 
+          modal.querySelector('.search-result[aria-selected="true"]') : 
+          document.querySelector('.search-container .search-result[aria-selected="true"]')
     }
 
     private go(dir) {
         const current = this.current()
         let target
-        if (!current) {
-            target = current
-        } else {
+        if (current) {
+            current.ariaSelected = 'false'
             target = dir === 'prev' ? current.previousElementSibling : current.nextElementSibling
         }
         target = target ?? this.first()
 
-        current?.classList.remove('active')
         target.focus()
-        target.classList.add('active')
+        target.ariaSelected = 'true'
     }
 
     private first() {

diff --git a/assets/search/js/renderer.ts b/assets/search/js/renderer.ts
@@ -186,6 +186,10 @@ export default class Renderer {
                             this.toggleMeta(node.querySelector('.search-result-meta'))
                             e.preventDefault()
                         })
+
+                        node.addEventListener('mousemove', () => {
+                            this.activeResult(node)
+                        })
                     }
                 }
             }
@@ -195,6 +199,17 @@ export default class Renderer {
         observer.observe(container, { childList: true });
     }
 
+    activeResult(target) {
+        if (target.ariaSelected === 'true') {
+            return
+        }
+
+        this.getContainer().querySelectorAll('.search-result').forEach((result) => {
+            result.ariaSelected = 'false'
+        });
+        target.ariaSelected = 'true'
+    }
+
     private toggleMeta(meta: HTMLElement) {
         if (meta.classList.contains('show')) {
             meta.classList.remove('show')
@@ -251,7 +266,7 @@ export default class Renderer {
         let results = ''
         for (let i = min; i < this.results.length && i < max; i++) {
             const result = this.results[i]
-            results += `<a title="${result.item.title}" href="${result.item.url}" class="search-result">
+            results += `<a title="${result.item.title}" href="${result.item.url}" class="search-result" aria-selected="false">
   <div class="search-result-icon">${this.icon(result.item)}</div>
   <div class="search-result-content">
     <div class="search-result-title">${this.title(result)}</div>

diff --git a/assets/search/scss/_result.scss b/assets/search/scss/_result.scss
@@ -143,8 +143,7 @@
         margin-top: 0;
     }
 
-    &:hover,
-    &.active {
+    &[aria-selected="true"] {
         background: var(--search-result-bg-active);
         color: var(--search-result-color-active);