added aria attributes

dokuwiki · Mar 28, 2018 · 2171f9c · 2171f9c
1 parent 1d91889
commit 2171f9c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/inc/Ui/Search.php b/inc/Ui/Search.php
@@ -116,7 +116,7 @@ protected function addSortTool(Form $searchForm)
             $activeOption = 'mtime';
         }
 
-        $searchForm->addTagOpen('div')->addClass('toggle');
+        $searchForm->addTagOpen('div')->addClass('toggle')->attr('aria-haspopup', 'true');
         // render current
         $currentWrapper = $searchForm->addTagOpen('div')->addClass('current');
         if ($activeOption !== 'hits') {
@@ -126,7 +126,7 @@ protected function addSortTool(Form $searchForm)
         $searchForm->addTagClose('div');
 
         // render options list
-        $searchForm->addTagOpen('ul');
+        $searchForm->addTagOpen('ul')->attr('aria-expanded', 'false');
 
         foreach ($options as $key => $option) {
             $listItem = $searchForm->addTagOpen('li');
@@ -194,7 +194,8 @@ protected function addSearchAssistanceElements(Form $searchForm)
 
         $searchForm->addTagOpen('div')
             ->addClass('advancedOptions')
-            ->attr('style', 'display: none;');
+            ->attr('style', 'display: none;')
+            ->attr('aria-hidden', 'true');
 
         $this->addFragmentBehaviorLinks($searchForm);
         $this->addNamespaceSelector($searchForm);
@@ -268,7 +269,7 @@ protected function addFragmentBehaviorLinks(Form $searchForm)
             ]], $options);
         }
 
-        $searchForm->addTagOpen('div')->addClass('toggle');
+        $searchForm->addTagOpen('div')->addClass('toggle')->attr('aria-haspopup', 'true');
         // render current
         $currentWrapper = $searchForm->addTagOpen('div')->addClass('current');
         if ($activeOption !== 'exact') {
@@ -278,7 +279,7 @@ protected function addFragmentBehaviorLinks(Form $searchForm)
         $searchForm->addTagClose('div');
 
         // render options list
-        $searchForm->addTagOpen('ul');
+        $searchForm->addTagOpen('ul')->attr('aria-expanded', 'false');
 
         foreach ($options as $key => $option) {
             $listItem = $searchForm->addTagOpen('li');
@@ -318,7 +319,7 @@ protected function addNamespaceSelector(Form $searchForm)
         $baseNS = empty($this->parsedQuery['ns']) ? '' : $this->parsedQuery['ns'][0];
         $extraNS = $this->getAdditionalNamespacesFromResults($baseNS);
 
-        $searchForm->addTagOpen('div')->addClass('toggle');
+        $searchForm->addTagOpen('div')->addClass('toggle')->attr('aria-haspopup', 'true');
         // render current
         $currentWrapper = $searchForm->addTagOpen('div')->addClass('current');
         if ($baseNS) {
@@ -330,7 +331,7 @@ protected function addNamespaceSelector(Form $searchForm)
         $searchForm->addTagClose('div');
 
         // render options list
-        $searchForm->addTagOpen('ul');
+        $searchForm->addTagOpen('ul')->attr('aria-expanded', 'false');
 
         $listItem = $searchForm->addTagOpen('li');
         if ($baseNS) {
@@ -431,7 +432,7 @@ protected function addDateSelector(Form $searchForm)
             }
         }
 
-        $searchForm->addTagOpen('div')->addClass('toggle');
+        $searchForm->addTagOpen('div')->addClass('toggle')->attr('aria-haspopup', 'true');
         // render current
         $currentWrapper = $searchForm->addTagOpen('div')->addClass('current');
         if ($INPUT->has('dtb') || $INPUT->has('dta')) {
@@ -441,7 +442,7 @@ protected function addDateSelector(Form $searchForm)
         $searchForm->addTagClose('div');
 
         // render options list
-        $searchForm->addTagOpen('ul');
+        $searchForm->addTagOpen('ul')->attr('aria-expanded', 'false');
 
         foreach ($options as $key => $option) {
             $listItem = $searchForm->addTagOpen('li');

diff --git a/lib/scripts/search.js b/lib/scripts/search.js
@@ -7,23 +7,38 @@ jQuery(function () {
     }
 
     const $toggleAssistanceButton = $searchForm.find('button.toggleAssistant');
-    if (!$toggleAssistanceButton.length){
+    if (!$toggleAssistanceButton.length) {
         return;
     }
 
     $toggleAssistanceButton.on('click', function () {
-        jQuery('.advancedOptions').toggle();
+        jQuery('.advancedOptions').toggle(0, function () {
+            var $me = jQuery(this);
+            if ($me.attr('aria-hidden')) {
+                $me.removeAttr('aria-hidden');
+                $toggleAssistanceButton.attr('aria-expanded', 'true');
+            } else {
+                $me.attr('aria-hidden', 'true');
+                $toggleAssistanceButton.attr('aria-expanded', 'false');
+            }
+        });
         DokuCookie.setValue('sa', !DokuCookie.getValue('sa'));
     });
 
     if (DokuCookie.getValue('sa')) {
         $toggleAssistanceButton.click();
     }
 
-    $searchForm.find('.advancedOptions .toggle div.current').on('click', function() {
+    $searchForm.find('.advancedOptions .toggle div.current').on('click', function () {
         var $me = jQuery(this);
         $me.parent().siblings().removeClass('open');
+        $me.parent().siblings().find('ul:first').attr('aria-expanded', 'false');
         $me.parent().toggleClass('open');
+        if ($me.parent().hasClass('open')) {
+            $me.parent().find('ul:first').attr('aria-expanded', 'true');
+        } else {
+            $me.parent().find('ul:first').attr('aria-expanded', 'false');
+        }
     });
 
 });