Revert "Revert "Wins page modal a11y (#1679)" (#1738)" (#1747)

This reverts commit c492445.
hackforla · Jun 16, 2021 · aedbca2 · aedbca2
1 parent ca01dbf
commit aedbca2
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 11 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,7 +3,7 @@
 {% include head.html %}
 <body>  
   <div id="app">
-    <a id="skip-link" className="sr-only-focusable" href="#content">
+    <a id="skip-link" class="sr-only-focusable" href="#content">
       <!-- PLEASE DO NOT REMOVE, THIS A TAG EXISTS FOR ACCESIBILITY REASONS -->
       Skip to main content.
     </a>

diff --git a/assets/js/inert.min.js b/assets/js/inert.min.js
diff --git a/pages/wins/wins-card-template.html b/pages/wins/wins-card-template.html
@@ -22,11 +22,12 @@
         <div class="project-inner wins-see-more-div">
           <span
             id="0"
+            role="button"
             onclick="seeMore(id)"
-            expandable
+            onkeypress="seeMore(id)"
             class="see-more-div"
-            >...see more</span
-          >
+            tabindex="0"
+            >...see more</span>
         </div>
       </div>
     </div>

diff --git a/pages/wins/wins.html b/pages/wins/wins.html
@@ -18,8 +18,13 @@
 	</div>
 </section>
 
+
+<script src="/assets/js/inert.min.js"></script>
+
 <script>
 
+
+
   //assigning the google form questions to variables for readability
   //these variables correspond with a question on the google form
   //these variables can be used as a key to access the data
@@ -385,7 +390,39 @@
 		let iconImg = makeElement('img', icon, className);
 		iconImg.setAttribute("src", src);
 	}
+
   function updateOverlay(i) {
+
+	window.addEventListener('keydown', (e) => {
+		  if (e.key == 'Escape') {
+			  hideOverlay(e.key)
+		  }
+	  });
+
+	  document.querySelector(".main-header").inert = true;
+	  document.querySelector(".content-section.projects").inert = true;
+	  document.querySelector(".main-footer").inert = true;
+	  document.querySelector(".home-getting-started-container.content-section.section-hack-nights.wins-hero").inert = true;
+	  document.querySelector(".sr-only-focusable").inert = true;
+
+	  window.addEventListener('resize', (e) => {
+		  widthOutput = window.innerWidth;
+		  if (widthOutput < 960) {
+			  document.querySelector(".main-header").inert = false;
+			  document.querySelector(".content-section.projects").inert = false;
+			  document.querySelector(".main-footer").inert = false;
+			  document.querySelector(".home-getting-started-container.content-section.section-hack-nights.wins-hero").inert = false;
+			  document.querySelector(".sr-only-focusable").inert = false;
+		  }
+		  else {
+			  document.querySelector(".main-header").inert = true;
+			  document.querySelector(".content-section.projects").inert = true;
+			  document.querySelector(".main-footer").inert = true;
+			  document.querySelector(".home-getting-started-container.content-section.section-hack-nights.wins-hero").inert = true;
+			  document.querySelector(".sr-only-focusable").inert = true;
+		  }
+	  });
+
   		let stringData = window.localStorage.getItem("data");
   		let data = JSON.parse(stringData).reverse();
 
@@ -419,14 +456,23 @@
   		const overlayProjectCard = document.querySelector('#overlay-project-card');
   		overlayProjectCard.parentNode.classList.add("display-initial");
   	}
-  function hideOverlay(e) {
-  	e = e || window.event;
-  	if (e.target !== e.currentTarget)
-  		return;
 
-  	const overlayProjectCard = document.querySelector('#overlay-project-card');
-  	overlayProjectCard.parentNode.classList.remove("display-initial");
-  }
+
+	function hideOverlay(e) {
+		e = e || window.event || e.key == 'Escape';
+
+		if (e.target !== e.currentTarget)
+			return;
+
+		const overlayProjectCard = document.querySelector('#overlay-project-card');
+		overlayProjectCard.parentNode.classList.remove("display-initial");
+
+		document.querySelector(".main-header").inert = false;
+		document.querySelector(".content-section.projects").inert = false;
+		document.querySelector(".main-footer").inert = false;
+		document.querySelector(".home-getting-started-container.content-section.section-hack-nights.wins-hero").inert = false;
+		document.querySelector(".sr-only-focusable").inert = false;
+	}
 
   main();