From a5210d73f5e03cfa3b6fc4a7e869400a41c74a45 Mon Sep 17 00:00:00 2001
From: Thomas Hackl <hackl@data-quest.de>
Date: Tue, 16 Apr 2024 06:22:06 +0000
Subject: =?UTF-8?q?Resolve=20"Barrierefreiheit:=20Auf-=20und=20Zuklappverh?=
 =?UTF-8?q?alten=20f=C3=BCr=20Screenreader=20kennzeichnen"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #3960

Merge request studip/studip!2854
---
 app/views/messages/write.php                               | 14 +++++++++-----
 .../javascripts/bootstrap/studip_helper_attributes.js      |  9 +++++++++
 resources/assets/javascripts/lib/messages.js               |  2 ++
 templates/helpbar/helpbar.php                              | 10 +++++++---
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/app/views/messages/write.php b/app/views/messages/write.php
index 4117628..3ddc423 100644
--- a/app/views/messages/write.php
+++ b/app/views/messages/write.php
@@ -67,22 +67,26 @@
         <ul class="message-options">
         <? if ($GLOBALS['ENABLE_EMAIL_ATTACHMENTS']): ?>
             <li>
-                <a href="" onClick="STUDIP.Messages.toggleSetting('attachments'); return false;">
-                    <?= Icon::create('staple', 'clickable')->asImg(40) ?>
+                <a href="" onClick="STUDIP.Messages.toggleSetting('attachments'); return false;" aria-expanded="false"
+                   role="button" title="<?= _('Anhänge verwalten') ?>" aria-controls="attachments"
+                   id="toggle-attachments">
+                    <?= Icon::create('staple')->asImg(40) ?>
                     <br>
                     <strong><?= _("Anhänge") ?></strong>
                 </a>
             </li>
         <? endif; ?>
             <li>
-                <a href="" onClick="STUDIP.Messages.toggleSetting('tags'); return false;">
-                    <?= Icon::create('star', 'clickable')->asImg(40) ?>
+                <a href="" onClick="STUDIP.Messages.toggleSetting('tags'); return false;" aria-expanded="false"
+                   role="button" title="<?= _('Schlagworte verwalten') ?>" aria-controls="tags" id="toggle-tags">
+                    <?= Icon::create('star')->asImg(40) ?>
                     <br>
                     <strong><?= _("Schlagworte") ?></strong>
                 </a>
             </li>
             <li>
-                <a href="" onClick="STUDIP.Messages.toggleSetting('settings'); return false;">
+                <a href="" onClick="STUDIP.Messages.toggleSetting('settings'); return false;" aria-expanded="false"
+                   role="button" title="<?= _('Optionen') ?>" aria-controls="settings" id="toggle-settings">
                     <?= Icon::create('admin', 'clickable')->asImg(40) ?>
                     <br>
                     <strong><?= _("Optionen") ?></strong>
diff --git a/resources/assets/javascripts/bootstrap/studip_helper_attributes.js b/resources/assets/javascripts/bootstrap/studip_helper_attributes.js
index c106de3..aea1823 100644
--- a/resources/assets/javascripts/bootstrap/studip_helper_attributes.js
+++ b/resources/assets/javascripts/bootstrap/studip_helper_attributes.js
@@ -276,6 +276,15 @@ $(document).on('click keydown', '[data-toggles]', function (event) {
             $(target).toggle();
         }
 
+        const controls = $(event.currentTarget).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';
+            // Set the aria-expanded status accordingly.
+            elements.attr('aria-expanded', !expanded);
+        }
+
         event.preventDefault();
     }
 });
diff --git a/resources/assets/javascripts/lib/messages.js b/resources/assets/javascripts/lib/messages.js
index 7ce5328..8e27f8f 100644
--- a/resources/assets/javascripts/lib/messages.js
+++ b/resources/assets/javascripts/lib/messages.js
@@ -252,6 +252,8 @@ const Messages = {
         if (jQuery('#' + name).is(':visible')) {
             jQuery('#' + name)[0].scrollIntoView(false);
         }
+        jQuery('#toggle-' + name)
+            .attr('aria-expanded', jQuery('#toggle-' + name).attr('aria-expanded') !== 'true');
     }
 };
 
diff --git a/templates/helpbar/helpbar.php b/templates/helpbar/helpbar.php
index 6f80c4d..cc77053 100644
--- a/templates/helpbar/helpbar.php
+++ b/templates/helpbar/helpbar.php
@@ -1,13 +1,17 @@
 <div class="helpbar-container">
     <?= SkipLinks::addIndex(_('Tipps & Hilfe'), 'helpbar_icon', 920) ?>
-    <a id="helpbar_icon" href="#" class="helpbar-toggler" data-toggles=".helpbar" title="<?= _('Hilfelasche anzeigen/verstecken') ?>">
+    <a id="helpbar_icon" href="#" class="helpbar-toggler" data-toggles=".helpbar" role="button"
+       title="<?= _('Hilfelasche anzeigen/verstecken') ?>" aria-controls="helpbar-content"
+       aria-expanded="<?= $open ? 'true' : 'false' ?>">
         <?= Icon::create('question-circle')->asImg(24, ['alt' => '']) ?>
     </a>
-    <div class="helpbar" <? if (!$open) echo 'style="display: none"'; ?>>
+    <div class="helpbar" id="helpbar-content" <? if (!$open) echo 'style="display: none"'; ?>>
 
         <h2 class="helpbar-title">
             <?= _('Tipps & Hilfe') ?>
-            <a href="#" class="helpbar-toggler" data-toggles=".helpbar" aria-hidden="true" title="<?= _('Hilfelasche verstecken') ?>">
+            <a href="#" class="helpbar-toggler" data-toggles=".helpbar" aria-hidden="true" role="button"
+               title="<?= _('Hilfelasche verstecken') ?>" aria-controls="helpbar-content"
+               aria-expanded="<?= $open ? 'true' : 'false' ?>">
                 <?= Icon::create('decline-circle', Icon::ROLE_INFO_ALT)->asImg(24, ['alt' => '']) ?>
             </a>
         </h2>
-- 
cgit v1.0