Improve aria attributes on advanced search option toggle.

omeka · Jul 3, 2024 · cffb476 · cffb476
1 parent 1dc0021
commit cffb476
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 4 deletions.
diff --git a/admin/themes/default/css/sass/components/_search.scss b/admin/themes/default/css/sass/components/_search.scss
@@ -102,6 +102,9 @@
     box-sizing: border-box;
     width: 100%;
 
+    &.open {
+        display: block;
+    }
 
     input[type=radio] { margin: 0 9px 0 0; }
     input[type=checkbox] { margin-right: 5px; }

diff --git a/admin/themes/default/css/style.css b/admin/themes/default/css/style.css
diff --git a/admin/themes/default/css/style.css.map b/admin/themes/default/css/style.css.map
diff --git a/application/views/scripts/javascripts/globals.js b/application/views/scripts/javascripts/globals.js
@@ -28,7 +28,16 @@ if (!Omeka) {
 
         $('.show-advanced').click(function(e) {
             e.preventDefault();
+            var advanced_toggle = $(this);
+            advanced_toggle.toggleClass('open').toggleClass('closed');
             advanced_form.toggleClass('open').toggleClass('closed');
+            if (advanced_toggle.hasClass('open')) {
+                advanced_toggle.attr('aria-expanded', true);
+                advanced_form.attr('aria-expanded', true);
+            } else {
+                advanced_toggle.attr('aria-expanded', false);
+                advanced_form.attr('aria-expanded', false);
+            }
         });
     };
 

diff --git a/application/views/scripts/search/search-form.php b/application/views/scripts/search/search-form.php
@@ -7,10 +7,10 @@
         )); 
     ?>
     <?php if ($options['show_advanced']): ?>
-    <button id="advanced-search" type="button" class="show-advanced button" aria-label="<?php echo __('Options'); ?>" title="<?php echo __('Options'); ?>" aria-labelledby="search-form advanced-search">
+    <button id="advanced-search" type="button" aria-expanded="false" aria-controls="advanced-form" class="show-advanced button closed" aria-label="<?php echo __('Options'); ?>" title="<?php echo __('Options'); ?>" aria-labelledby="search-form advanced-search">
         <span class="icon" aria-hidden="true"></span>
     </button>
-    <div id="advanced-form">
+    <div id="advanced-form" class="closed" aria-expanded="false" aria-labelledby="search-form advanced-search" aria-role="region">
         <fieldset id="query-types">
             <legend><?php echo __('Search using this query type:'); ?></legend>
             <?php echo $this->formRadio('query_type', $filters['query_type'], null, $query_types); ?>