chore: improve accessibility

hugomods · May 13, 2023 · 6636e8e · 6636e8e
1 parent f87cb77
commit 6636e8e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/assets/search/js/dropdown.ts b/assets/search/js/dropdown.ts
@@ -1,14 +1,29 @@
 (() => {
+    const hide = (dropdown: HTMLElement) => {
+        dropdown.classList.remove('show')
+        dropdown.setAttribute('aria-expanded', 'false')
+    }
+
+    const show = (dropdown: HTMLElement) => {
+        dropdown.classList.add('show')
+        dropdown.setAttribute('aria-expanded', 'true')
+    }
+
+    const toggle = (dropdown: HTMLElement) => {
+        if (dropdown.classList.contains('show')) {
+            hide(dropdown)
+            return
+        }
+
+        show(dropdown)
+    }
+
     document.addEventListener('DOMContentLoaded', () => {
         document.addEventListener('click', (e: Event) => {
-            const toggle = e.target.closest('.search-dropdown-toggle')
-            if (toggle) {
-                const dropdown = toggle.closest('.search-dropdown')
-                if (dropdown.classList.contains('show')) {
-                    dropdown.classList.remove('show')
-                } else {
-                    dropdown.classList.add('show')
-                }
+            const toggleEl = e.target.closest('.search-dropdown-toggle')
+            if (toggleEl) {
+                const dropdown = toggleEl.closest('.search-dropdown')
+                toggle(dropdown)
                 e.preventDefault()
                 return
             }
@@ -39,7 +54,7 @@
                         dropdown.classList.remove('active')
                     }
                     dropdown.querySelector('.search-dropdown-label').innerText = item.innerText
-    
+
                     dropdown.querySelectorAll('.search-dropdown-item').forEach((lang) => {
                         lang.classList.remove('active')
                     })
@@ -56,8 +71,8 @@
             }
 
             // close opened dropdown when losing focus.
-            document.querySelectorAll('.search-dropdown.show').forEach((dropdown) => {
-                dropdown.classList.remove('show')
+            document.querySelectorAll<HTMLElement>('.search-dropdown.show').forEach((dropdown) => {
+                hide(dropdown)
             })
         })
     })

diff --git a/assets/search/js/form.ts b/assets/search/js/form.ts
@@ -46,7 +46,7 @@ export default class Form {
       ${this.renderSorting()}
       ${this.renderYears()}
       ${this.renderTaxonomies()}
-      <button class="search-panel-action search-expand-toggle${params.expand_results_meta ? ' active' : ''}">
+      <button class="search-panel-action search-expand-toggle${params.expand_results_meta ? ' active' : ''}" title="Expand">
         <span class="search-panel-action-icon">${params.icons['expand']}</span>
         <span class="search-panel-action-label">${i18n.translate('expand')}</span>
       </button>
@@ -77,7 +77,7 @@ export default class Form {
         }
 
         return `<div class="search-dropdown search-panel-action search-filter-lang${lang ? ' active' : ''}" data-value="${lang}">
-  <button class="search-dropdown-toggle" type="button" aria-expanded="false">
+  <button class="search-dropdown-toggle" type="button" aria-expanded="false" title="Languages">
     ${params.icons['lang']}
     <span class="search-dropdown-label">${label}</span>
   </button>
@@ -93,7 +93,7 @@ export default class Form {
         const defaultSort = i18n.translate('sort_by_default')
 
         return `<div class="search-dropdown search-panel-action search-sorting">
-  <button class="search-dropdown-toggle" type="button" aria-expanded="false">
+  <button class="search-dropdown-toggle" type="button" aria-expanded="false" title="Sorting">
     ${params.icons['sort']} <span class="search-dropdown-label">${defaultSort}</span>
   </button>
   <ul class="search-dropdown-menu">
@@ -114,9 +114,10 @@ export default class Form {
             items += `<li class="search-dropdown-item" data-value="${year}">${year}</li>`
         }
 
+        const label = i18n.translate('years')
         return `<div class="search-dropdown search-panel-action search-years" multiple>
-        <button class="search-dropdown-toggle" type="button" aria-expanded="false">
-          ${params.icons['year']} <span class="search-dropdown-label">${i18n.translate('years')}</span>
+        <button class="search-dropdown-toggle" type="button" aria-expanded="false" title="${label}">
+          ${params.icons['year']} <span class="search-dropdown-label">${label}</span>
         </button>
         <ul class="search-dropdown-menu">${items}</ul>
       </div>`
@@ -136,9 +137,10 @@ export default class Form {
             v += `<li class="search-dropdown-item" data-value="${name}">${name}</li>`
         }
 
+        const label = i18n.translate("taxonomy_" + name, null, name)
         return `<div class="search-dropdown search-panel-action search-taxonomies search-taxonomies-${name}" multiple>
-        <button class="search-dropdown-toggle" type="button" aria-expanded="false">
-          ${params.icons['taxonomies']} <span class="search-dropdown-label">${i18n.translate("taxonomy_" + name, null, name)}</span>
+        <button class="search-dropdown-toggle" type="button" aria-expanded="false" title="${label}">
+          ${params.icons['taxonomies']} <span class="search-dropdown-label">${label}</span>
         </button>
         <ul class="search-dropdown-menu">${v}</ul>
       </div>`