From 3cee335ad57aa8cd39f55a6fcdb750d801d06530 Mon Sep 17 00:00:00 2001
From: Thomas Hackl <hackl@data-quest.de>
Date: Wed, 24 Apr 2024 12:46:18 +0000
Subject: =?UTF-8?q?Resolve=20"article.studip=20und=20fieldsets=20kennzeich?=
 =?UTF-8?q?nen=20nicht=20ihren=20auf-/zugeklappten=20Zustand=20f=C3=BCr=20?=
 =?UTF-8?q?Screenreader=20mit=20aria-expanded"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #4040

Merge request studip/studip!2914
---
 app/views/course/basicdata/view.php                        | 12 ++++++++----
 resources/assets/javascripts/bootstrap/application.js      |  1 +
 resources/assets/javascripts/bootstrap/article.js          |  1 +
 resources/assets/javascripts/bootstrap/contentbox.js       |  1 +
 resources/assets/javascripts/lib/personal_notifications.js |  5 +++++
 templates/header.php                                       |  3 ++-
 6 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/views/course/basicdata/view.php b/app/views/course/basicdata/view.php
index 9f7b5b3..380fdb4 100644
--- a/app/views/course/basicdata/view.php
+++ b/app/views/course/basicdata/view.php
@@ -24,7 +24,8 @@ $message_types = ['msg' => "success", 'error' => "error", 'info' => "info"];
     <?= CSRFProtection::tokenTag() ?>
     <input id="open_variable" type="hidden" name="open" value="<?= $flash['open'] ?>">
     <?= Studip\Button::createAccept(_('Speichern'), 'store', ['style' => 'display: none;']) ?>
-    <fieldset <?= isset($flash['open']) && $flash['open'] != 'bd_basicsettings' ? 'class="collapsed"' : ''?> data-open="bd_basicsettings">
+    <fieldset <?= isset($flash['open']) && $flash['open'] != 'bd_basicsettings' ? 'class="collapsed"' : ''?> data-open="bd_basicsettings"
+            aria-expanded="<?= isset($flash['open']) && $flash['open'] === 'bd_basicsettings' ? 'true' : 'false' ?>">
         <legend><?= _('Grundeinstellungen') ?></legend>
 
 <? if (!$attributes): ?>
@@ -55,7 +56,8 @@ $message_types = ['msg' => "success", 'error' => "error", 'info' => "info"];
         </label>
     </fieldset>
 
-    <fieldset <?= !isset($flash['open']) || $flash['open'] != 'inset' ? 'class="collapsed"' : ''?> data-open="bd_inst">
+    <fieldset <?= !isset($flash['open']) || $flash['open'] != 'inset' ? 'class="collapsed"' : ''?> data-open="bd_inst"
+            aria-expanded="<?= isset($flash['open']) && $flash['open'] === 'inset' ? 'true' : 'false' ?>">
         <legend><?= _('Einrichtungen') ?></legend>
 
 <? if (!$institutional): ?>
@@ -78,7 +80,8 @@ $message_types = ['msg' => "success", 'error' => "error", 'info' => "info"];
 <? endif; ?>
     </fieldset>
 
-    <fieldset <?= !isset($flash['open']) || $flash['open'] != 'bd_personal' ? 'class="collapsed"' : ''?>>
+    <fieldset <?= !isset($flash['open']) || $flash['open'] != 'bd_personal' ? 'class="collapsed"' : ''?>
+        aria-expanded="<?= isset($flash['open']) && $flash['open'] === 'bd_personal' ? 'true' : 'false' ?>">
         <legend><?= _('Personal') ?></legend>
 
         <table class="default">
@@ -293,7 +296,8 @@ $message_types = ['msg' => "success", 'error' => "error", 'info' => "info"];
             </tbody>
         </table>
     </fieldset>
-    <fieldset <?= !isset($flash['open']) || $flash['open'] != 'bd_description' ? 'class="collapsed"' : ''?> data-open="bd_description">
+    <fieldset <?= !isset($flash['open']) || $flash['open'] != 'bd_description' ? 'class="collapsed"' : ''?> data-open="bd_description"
+            aria-expanded="<?= isset($flash['open']) && $flash['open'] === 'bd_description' ? 'true' : 'false' ?>">
         <legend><?= _('Weitere Angaben') ?></legend>
 
 <? if (!$descriptions): ?>
diff --git a/resources/assets/javascripts/bootstrap/application.js b/resources/assets/javascripts/bootstrap/application.js
index a9f53df..4ad248f 100644
--- a/resources/assets/javascripts/bootstrap/application.js
+++ b/resources/assets/javascripts/bootstrap/application.js
@@ -353,6 +353,7 @@ jQuery(document).on('click', 'a[data-behaviour~="ajax-toggle"]', function (event
 (function ($) {
     $(document).on('click', 'form[name=course-details] fieldset legend', function () {
         $('#open_variable').attr('value', $(this).parent('fieldset').data('open'));
+        $(this).parent('fieldset').attr('aria-expanded',  $(this).parent('fieldset').attr('aria-expanded') == 'true' ? 'false' : 'true');
     });
 }(jQuery));
 
diff --git a/resources/assets/javascripts/bootstrap/article.js b/resources/assets/javascripts/bootstrap/article.js
index fbfc131..04316f5 100644
--- a/resources/assets/javascripts/bootstrap/article.js
+++ b/resources/assets/javascripts/bootstrap/article.js
@@ -13,6 +13,7 @@
 
         // Open the contentbox
         article.toggleClass('open').removeClass('new');
+        article.attr('aria-expanded', article.attr('aria-expanded') === 'true' ? 'false' : 'true');
     });
 
     // Open closed article contents when location hash matches
diff --git a/resources/assets/javascripts/bootstrap/contentbox.js b/resources/assets/javascripts/bootstrap/contentbox.js
index 42c5df1..3f05331 100644
--- a/resources/assets/javascripts/bootstrap/contentbox.js
+++ b/resources/assets/javascripts/bootstrap/contentbox.js
@@ -13,5 +13,6 @@ $(document).on('click', 'section.contentbox article header h1 a', function(e) {
 
         // Open the contentbox
         article.toggleClass('open').removeClass('new');
+        article.attr('aria-expanded', article.attr('aria-expanded') === 'true' ? 'false' : 'true');
     }
 });
diff --git a/resources/assets/javascripts/lib/personal_notifications.js b/resources/assets/javascripts/lib/personal_notifications.js
index 90f1053..392e8b0 100644
--- a/resources/assets/javascripts/lib/personal_notifications.js
+++ b/resources/assets/javascripts/lib/personal_notifications.js
@@ -116,6 +116,11 @@ const PersonalNotifications = {
                     .click(STUDIP.PersonalNotifications.activate);
             }
         }
+
+        // Special handling for personal notifications:
+        $('#notification-container').on('mouseover mouseout', function (event) {
+            $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
+        });
     },
     activate () {
         Promise.resolve(Notification.requestPermission()).then(permission => {
diff --git a/templates/header.php b/templates/header.php
index f11b23c..5a935b3 100644
--- a/templates/header.php
+++ b/templates/header.php
@@ -141,7 +141,8 @@ if ($navigation) {
                                     ngettext('%u Benachrichtigung', '%u Benachrichtigungen', count($notifications)),
                                     count($notifications)
                                 ) ?>" data-lastvisit="<?= $lastvisit ?>"
-                                <?= count($notifications) == 0 ? 'disabled' : '' ?>>
+                                <?= count($notifications) == 0 ? 'disabled' : '' ?> aria-controls="notification-list"
+                                aria-expanded="false">
                             <span class="count" aria-hidden="true"><?= count($notifications) ?></span>
                         </button>
                         <input type="checkbox" id="notification_checkbox">
-- 
cgit v1.0