From fbf523aeee41cfd13d2d7f7c27aaa6abf3ecc1d1 Mon Sep 17 00:00:00 2001
From: Ere Maijala <ere.maijala@helsinki.fi>
Date: Wed, 12 Feb 2025 10:43:42 +0200
Subject: [PATCH] Fix toggletip status change visibility for screen readers.

---
 .../templates/_ui/components/finna-toggletip.phtml   | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/themes/finna2/templates/_ui/components/finna-toggletip.phtml b/themes/finna2/templates/_ui/components/finna-toggletip.phtml
index d83084891c3..02b11bc51ec 100644
--- a/themes/finna2/templates/_ui/components/finna-toggletip.phtml
+++ b/themes/finna2/templates/_ui/components/finna-toggletip.phtml
@@ -19,8 +19,14 @@
     <?php if (!empty($icon)): ?><?=$this->icon($icon, 'finna-toggletip__icon')?><?php endif; ?>
     <?= $label ?? '' ?>
   </button>
-  <span role="status" class="tooltip bs-tooltip-auto finna-toggletip__bubble js-status">
-    <span class="tooltip-arrow finna-toggletip__arrow" data-popper-arrow></span>
-    <span class="tooltip-inner finna-toggletip__bubble--inner js-status-inner"></span>
+  <?php
+    // Note: role="status" needs to be on the outer element that is never hidden for screen readers to note the change
+    // in its contents.
+  ?>
+  <span role="status">
+    <span class="tooltip bs-tooltip-auto finna-toggletip__bubble js-status">
+      <span class="tooltip-arrow finna-toggletip__arrow" data-popper-arrow></span>
+      <span class="tooltip-inner finna-toggletip__bubble--inner js-status-inner"></span>
+    </span>
   </span>
 </span>