Resolve "Barrierefreiheit: Auf- und Zuklappverhalten für Screenreader kennzeichnen"

Closes #3960

Merge request studip/studip!2854

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>

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();
     }
 });

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');
     }
 };
 

templates/helpbar/helpbar.php

 <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>