From 8c8a27170b4607922b72154ec6173d2a8eaae5c1 Mon Sep 17 00:00:00 2001
From: Moritz Strohm <strohm@data-quest.de>
Date: Fri, 12 Apr 2024 16:10:16 +0200
Subject: [PATCH] fixed screen reader output for tooltips
---
lib/visual.inc.php | 15 ++++++++++++---
resources/assets/javascripts/bootstrap/tooltip.js | 1 -
templates/shared/tooltip.php | 11 +++++++----
3 files changed, 19 insertions(+), 8 deletions(-)
diff --git a/lib/visual.inc.php b/lib/visual.inc.php
index 86efbfb31e5..93a892aa165 100644
--- a/lib/visual.inc.php
+++ b/lib/visual.inc.php
@@ -596,7 +596,12 @@ function tooltipIcon($text, $important = false, $html = false): string
// render tooltip
$template = $GLOBALS['template_factory']->open('shared/tooltip');
- return $template->render(compact('text', 'important', 'html'));
+ return $template->render([
+ 'text' => $text,
+ 'important' => $important,
+ 'html' => $html,
+ 'tooltip_id' => md5($text) . random_bytes(4)
+ ]);
}
/**
@@ -608,9 +613,13 @@ function tooltipIcon($text, $important = false, $html = false): string
function tooltipHtmlIcon($text, $important = false)
{
// render tooltip
- $html = true;
$template = $GLOBALS['template_factory']->open('shared/tooltip');
- return $template->render(compact('text', 'important', 'html'));
+ return $template->render([
+ 'text' => $text,
+ 'important' => $important,
+ 'html' => true,
+ 'tooltip_id' => md5($text) . random_bytes(4)
+ ]);
}
/**
diff --git a/resources/assets/javascripts/bootstrap/tooltip.js b/resources/assets/javascripts/bootstrap/tooltip.js
index c84042b8253..034fcf9a9d3 100644
--- a/resources/assets/javascripts/bootstrap/tooltip.js
+++ b/resources/assets/javascripts/bootstrap/tooltip.js
@@ -41,7 +41,6 @@ $(document).on('mouseenter mouseleave focusin focusout', '[data-tooltip],.toolti
tooltip = new STUDIP.Tooltip(x, y, content);
data.tooltipObject = tooltip;
- $(this).attr('aria-describedby', tooltip.id);
$(this).on('remove', function() {
tooltip.remove();
diff --git a/templates/shared/tooltip.php b/templates/shared/tooltip.php
index a97c73f2759..d1ebafaf95a 100644
--- a/templates/shared/tooltip.php
+++ b/templates/shared/tooltip.php
@@ -1,5 +1,8 @@
-<span class="tooltip tooltip-icon <? if ($important) echo 'tooltip-important'; ?>" data-tooltip <? if (!$html) printf('title="%s"', htmlReady($text)) ?> tabindex="0">
-<? if ($html): ?>
- <span class="tooltip-content"><?= $text ?></span>
-<? endif; ?>
+<span class="tooltip tooltip-icon <? if ($important) echo 'tooltip-important'; ?>"
+ data-tooltip <? if (!$html) printf('title="%s"', htmlReady($text)) ?>
+ tabindex="0" aria-describedby="tooltip_<?= htmlReady($tooltip_id) ?>">
+ <? if ($html): ?>
+ <span class="tooltip-content"><?= $text ?></span>
+ <? endif; ?>
</span>
+<span id="tooltip_<?= htmlReady($tooltip_id) ?>" class="sr-only"><?= htmlReady($text) ?></span>
--
GitLab