Fix toggletip status change visibility for screen readers.

EreMaijala · Feb 12, 2025 · fbf523a · fbf523a
1 parent 911372e
commit fbf523a
Showing 1 changed file with 9 additions and 3 deletions.
diff --git 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>