Merge pull request #323 from ScilifelabDataCentre/accessibility

Homepage accessibility fixes
ScilifelabDataCentre · Jul 9, 2024 · 23e50a2 · 23e50a2
2 parents ccdcb19 + 70190eb
commit 23e50a2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/layouts/index.html b/layouts/index.html
@@ -188,13 +188,18 @@ <h3>Apps recently deployed on SciLifeLab Serve</h3>
 
   document.addEventListener("DOMContentLoaded", function (event) {
     // Takes a URL and calls the callback function pass the data fetched
-    function getDataFromUrl(url, callback) {
+    function getDataFromUrl(url, callback, loadend=false) {
       var req = new XMLHttpRequest();
       req.overrideMimeType("application/json");
       req.open("GET", url, true);
       req.onload = function () {
         callback(JSON.parse(req.responseText));
       };
+      if (loadend){
+        req.onloadend = function () {
+          loadend();
+        };
+      };
       req.send(null);
     }
 
@@ -322,8 +327,10 @@ <h4 class="mb-1">Upcoming Events</h4>
         if (data.description.length > 140) {
           var descriptionDiv = `
                 <div id="app${data.id}" class="small collapse">${data.description}</div>
-                <button type="button" class="collapsed" data-bs-toggle="collapse" aria-expanded="false" 
-                   data-bs-target="#app${data.id}" aria-controls="app${data.id}"></button>`;
+                <button type="button" class="collapsed serve-app-description" data-bs-toggle="collapse"
+                  data-bs-target="#app${data.id}" aria-expanded="false" aria-controls="app${data.id}">
+                    + more description
+                  </button>`;
         } else {
           var descriptionDiv = `<div class="small">${data.description}</div>`;
         };
@@ -349,9 +356,21 @@ <h4 class="mb-1">Upcoming Events</h4>
       };
     };
 
+    // Change button text for serve app description
+    function enableServeTextChange (){
+      $("button.serve-app-description").on("click", function(){
+        if ($(this).attr("aria-expanded") == "true"){
+          $(this).text("- less description");
+        } else {
+          $(this).text("+ more description");
+        };
+      });
+    };
+
     getDataFromUrl(
       decodeURIComponent("https%3A%2F%2Fserve.scilifelab.se%2Fopenapi%2Fv1%2Fpublic-apps"),
-      addServeApps
+      addServeApps,
+      enableServeTextChange
     );
 
     // Add latest tag to very recent news

diff --git a/static/css/styles.css b/static/css/styles.css
@@ -209,7 +209,7 @@ h5 a:hover {
 }
 
 .bg-resource-and-service-title {
-  background-color: #43858B;
+  background-color: #045c64;
 }
 
 .bg-resource-and-service-title a {
@@ -311,14 +311,6 @@ h5 a:hover {
   color: #045c64;
 }
 
-.app-description button.collapsed:after {
-  content: "+ more description";
-}
-
-.app-description button:not(.collapsed):after {
-  content: "- less description";
-}
-
 /* Support block for the homepage */
 .support {
   background-color: #491f53 !important;