fixed screen reader output for tooltips

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)
+    ]);
 }
 
 /**

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

templates/shared/tooltip.php

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