Accessibility improvement for masthead search form and fix for .js-hi…

…de feature

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.18.1] - 2019-07-28
+
+### Fixed
+- Restored .js-hide JS behaviour, which was unintentionally commented out.
+- As an accessibility improvement focus masthead search input after it has been toggled open.
+
 ## [0.18.0] - 2019-07-28
 
 ### Added

templates/layouts/default.php

@@ -50,7 +50,7 @@
                         <i class="fas fa-layer-group" aria-hidden="true"></i> <?= $site_name ?>
                     <?php endif; ?>
                 </a>
-                <button class="js-toggle js-toggle--search js-show" aria-controls="header-search-form" hidden>
+                <button class="js-toggle js-toggle--search js-show" data-focus-after="se-masthead-form-input" aria-controls="header-search-form" hidden>
                     <i class="fas fa-search" aria-hidden="true"></i>
                     <span class="visually-hidden"><?= __('Toggle header search form') ?></span>
                 </button>

templates/resources/js/main.js

@@ -36,7 +36,7 @@ document.querySelectorAll('.js-show').forEach(function (item) {
 
 // JS hide
 document.querySelectorAll('.js-hide').forEach(function (item) {
-//    item.setAttribute('hidden', true);
+    item.setAttribute('hidden', true);
 });
 
 /**
@@ -55,6 +55,13 @@ function toggleTarget(target, toggle, hiddenState) {
     } else {
         target.classList.remove('js-hide');
         toggle.classList.add('js-toggle--active');
+        const focusAfter = toggle.getAttribute('data-focus-after');
+        if (focusAfter) {
+            const focusTarget = document.getElementById(focusAfter);
+            if (focusTarget) {
+                focusTarget.focus();
+            }
+        }
     }
 }