🐛 FIX: tabs with nested content hidden on click (#106)

* Fix tabset dissapearing when nested element clicked

* Add focus outline offset

* Update linenos test regression for pygments upgrade

Author: foster999

sphinx_tabs/static/tabs.css

@@ -25,18 +25,20 @@
   font-weight: 700;
   border: 1px solid #a0b3bf;
   border-bottom: 1px solid white;
-  margin-bottom: -1px;
+  margin: -1px;
   background-color: white;
 }
 
 .sphinx-tabs-tab:focus {
   z-index: 1;
+  outline-offset: 1px;
 }
 
 .sphinx-tabs-panel {
   position: relative;
   padding: 1rem;
   border: 1px solid #a0b3bf;
+  margin: 0px -1px -1px -1px;
   border-radius: 0 0 5px 5px;
   border-top: 0;
   background: white;

sphinx_tabs/static/tabs.js

@@ -56,24 +56,24 @@ function keyTabs(e) {
  * @param  {Node} e the element that was clicked
  */
 function changeTabs(e) {
-  const target = e.target;
-  const selected = target.getAttribute("aria-selected") === "true";
-  const positionBefore = target.parentNode.getBoundingClientRect().top;
+  // Use this instead of the element that was clicked, in case it's a child
+  const selected = this.getAttribute("aria-selected") === "true";
+  const positionBefore = this.parentNode.getBoundingClientRect().top;
 
-  deselectTabset(target);
+  deselectTabset(this);
 
   if (!selected) {
-    selectTab(target);
-    const name = target.getAttribute("name");
-    selectGroupedTabs(name, target.id);
+    selectTab(this);
+    const name = this.getAttribute("name");
+    selectGroupedTabs(name, this.id);
 
-    if (target.classList.contains("group-tab")) {
+    if (this.classList.contains("group-tab")) {
       // Persist during session
       session.setItem('sphinx-tabs-last-selected', name);
     }
   }
 
-  const positionAfter = target.parentNode.getBoundingClientRect().top;
+  const positionAfter = this.parentNode.getBoundingClientRect().top;
   const positionDelta = positionAfter - positionBefore;
   // Scroll to offset content resizing
   window.scrollTo(0, window.scrollY + positionDelta);

tests/test_build/test_other_with_assets.html

@@ -16,7 +16,7 @@
        <tr>
         <td class="linenos">
          <div class="linenodiv">
-          <pre>1</pre>
+          <pre><span class="normal">1</span></pre>
          </div>
         </td>
         <td class="code">