Fix: add keyboard accessibility to popup close icons

Author: DhyaniKavya

index.html

@@ -198,13 +198,17 @@
                 <div class="popupMsg" id="printText" tabindex="-1">
                     <div class="contentWrapper">
                         <span id="printTextContent"></span>
-                        <img class="msgCloseIcon" onclick="hidePrintText()" src="images/close.svg" alt="Close">
+                        <img class="msgCloseIcon" role="button" tabindex="0" onclick="hidePrintText()"
+                            onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();hidePrintText();}"
+                            src="images/close.svg" alt="Close">
                     </div>
                 </div>
                 <div class="popupMsg" id="errorText" tabindex="-1">
                     <div class="contentWrapper">
                         <span id="errorTextContent"></span>
-                        <img class="msgCloseIcon" onclick="hideErrorText()" src="images/close.svg" alt="Close">
+                        <img class="msgCloseIcon" role="button" tabindex="0" onclick="hideErrorText()"
+                            onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();hideErrorText();}"
+                            src="images/close.svg" alt="Close">
                     </div>
                 </div>
 
@@ -709,16 +713,16 @@
 
             const languageDropdown = document.getElementById("languagedropdown");
             if (languageDropdown) {
-            const langLinks = languageDropdown.querySelectorAll("a");
-            langLinks.forEach(link => {
-            link.addEventListener("click", function (e) {
-                e.preventDefault(); // prevent default <a> behavior
-                const selectedLang = this.id; // ID corresponds to language code
-                localStorage.setItem("languagePreference", selectedLang);
-                location.reload(); // automatically reload
-            });
-        });
-    }
+                const langLinks = languageDropdown.querySelectorAll("a");
+                langLinks.forEach(link => {
+                    link.addEventListener("click", function (e) {
+                        e.preventDefault(); // prevent default <a> behavior
+                        const selectedLang = this.id; // ID corresponds to language code
+                        localStorage.setItem("languagePreference", selectedLang);
+                        location.reload(); // automatically reload
+                    });
+                });
+            }
         });
 
     </script>
@@ -946,38 +950,38 @@
             window.addEventListener("resize", togglePlayOnlyMode);
         });
 
-    (function () {
-        function setAppHeight() {
-            const vh = window.innerHeight * 0.01;
-            document.documentElement.style.setProperty('--vh', `${vh}px`);
-        }
-
-        window.addEventListener('resize', setAppHeight);
-        document.addEventListener('fullscreenchange', setAppHeight);
-        setAppHeight();
-    })();
-
-(function () {
-  function resizeCanvasesToScreen() {
-    const canvases = document.querySelectorAll("canvas");
-    const width = window.innerWidth;
-    const height = window.innerHeight;
+        (function () {
+            function setAppHeight() {
+                const vh = window.innerHeight * 0.01;
+                document.documentElement.style.setProperty('--vh', `${vh}px`);
+            }
 
-    canvases.forEach(c => {
-      c.width = width;
-      c.height = height;
-      c.style.width = "100%";
-      c.style.height = "100%";
-    });
-  }
+            window.addEventListener('resize', setAppHeight);
+            document.addEventListener('fullscreenchange', setAppHeight);
+            setAppHeight();
+        })();
+
+        (function () {
+            function resizeCanvasesToScreen() {
+                const canvases = document.querySelectorAll("canvas");
+                const width = window.innerWidth;
+                const height = window.innerHeight;
+
+                canvases.forEach(c => {
+                    c.width = width;
+                    c.height = height;
+                    c.style.width = "100%";
+                    c.style.height = "100%";
+                });
+            }
 
-  window.addEventListener("resize", resizeCanvasesToScreen);
-  document.addEventListener("fullscreenchange", resizeCanvasesToScreen);
+            window.addEventListener("resize", resizeCanvasesToScreen);
+            document.addEventListener("fullscreenchange", resizeCanvasesToScreen);
 
-  setTimeout(resizeCanvasesToScreen, 150);
-})();
+            setTimeout(resizeCanvasesToScreen, 150);
+        })();
 
-</script>
+    </script>
 
 
 </body>