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: [PATCH] =?UTF-8?q?Resolve=20"Barrierefreiheit:=20Auf-=20und=20Zuk?=
=?UTF-8?q?lappverhalten=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 +++++++++-----
.../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 41176280c8b..3ddc4231756 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 c106de3dcd7..aea1823eb8f 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 7ce5328b254..8e27f8f3f9a 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 6f80c4d9e96..cc77053c8bd 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>
--
GitLab