DIT-439: Hints.

- Added tabbing to tooltips and shows content of tooltip if tabbed to.
matematikk-mooc · Dec 10, 2024 · b0be103 · b0be103
1 parent 7cbadbc
commit b0be103
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/js/modules/tooltip.js b/src/js/modules/tooltip.js
@@ -20,7 +20,7 @@ export default (function() {
                         var tooltipSpan = document.createElement("span");
                         tooltipSpan.classList.add("tooltip");
                         tooltipSpan.id = "tooltip-" + count;
-
+                        
                         var textSpan = document.createElement("span");
                         textSpan.classList.add("tooltiptext-box");
                         textSpan.id = "tooltiptext-box-" + count;
@@ -46,14 +46,13 @@ export default (function() {
                         tooltipSpan.appendChild(underLineSpan);
                         tooltipSpan.appendChild(questionMarkSpan);
                         tooltipSpan.appendChild(textSpan);
-
-
                         el.innerHTML = el.innerHTML.replace(matches[0], tooltipSpan.outerHTML);
                         matches = re.exec(el.innerHTML);
                         count++;
                     }
                     for (var j = 0; j < count; j++) {
                         var tooltip = document.getElementById("tooltip-" + j);
+                        tooltip.tabIndex = 1;
                         tooltip.addEventListener("click", function (e) {
                             e.stopPropagation();
                             var tooltipText = this.querySelector(".tooltiptext-box");

diff --git a/src/vue/design/re-styles/tooltip.scss b/src/vue/design/re-styles/tooltip.scss
@@ -5,6 +5,12 @@
     display: inline-flex;
 }
 
+.tooltip:focus-visible {
+    outline: 3px solid dimgray;
+    .tooltiptext-box {
+        display: inline !important;
+    }
+}
 
 .tooltip-underline {
     border-bottom: 0.5px dashed #00468E;