add moving through overview with tab

assets/css/home.css

@@ -977,6 +977,13 @@ a.goDown .icon {
   padding-left: 20px;
   padding-right: 20px;
 }
+.contentBlk {
+  visibility: hidden;
+}
+.swiper-slide-active .contentBlk {
+  visibility: visible;
+}
+
 .eventDetailsBlock .contentBlk {
   display: flex;
   flex-direction: column;

assets/css/main.css

@@ -209,9 +209,6 @@ a {
   cursor: pointer;
   text-decoration: none;
 }
-a:focus {
-  outline: 0 none;
-}
 a.link {
   border-bottom: 1px solid;
   transition: all 0.1s;
@@ -330,7 +327,12 @@ input:focus,
 button:focus,
 [role="button"]:focus {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  outline: none;
+  color: #f36521 !important;
+  border: 1px dotted #f36521 !important;
+}
+.btnDownload:focus,
+.btn:focus {
+	color: #000 !important;
 }
 /*---------------------------- 2. Helper classes ------------------------------*/
 .hide {
@@ -530,11 +532,6 @@ div#wpadminbar:hover div#wp-toolbar {
   display: block;
 }
 
-a:focus {
-  color: #f36521 !important;
-  border: 1px dotted #f36521 !important;
-}
-
 .siteHeader nav li.current-menu-item a {
   color: #000;
 }

assets/js/main.js

@@ -7,6 +7,7 @@ var home_code_swiper = new Swiper('#home_code_swiper', {
 	slideToClickedSlide: true,
 	observer: true, 
 	observeParents: true,
+	clickable: true,
 	navigation: {
 		nextEl: '.swiper-button-next',
 		prevEl: '.swiper-button-prev',
@@ -28,6 +29,16 @@ var home_code_detail_swiper = new Swiper('#home_code_detail_swiper', {
 home_code_detail_swiper.controller.control = home_code_swiper;
 home_code_swiper.controller.control = home_code_detail_swiper;
 
+/* for focus to move to slide when clicking on enter */
+var input = document.getElementById("home_code_swiper");
+
+input.addEventListener("keyup", function(event) {
+  if (event.keyCode === 13) {
+    event.preventDefault();
+    home_code_detail_swiper.slideTo(document.activeElement.getAttribute("target"));
+  }
+}); 
+
 var event_calender_swiper = new Swiper('#event_calender_swiper', {
 			spaceBetween: 0,
 			centeredSlides: true,
@@ -54,5 +65,4 @@ var event_detail_swiper = new Swiper('#event_detail_swiper', {
 });
 
 event_detail_swiper.controller.control = event_calender_swiper;
-event_calender_swiper.controller.control = event_detail_swiper;
-
+event_calender_swiper.controller.control = event_detail_swiper;
\ No newline at end of file

index.html

@@ -30,7 +30,7 @@ title: Frama-C
 
         <section class="section fullScreen codeDemoScreen textCenter">
           <div class="sectionContent">
-            <h3>Overview of a Frama-C analysis for<br>
+            <h3 tabindex="0">Overview of a Frama-C analysis for<br>
             a simple C program</h3>
 
             <div class="slideHeader">
@@ -39,31 +39,31 @@ title: Frama-C
               <div id="home_code_swiper" class="tabSlider swiper-container">
                 <div class="sliderWrapper swiper-wrapper">
                   <div class="swiper-slide">
-                    <div role="button" class="slideTxt" target="tab_0">
+                    <div tabindex="0" role="button" class="slideTxt" target="0">
                       <span>Interface Overview</span>
                     </div>
                   </div>
 
                   <div class="swiper-slide">
-                    <div role="button" class="slideTxt" target="tab_1">
+                    <div tabindex="0" role="button" class="slideTxt" target="1">
                       <span>Value Analysis</span>
                     </div>
                   </div>
 
                   <div class="swiper-slide">
-                    <div role="button" class="slideTxt" target="tab_2">
+                    <div tabindex="0" role="button" class="slideTxt" target="2">
                       <span>Effects Analysis</span>
                     </div>
                   </div>
 
                   <div class="swiper-slide">
-                    <div role="button" class="slideTxt" target="tab_3">
+                    <div tabindex="0" role="button" class="slideTxt" target="3">
                       <span>Dependency Analysis</span>
                     </div>
                   </div>
 
                   <div class="swiper-slide">
-                    <div role="button" class="slideTxt" target="tab_4">
+                    <div tabindex="0" role="button" class="slideTxt" target="4">
                       <span>Impact Analysis</span>
                     </div>
                   </div>
@@ -172,7 +172,7 @@ title: Frama-C
 
         <section id="latest_events" class="section fullScreen calendarScreen" data-title="TIMELINE">
           <div class="sectionContent">
-            <h3>Frama-C Timeline</h3>
+            <h3 tabindex="0">Frama-C Timeline</h3>
 
             <div class="eventScaleBlock">
               <div class="scaleBg">
@@ -216,7 +216,7 @@ title: Frama-C
         <section class="section downloadSection fullScreen verticalFlex" data-title="DOWNLOAD">
           <div class="sectionContent">
             <div class="head">
-              <h3>Get Frama-C</h3>
+              <h3 tabindex="0">Get Frama-C</h3>
 
               <nav>
                 <span class="currentVersion">Latest Version</span><a role="button" href="/html/get-frama-c.html">{{ site.fc-versions.last.name }}</a><a href="/html/framac-versions.html" class="previousVersion">Previous Versions</a>