Merge pull request #1033 from nwanduka/patch-14

Added skip-to-content link
camicroscope · Oct 11, 2024 · 7cecbd8 · 7cecbd8
2 parents b0d5db7 + f4eb593
commit 7cecbd8
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 7 deletions.
diff --git a/apps/Info.html b/apps/Info.html
@@ -38,10 +38,28 @@
 	<link rel="stylesheet" href="./table.css" />
   <link rel="stylesheet" href="./info.css" />
 	<link rel="shortcut icon" type="image/x-icon" href="/apps/landing/favicon.png">
-	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+<style>
+    .skip-to-content {
+        position: absolute;
+        top: -40px;
+        left: 0;
+        background: #212529;
+        color: white;
+        padding: 8px;
+        z-index: 100;
+        transition: top 0.3s;
+    }
+    .skip-to-content:focus {
+        top: 0;
+    }
+</style>
+
 </head>
 
 <body>
+	<a href="#main-content" class="skip-to-content">Skip to main content</a>
 	<div class="page-container">
 	<div>
 		<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
@@ -71,6 +89,7 @@
 			</div>
 		</nav>
 
+	<main id="main-content">	
 	<div class="header text-center text-white bg-dark p-4">
 		<h1 class="h1">caMicroscope</h1>
 		<p style="font-weight: bold; font-size: 14pt;">Digital pathology image viewer with support for human/machine generated annotations and markups.</p>
@@ -153,7 +172,7 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 	</div>
 </div>
 </div>
-
+</main>
 
 <!-- footer -->
 <footer id="footer-layout"></footer>

diff --git a/apps/dev-workbench/workbench.html b/apps/dev-workbench/workbench.html
@@ -60,8 +60,25 @@
     <script src="../../common/jszip.min.js"></script>
     <script src="../../common/FileSaver.min.js"></script>
     <script src="../../common/localforage.min.js"></script>
+
+    <style>
+    .skip-to-content {
+        position: absolute;
+        top: -40px;
+        left: 0;
+        background: #212529;
+        color: white;
+        padding: 8px;
+        z-index: 100;
+        transition: top 0.3s;
+    }
+    .skip-to-content:focus {
+        top: 0;
+    }
+    </style>
   </head>
   <body>
+    <a href="#main-content" class="skip-to-content">Skip to main content</a>
     <!--Navbar-->
     <nav
       class="navbar navbar-expand-lg navbar-dark flex-row px-2"
@@ -134,6 +151,7 @@
     </nav>
     <!--/.Navbar-->
 
+    <main id="main-content">
     <div id="headbar">
       <br />
       <div id="headContent" style="font-size: xx-large;">
@@ -515,5 +533,7 @@ <h5 class="modal-title" id="helpModalTitle">Help - User Guide</h5>
     <script>
       feather.replace(); // for feather Icons
     </script>
+
+    </main>
   </body>
 </html>
diff --git a/apps/landing/landing.html b/apps/landing/landing.html
@@ -12,10 +12,29 @@
     <!-- common styling -->
 	<link rel='stylesheet' type='text/css' media='all' href='../common.css'/>
     <link rel="shortcut icon" type="image/x-icon" href="favicon.png">
+    <style>
+        .skip-link {
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #212529;
+            color: white;
+            padding: 8px;
+            z-index: 9999;
+            text-decoration: none;
+            opacity: 0;
+            pointer-events: none;
+        }
+        .skip-link:focus {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    </style>
 
 </head>
 <body>
-
+<a class="skip-link" href="#main-content">Skip to main content</a>  
 <!-- loading animation -->
 <div class="main-site">
     <!-- adding css -->
@@ -57,8 +76,8 @@
 
 
 <!-- Main -->
-
-<section id="main" class="wrapper">
+<main id="main-content">
+  <section id="main" class="wrapper">
 
     <div class="inner">
 
@@ -93,8 +112,8 @@ <h2>Documentation</h2>
                 </div>
             </section>
         </div>
-</section>
-
+  </section>
+</main>
 
 
 <!-- Footer -->

diff --git a/apps/table.html b/apps/table.html
@@ -40,9 +40,26 @@
 <script src='../common/stacktable.js'></script>
 	<link rel="stylesheet" href="./table.css" />
 	<link rel="shortcut icon" type="image/x-icon" href="/apps/landing/favicon.png">
+
+<style>
+    .skip-to-content {
+        position: absolute;
+        top: -40px;
+        left: 0;
+        background: #212529;
+        color: white;
+        padding: 8px;
+        z-index: 100;
+        transition: top 0.3s;
+    }
+    .skip-to-content:focus {
+        top: 0;
+    }
+</style>	
 </head>
 
 <body>
+	<a href="#main-content" class="skip-to-content">Skip to main content</a>
 	<div class="page-container">
 	<div>
 	<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
@@ -74,6 +91,8 @@
 				</div>
 		</div>
 	</nav>
+
+	<main id="main-content">	
 	<div class="header text-center text-white bg-dark p-4">
 		<h1 class="h1">caMicroscope</h1>
 		<p style="font-weight: bold; font-size: 14pt;">Digital pathology image viewer with support for human/machine generated annotations and markups. View, Edit, and Manage Your Slides Here.</p>
@@ -327,6 +346,7 @@ <h5 class="modal-title" id="slideNameChangeModalLabel">Slide name change confirm
 </div>
 
 </div>
+</main>
 
 <!-- footer -->
 <footer id="footer-layout"></footer>