changes according to review, untested - will test tomorrowbiest-6360

4 files changed, 14 insertions, 25 deletions

diff --git a/resources/assets/javascripts/bootstrap/header_navigation.js b/resources/assets/javascripts/bootstrap/header_navigation.js
index f7f6e89..9b80619 100644
--- a/resources/assets/javascripts/bootstrap/header_navigation.js
+++ b/resources/assets/javascripts/bootstrap/header_navigation.js
@@ -1,14 +1,3 @@
-document.addEventListener('click', (event) => {
-    if (!event.target.matches('#header-sink-toggle')) {
-        return;
-    }
-
-    const sink = document.getElementById('header-sink');
-    const list = sink.parentNode.querySelector('ul');
-    sink.checked = !sink.checked;
-    list.setAttribute('aria-expanded', sink.checked ? 'true' : 'false');
-});
-
 // Hide sink on touch elsewhere
 $(document).on('touchstart', function (event) {
     if ($(event.target).closest('li.overflow').length === 0) {
diff --git a/resources/assets/javascripts/bootstrap/studip_helper_attributes.js b/resources/assets/javascripts/bootstrap/studip_helper_attributes.js
index 54f8da3..0ea34bf 100644
--- a/resources/assets/javascripts/bootstrap/studip_helper_attributes.js
+++ b/resources/assets/javascripts/bootstrap/studip_helper_attributes.js
@@ -298,24 +298,24 @@ $(document).on('keydown', '.enter-accessible', function(event) {
 
 $(document).on('click keydown', '[data-toggles]', function (event) {
     if ((event.type === 'keydown' && event.key === 'Enter') || event.type === 'click') {
-        const target = event.currentTarget.dataset.toggles;
-        //Check if the target is a checkbox. These have to be toggled differently than
-        //other elements:
+        const target = this.dataset.toggles;
+        // Check if the target is a checkbox. These have to be toggled differently than
+        // other elements:
         if ($(target).is(':checkbox')) {
-            //Toggle the checked state of the checkbox:
+            // Toggle the checked state of the checkbox:
             $(target).prop('checked', !$(target).prop('checked'));
         } else {
-            //Do the normal toggle operation:
+            // Do the normal toggle operation:
             $(target).toggle();
         }
 
-        const controls = $(event.currentTarget).attr('aria-controls');
+        const controls = $(this).attr('aria-controls');
         if (controls) {
             // Find elements which control the expanded status of the same element.
             const elements = $('[aria-controls="' + controls + '"]');
-            const expanded = $(event.currentTarget).attr('aria-expanded') === 'true';
+            const expanded = $(this).attr('aria-expanded') === 'true';
             // Set the aria-expanded status accordingly.
-            elements.attr('aria-expanded', !expanded);
+            elements.attr('aria-expanded', expanded ? 'false' : 'true');
         }
 
         event.preventDefault();
diff --git a/resources/assets/stylesheets/scss/navigation.scss b/resources/assets/stylesheets/scss/navigation.scss
index 59b7daa..87b3cd3 100644
--- a/resources/assets/stylesheets/scss/navigation.scss
+++ b/resources/assets/stylesheets/scss/navigation.scss
@@ -137,10 +137,6 @@ body:not(.fixed) #navigation-level-1-items {
             transition: opacity var(--transition-duration);
         }
 
-        &::after {
-
-        }
-
         // Display menu on activation
         &:hover button.as-link,
         input[type="checkbox"]:checked {
diff --git a/templates/header.php b/templates/header.php
index 275fc1f..cb16a6c 100644
--- a/templates/header.php
+++ b/templates/header.php
@@ -218,7 +218,11 @@ if ($navigation) {
         <? endforeach; ?>
             <li class="overflow">
                 <input type="checkbox" id="header-sink">
-                <button class="as-link" aria-controls="header-sink" id="header-sink-toggle">
+                <button class="as-link"
+                        aria-controls="header-sink-list"
+                        aria-expanded="false"
+                        data-toggles="#header-sink"
+                >
                     <?= Icon::create('action', 'navigation')->asImg(32, [
                         'class'  => 'headericon original',
                         'title'  => '',
@@ -229,7 +233,7 @@ if ($navigation) {
                     </div>
                 </button>
 
-                <ul aria-expanded="false">
+                <ul id="header-sink-list">
                 <? foreach ($header_nav['hidden'] as $path => $nav) : ?>
                     <?= $this->render_partial(
                         'header-navigation-item.php',