diff --git a/app/views/messages/write.php b/app/views/messages/write.php index 41176280c8bb1b852c0122b2fbeacda985191666..3ddc4231756d67767976ec4cf4054a125e2a678c 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 c106de3dcd7ac10b6963e61786b630e2f2f04476..aea1823eb8fc4a35185533e49c2c4efced2f4e5a 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 7ce5328b25407553d8fd472b0af4c001df8ab0db..8e27f8f3f9a5e202e55c40a2aedcc2b28d5d3096 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 6f80c4d9e9698681187121523ba8141c59937cbb..cc77053c8bd1428417853a36b3bef3d993e0f9a2 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>