Merge pull request #2395 from bishabosha/no-js-tab-alt-details

JS not required to operate tabs or alt-details

Author: bishabosha

_includes/alt-details.html

@@ -1,5 +1,6 @@
-<div {% if include.id %} id="{{include.id}}" {% endif %} class="alt-details">
-  <button class="alt-details-toggle">{{include.title}}</button>
+<div id="{{include.id}}" class="alt-details">
+  <input class="alt-details-control" type="checkbox" id="{{include.id}}__control" hidden aria-hidden="true">
+  <label class="alt-details-toggle" for="{{include.id}}__control">{{include.title}}</label>
   <div class="alt-details-detail">
     {{include.detail}}
   </div>

_includes/tabsection.html

@@ -1,19 +1,32 @@
-<div {% if include.id %} id="{{include.id}}" {% endif %} class="tabsection">
-  <ul class="nav-tab">
+<div id="{{include.id}}" class="tabsection">
+  {% for tabRoot in include.collection %}
+  {% if tabRoot.language == include.language %}
+  <input
+    type="radio"
+    name="{{include.id}}_tabs"
+    id="{{tabRoot.tabId}}_description"
+    data-target="{{tabRoot.tabId}}"
+    hidden aria-hidden="true"
+    {% if tabRoot.defaultTab %}checked{% endif %}
+  >
+  {% endif %}
+  {% endfor %}
+  <ul hidden aria-hidden="true" class="nav-tab">
     {% for tabRoot in include.collection %}
     {% if tabRoot.language == include.language %}
     <li class="item-tab">
-      <a class="item-tab-link {% if tabRoot.defaultTab %} active{% endif %}"
-        data-target="{{tabRoot.tabId}}">{{tabRoot.tabLabel}}</a>
+      <label class="item-tab-link" for="{{tabRoot.tabId}}_description">{{tabRoot.tabLabel}}</label>
     </li>
     {% endif %}
     {% endfor %}
   </ul>
-  {% for tabRoot in include.collection %}
-  {% if tabRoot.language == include.language %}
-  <div class="tabcontent {% if tabRoot.defaultTab %}active{% endif %}" data-tab="{{tabRoot.tabId}}">
-    {{tabRoot.content}}
+  <div class="tabcontent">
+    {% for tabRoot in include.collection %}
+    {% if tabRoot.language == include.language %}
+    <section id="{{tabRoot.tabId}}_content">
+      {{tabRoot.content}}
+    </section>
+    {% endif %}
+    {% endfor %}
   </div>
-  {% endif %}
-  {% endfor %}
 </div>

_install_tabs/1-macos.html

@@ -13,6 +13,7 @@
     </div>
     {% endcapture %}
     {% include alt-details.html
+      id='cs-setup-macos-nobrew'
       title="Alternatively, if you don't use Homebrew:"
       detail=homebrewDetail
     %}

_install_tabs/4-other.html

@@ -1,13 +1,13 @@
 ---
 tabId: other
 tabLabel: Other
-fallbackNoJS: true
+defaultTab: true
 language: en
 ---
 <div class="wrap-inline">
   <div class="wrap">
     <noscript>
-      <p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
+      <p><span style="font-style:italic;">JavaScript is disabled, click the tab relevant for your OS.</span></p>
     </noscript>
     <p>Follow the documentation from Coursier on <a href="https://get-coursier.io/docs/cli-installation"
         target="_blank">how to install and run <code>cs setup</code></a>.</p>

_install_tabs/fr-1-macos.html

@@ -12,6 +12,7 @@
     </div>
     {% endcapture %}
     {% include alt-details.html
+      id='cs-setup-macos-nobrew'
       title="Alternativement, si vous n'utilisez pas Homebrew:"
       detail=homebrewDetail
     %}

_install_tabs/fr-4-other.html

@@ -1,13 +1,13 @@
 ---
 tabId: other
 tabLabel: Other
-fallbackNoJS: true
+defaultTab: true
 language: fr
 ---
 <div class="wrap-inline">
   <div class="wrap">
     <noscript>
-      <p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
+      <p><span style="font-style:italic;">JavaScript est désacivé. Cliquez sur l'onglet correspondant à votre système d'exploitation.</span></p>
     </noscript>
     <p>Suivez <a href="https://get-coursier.io/docs/cli-installation" target="_blank">les instructions pour installer la commande
       <code>cs</code></a>puis exécutez <code>./cs setup</code>.</p>

_install_tabs/ja-1-macos.html

@@ -12,6 +12,7 @@
     </div>
     {% endcapture %}
     {% include alt-details.html
+      id='cs-setup-macos-nobrew'
       title="または、Homebrewを使用しない場合は"
       detail=homebrewDetail
     %}

_install_tabs/ja-4-other.html

@@ -1,13 +1,13 @@
 ---
 tabId: other
 tabLabel: Other
-fallbackNoJS: true
+defaultTab: true
 language: ja
 ---
 <div class="wrap-inline">
   <div class="wrap">
     <noscript>
-      <p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
+      <p><span style="font-style:italic;">JavaScript is disabled, click the tab relevant for your OS.</span></p>
     </noscript>
     <p><a href="https://get-coursier.io/docs/cli-installation" target="_blank">手順に従って <code>cs</code> ランチャーをインストール</a>し、その次に以下を実行します。<code>./cs setup</code></p>
   </div>

_sass/components/alt-details.scss

@@ -7,6 +7,9 @@
 
     .alt-details-toggle {
         @include span-columns(12);
+        font-family: $base-font-family;
+        line-height: normal;
+        text-align: center;
         border: none;
         background-color: $brand-tertiary;
         padding: 5px 10px;
@@ -21,23 +24,40 @@
         }
 
         &:after {
-            content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
+            // show a right arrow at the end of the toggle element
+            content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
             font-family: "Font Awesome 5 Free";
             font-weight: 900;
             font-size: 15px;
             float: right;
             margin-top: 2px;
         }
 
-        &.alt-details-closed:after {
-            content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
-        }
+    }
+
+    .alt-details-control+.alt-details-toggle+.alt-details-detail {
+        // by default, hide the details
+        position: absolute;
+        top: -999em;
+        left: -999em;
+    }
+
+    .alt-details-control:checked+.alt-details-toggle+.alt-details-detail {
+        // show the details when the control is checked
+        position: static;
+    }
+
+    .alt-details-control:checked+.alt-details-toggle:after {
+        // change the marker on the toggle label to a down arrow
+        content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
     }
 
     .alt-details-detail {
         // The detail box appears to be underneath the toggle button
         // so we add a padding to the top and push it up.
-        border: $base-border-gray;
+        border-bottom: $base-border-gray;
+        border-left: $base-border-gray;
+        border-right: $base-border-gray;
         padding-top: 15px;
         margin-top: 15px;
     }

_sass/components/tab.scss

@@ -2,6 +2,8 @@
 //------------------------------------------------
 //------------------------------------------------
 
+// dynamic tab switching based on https: //levelup.gitconnected.com/tabbed-interfaces-without-javascript-661bab1eaec8
+
 .nav-tab {
     border-bottom: $base-border-gray;
     @include display(flex);
@@ -10,6 +12,7 @@
 
     .item-tab {
 
+        label,
         a {
             transition: none; // do not animate the transition to active
             color: $base-font-color-light;
@@ -27,13 +30,15 @@
             &:hover {
                 cursor: pointer;
             }
+        }
 
-            &.active {
-                border-bottom: 2px solid $brand-primary;
-                padding: 0 20px 8px; // so text does not jump up when active
-                color: $brand-primary;
-                pointer-events: none;
-            }
+        label {
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
         }
 
     }
@@ -42,6 +47,7 @@
         @include justify-content(space-between);
 
         .item-tab {
+            label,
             a {
                 transition: none; // do not animate the transition to active
                 padding: 0 10px 10px;
@@ -51,6 +57,22 @@
     }
 }
 
+.nav-tab>.item-tab>a.active, // used in the blog
+.tabsection>input:nth-child(1):checked~.nav-tab .item-tab:nth-child(1) label,
+.tabsection>input:nth-child(2):checked~.nav-tab .item-tab:nth-child(2) label,
+.tabsection>input:nth-child(3):checked~.nav-tab .item-tab:nth-child(3) label,
+.tabsection>input:nth-child(4):checked~.nav-tab .item-tab:nth-child(4) label,
+.tabsection>input:nth-child(5):checked~.nav-tab .item-tab:nth-child(5) label,
+.tabsection>input:nth-child(6):checked~.nav-tab .item-tab:nth-child(6) label,
+.tabsection>input:nth-child(7):checked~.nav-tab .item-tab:nth-child(7) label,
+.tabsection>input:nth-child(8):checked~.nav-tab .item-tab:nth-child(8) label,
+.tabsection>input:nth-child(9):checked~.nav-tab .item-tab:nth-child(9) label {
+    border-bottom: 2px solid $brand-primary;
+    padding: 0 20px 8px; // so text does not jump up when active
+    color: $brand-primary;
+    pointer-events: none;
+}
+
 .tabsection {
     border-bottom: $base-border-gray;
     border-left: $base-border-gray;
@@ -67,12 +89,30 @@
             list-style: none;
         }
     }
-}
 
-.tabcontent {
-    display: none;
+    input { // hide the input because they are not interactive
+        display: block; /* "enable" hidden elements in IE/edge */
+        position: absolute; /* then hide them off-screen */
+        left: -100%;
+    }
 
-    &.active {
-        display: block;
+    .tabcontent {
+        section { // by default, hide all sections until the user clicks on the associated label
+            position: absolute;
+            top: -999em;
+            left: -999em;
+        }
     }
 }
+
+.tabsection>input:nth-child(1):checked~.tabcontent section:nth-child(1),
+.tabsection>input:nth-child(2):checked~.tabcontent section:nth-child(2),
+.tabsection>input:nth-child(3):checked~.tabcontent section:nth-child(3),
+.tabsection>input:nth-child(4):checked~.tabcontent section:nth-child(4),
+.tabsection>input:nth-child(5):checked~.tabcontent section:nth-child(5),
+.tabsection>input:nth-child(6):checked~.tabcontent section:nth-child(6),
+.tabsection>input:nth-child(7):checked~.tabcontent section:nth-child(7),
+.tabsection>input:nth-child(8):checked~.tabcontent section:nth-child(8),
+.tabsection>input:nth-child(9):checked~.tabcontent section:nth-child(9) {
+    position: static;
+}

_sass/layout/inner-main.scss

@@ -2,16 +2,16 @@
 //------------------------------------------------
 //------------------------------------------------
 
+#inner-main>section:nth-child(2) {
+  // corresponds to area with the content below the title
+  position: relative;
+  margin-top: -80px; // have it overlap with the title area
+}
+
 #inner-main {
   background: $gray-lighter;
   padding-bottom: $padding-xlarge;
 
-
-  section:nth-child(2) {
-    position: relative;
-    top: -80px;
-  }
-
   .inner-box {
     padding: $padding-medium;
     background: #fff;

resources/js/functions.js

@@ -392,21 +392,6 @@ function getOS() {
   return osname;
 }
 
-$(document).ready(function () {
-  // for each .alt-details div, find the .alt-details-toggle button,
-  // and add a click handler to toggle the visibility of the .alt-details-detail
-
-  $('.alt-details').each(function () {
-    var toggle = $(this).find('.alt-details-toggle');
-    var details = $(this).find('.alt-details-detail');
-    toggle.click(function () {
-      details.css('display') === 'none' ? details.show() : details.hide();
-      toggle.toggleClass('alt-details-closed');
-    });
-    toggle.click();
-  });
-});
-
 $(document).ready(function () {
   // for each code snippet area, find the copy button,
   // and add a click listener that will copy text from
@@ -420,42 +405,14 @@ $(document).ready(function () {
   });
 });
 
-$(document).ready(function () {
-  $('.tabsection').each(function () {
-    var tabsection = this;
-    $(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function () {
-      var tabLink = this;
-      var targetTab = $(tabLink).attr('data-target');
-      $(tabLink).click(function () {
-        console.log("clicked on " + targetTab);
-        $(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function () {
-          var otherTab = this;
-          var otherTarget = $(otherTab).attr('data-target');
-          otherTarget === targetTab ? $(otherTab).addClass('active') : $(otherTab).removeClass('active');
-        })
-        $(tabsection).children('.tabcontent').each(function () {
-          var tabContent = this;
-          var tabId = $(tabContent).attr('data-tab');
-          targetTab === tabId ? $(tabContent).addClass('active') : $(tabContent).removeClass('active');
-        });
-      });
-    });
-  });
-});
-
 $(document).ready(function () {
   // click the get-started tab corresponding to the users OS.
   if ($(".main-download").length) {
     var os = getOS();
     if (os === 'unix') {
       os = 'linux';
     }
-    $("#install-cs-setup-tabs").find('.nav-tab > .item-tab > .item-tab-link').each(function () {
-      var targetTab = $(this).attr("data-target");
-      if (targetTab === os) {
-        $(this).click();
-      }
-    });
+    $("#install-cs-setup-tabs").find('input[data-target=' + os + ']').prop("checked", true);
   }
 });