Make toggletip contents always visible to screen readers.

EreMaijala · Feb 11, 2025 · ccb6de4 · ccb6de4
1 parent 911372e
commit ccb6de4
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 6 deletions.
diff --git a/themes/finna2/js/finna-layout.js b/themes/finna2/js/finna-layout.js
@@ -334,6 +334,7 @@ finna.layout = (function finnaLayout() {
       if (!tipInnerEl) {
         return;
       }
+      tipInnerEl.innerHTML = message;
 
       const placement = toggletip.dataset.toggletipPlacement || 'bottom';
       const popperInst = Popper.createPopper(
@@ -358,10 +359,8 @@ finna.layout = (function finnaLayout() {
       toggletip.addEventListener('click', () => {
         if (tipEl.classList.contains('show')) {
           tipEl.classList.remove('show');
-          tipInnerEl.innerHTML = '';
         } else {
           window.setTimeout(() => {
-            tipInnerEl.innerHTML = message;
             tipEl.classList.add('show');
             popperInst.update();
           }, 100);
@@ -372,22 +371,19 @@ finna.layout = (function finnaLayout() {
       document.addEventListener('click', (e) => {
         if (toggletip !== e.target) {
           tipEl.classList.remove('show');
-          tipInnerEl.innerHTML = '';
         }
       });
 
       // Remove toggletip on Esc
       toggletip.addEventListener('keydown', (e) => {
         if ((e.keyCode || e.which) === 27) {
           tipEl.classList.remove('show');
-          tipInnerEl.innerHTML = '';
         }
       });
 
       // Remove on blur
       toggletip.addEventListener('blur', () => {
         tipEl.classList.remove('show');
-        tipInnerEl.innerHTML = '';
       });
     });
   }

diff --git a/themes/finna2/scss/components/finna-toggletip.scss b/themes/finna2/scss/components/finna-toggletip.scss
@@ -11,7 +11,7 @@
 
   .finna-toggletip__bubble {
     &:not(.show) {
-      display: none;
+      @extend .visually-hidden;
     }
 
     .finna-toggletip__bubble--inner {