Add skip to content anchor tag (#1243)

GCRC · Sep 24, 2024 · 32cb5d8 · 32cb5d8
1 parent daa76d9
commit 32cb5d8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/nunaliit2-couch-sdk/src/main/content/htdocs/index.html b/nunaliit2-couch-sdk/src/main/content/htdocs/index.html
@@ -19,26 +19,19 @@
 		<link rel="stylesheet" href="css/atlas.css" type="text/css" />
 	</head>
 	<body class="nunaliit_atlas">
+		<a class="skip-to-content" href="#content">Skip to content</a>
 
-		<!--/HEADER SECTION/-->
 		<div class="nunaliit_header">
-
-			<!-- Added second header div to contain Atlas title, menu and login-->
+
 			<div id="header_container" class="nunaliit_header_container">
 				<span class="nunaliit_title"><a id="title" class="nunaliit_title_link" href="index.html"></a></span>
-
-				<!-- Added Main Nav inside header-->
+
 				<div id="navigation" class="nunaliit_header-nav">
 				</div>
 
-				<!-- Moved login inside header-->
-				<!-- Added a new container div - nunaliit_login_container -->
-				<!-- Changed login buttons to new layout (Accommodate liquid header)-->
 				<div id="login1" class="nunaliit_login"></div>
 			</div>
 
-			<!-- Moved Map Title inside header-->
-			<!-- Changed Class to nunaliit_map_title-->
 			<div id="module_title_bar" class="nunaliit_module_title">
 				<div id="language_switcher" class="nunaliit_header_language"></div>
 				<div id="login2" class="nunaliit_login"></div>
@@ -48,8 +41,6 @@
 			</div>
 		</div>
 
-		<!--/CONTENT SECTION/-->
-		<!-- Added New Container Div around body content-->
 		<div id="content" class="nunaliit_content">
 			<noscript>
 				<p>You appear to have disabled Javascript support in your browser. You have to enable Javascript for proper functioning of this site.</p>
@@ -58,8 +49,6 @@
 			</noscript>
 		</div>
 
-		<!--/FOOTER SECTION/-->
-		<!-- Added New Footer Section-->
 		<div class="nunaliit_footer">
 			<span class="nunaliit_footer_content"></span>
 			 <div class="nunaliit_footer_nav">

diff --git a/nunaliit2-js/src/main/js/nunaliit2/css/basic/n2.layout.css b/nunaliit2-js/src/main/js/nunaliit2/css/basic/n2.layout.css
@@ -257,4 +257,25 @@
 	border-bottom: 1px solid lightgrey;
 	padding-top: 4px;
 	outline: none;
+}
+
+.skip-to-content {
+	position: relative;
+	z-index: 100;
+	font-size: xx-large;
+	background-color: #3a3a3a;
+	color: white;
+	padding: 1rem;
+	text-decoration: none;
+	border-radius: 0.5rem;
+	box-shadow: 0px 0px 12px 2px #c5c5c5;
+	top: 6rem;
+	left: -999px;
+	opacity: 0;
+}
+
+.skip-to-content:focus {
+	left: 3rem;
+	text-decoration: none;
+	opacity: 1;
 }