Clean up advanced search toggle.

This also introduces the "Search options" string. When the button uses
aria-labelledby to be read by screen readers, Voiceover will clobber
status changes trying to read out the aria-labelledby attribute.
"Search Options, expanded, button" disappears under "Search Options".
By using only aria-label, Voiceover will actually read the button status
change in a reasonable manner.

admin/themes/default/css/sass/components/_search.scss

@@ -102,10 +102,6 @@
     box-sizing: border-box;
     width: 100%;
 
-    &.open {
-        display: block;
-    }
-
     input[type=radio] { margin: 0 9px 0 0; }
     input[type=checkbox] { margin-right: 5px; }
 
@@ -115,6 +111,10 @@
     }
 }
 
+.show-advanced.open + #advanced-form {
+    display: block;
+}
+
 #advanced-search-form {
 	.advanced-search-terms {
 		margin-bottom: $spacing-m;

admin/themes/default/javascripts/globals.js

@@ -89,15 +89,9 @@ if (!Omeka) {
     };
 
     Omeka.showAdvancedForm = function () {
-        var advanced_form = $('#advanced-form');
-        advanced_form.addClass('closed');
-        $('#search-container').addClass('with-advanced');
-
-        $('.show-advanced').click(function(e) {
-            e.preventDefault();
+        $('#search-form').on('click', '.show-advanced', function() {
             var advanced_toggle = $(this);
-            advanced_toggle.toggleClass('open').toggleClass('closed');
-            advanced_form.toggleClass('open').toggleClass('closed');
+            advanced_toggle.toggleClass('open');
             if (advanced_toggle.hasClass('open')) {
                 advanced_toggle.attr('aria-expanded', true);
             } else {

application/views/scripts/search/search-form.php

@@ -7,10 +7,10 @@
         )); 
     ?>
     <?php if ($options['show_advanced']): ?>
-    <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">
+    <button id="advanced-search" type="button" aria-expanded="false" class="show-advanced button" title="<?php echo __('Search options'); ?>" aria-label="<?php echo __('Search options') ?>">
         <span class="icon" aria-hidden="true"></span>
     </button>
-    <div id="advanced-form" class="closed" aria-labelledby="search-form advanced-search" aria-role="region">
+    <div id="advanced-form">
         <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); ?>