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);