Resolve "article.studip und fieldsets kennzeichnen nicht ihren...

Resolve "article.studip und fieldsets kennzeichnen nicht ihren auf-/zugeklappten Zustand für Screenreader mit aria-expanded"

Closes #4040

Merge request studip/studip!2914

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): ?>

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

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

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

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

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