Adapt tab handler to vanilla JS, fix focus jump, improve accessible naming of tabs/panels

bookwyrm/static/js/shared.js

@@ -12,6 +12,10 @@ window.onload = function() {
     Array.from(document.getElementsByClassName('select-all'))
         .forEach(t => t.onclick = selectAll);
 
+    // tab groups
+    Array.from(document.getElementsByClassName('tab-group'))
+        .forEach(t => new TabGroup(t));
+
     // handle aria settings on menus
     Array.from(document.getElementsByClassName('pulldown-menu'))
         .forEach(t => t.onclick = toggleMenu);
@@ -182,3 +186,258 @@ function removeClass(el, className) {
     }
     el.className = classes.join(' ');
 }
+
+/*
+* The content below is licensed according to the W3C Software License at
+* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+* Heavily modified to web component by Zach Leatherman
+* Modified back to vanilla JavaScript with support for Bulma markup and nested tabs by Ned Zimmerman
+*/
+class TabGroup {
+    constructor(container) {
+      this.container = container;
+  
+      this.tablist = this.container.querySelector('[role="tablist"]');
+      this.buttons = this.tablist.querySelectorAll('[role="tab"]');
+      this.panels = this.container.querySelectorAll(':scope > [role="tabpanel"]');
+      this.delay = this.determineDelay();
+  
+      if(!this.tablist || !this.buttons.length || !this.panels.length) {
+        return;
+      }
+  
+      this.keys = this.keys();
+      this.direction = this.direction();
+      this.initButtons();
+      this.initPanels();
+    }
+  
+    keys() {
+      return {
+        end: 35,
+        home: 36,
+        left: 37,
+        up: 38,
+        right: 39,
+        down: 40
+      };
+    }
+  
+    // Add or substract depending on key pressed
+    direction() {
+      return {
+        37: -1,
+        38: -1,
+        39: 1,
+        40: 1
+      };
+    }
+  
+    initButtons() {
+      let count = 0;
+      for(let button of this.buttons) {
+        let isSelected = button.getAttribute("aria-selected") === "true";
+        button.setAttribute("tabindex", isSelected ? "0" : "-1");
+  
+        button.addEventListener('click', this.clickEventListener.bind(this));
+        button.addEventListener('keydown', this.keydownEventListener.bind(this));
+        button.addEventListener('keyup', this.keyupEventListener.bind(this));
+  
+        button.index = count++;
+      }
+    }
+  
+    initPanels() {
+      let selectedPanelId = this.tablist.querySelector('[role="tab"][aria-selected="true"]').getAttribute("aria-controls");
+      for(let panel of this.panels) {
+        if(panel.getAttribute("id") !== selectedPanelId) {
+          panel.setAttribute("hidden", "");
+        }
+        panel.setAttribute("tabindex", "0");
+      }
+    }
+  
+    clickEventListener(event) {
+      let button = event.target.closest('a');
+
+      event.preventDefault();
+  
+      this.activateTab(button, false);
+    }
+  
+    // Handle keydown on tabs
+    keydownEventListener(event) {
+      var key = event.keyCode;
+  
+      switch (key) {
+        case this.keys.end:
+          event.preventDefault();
+          // Activate last tab
+          this.activateTab(this.buttons[this.buttons.length - 1]);
+          break;
+        case this.keys.home:
+          event.preventDefault();
+          // Activate first tab
+          this.activateTab(this.buttons[0]);
+          break;
+  
+        // Up and down are in keydown
+        // because we need to prevent page scroll >:)
+        case this.keys.up:
+        case this.keys.down:
+          this.determineOrientation(event);
+          break;
+      };
+    }
+  
+    // Handle keyup on tabs
+    keyupEventListener(event) {
+      var key = event.keyCode;
+  
+      switch (key) {
+        case this.keys.left:
+        case this.keys.right:
+          this.determineOrientation(event);
+          break;
+      };
+    }
+  
+    // When a tablist’s aria-orientation is set to vertical,
+    // only up and down arrow should function.
+    // In all other cases only left and right arrow function.
+    determineOrientation(event) {
+      var key = event.keyCode;
+      var vertical = this.tablist.getAttribute('aria-orientation') == 'vertical';
+      var proceed = false;
+  
+      if (vertical) {
+        if (key === this.keys.up || key === this.keys.down) {
+          event.preventDefault();
+          proceed = true;
+        };
+      }
+      else {
+        if (key === this.keys.left || key === this.keys.right) {
+          proceed = true;
+        };
+      };
+  
+      if (proceed) {
+        this.switchTabOnArrowPress(event);
+      };
+    }
+  
+    // Either focus the next, previous, first, or last tab
+    // depending on key pressed
+    switchTabOnArrowPress(event) {
+      var pressed = event.keyCode;
+  
+      for (let button of this.buttons) {
+        button.addEventListener('focus', this.focusEventHandler.bind(this));
+      };
+  
+      if (this.direction[pressed]) {
+        var target = event.target;
+        if (target.index !== undefined) {
+          if (this.buttons[target.index + this.direction[pressed]]) {
+            this.buttons[target.index + this.direction[pressed]].focus();
+          }
+          else if (pressed === this.keys.left || pressed === this.keys.up) {
+            this.focusLastTab();
+          }
+          else if (pressed === this.keys.right || pressed == this.keys.down) {
+            this.focusFirstTab();
+          }
+        }
+      }
+    }
+  
+    // Activates any given tab panel
+    activateTab (tab, setFocus) {
+      if(tab.getAttribute("role") !== "tab") {
+        tab = tab.closest('[role="tab"]');
+      }
+  
+      setFocus = setFocus || true;
+  
+      // Deactivate all other tabs
+      this.deactivateTabs();
+  
+      // Remove tabindex attribute
+      tab.removeAttribute('tabindex');
+  
+      // Set the tab as selected
+      tab.setAttribute('aria-selected', 'true');
+      
+      // Give the tab parent an is-active class
+      tab.parentNode.classList.add('is-active');
+  
+      // Get the value of aria-controls (which is an ID)
+      var controls = tab.getAttribute('aria-controls');
+  
+      // Remove hidden attribute from tab panel to make it visible
+      document.getElementById(controls).removeAttribute('hidden');
+  
+      // Set focus when required
+      if (setFocus) {
+        tab.focus();
+      }
+    }
+  
+    // Deactivate all tabs and tab panels
+    deactivateTabs() {
+      for (let button of this.buttons) {
+        button.parentNode.classList.remove('is-active');
+        button.setAttribute('tabindex', '-1');
+        button.setAttribute('aria-selected', 'false');
+        button.removeEventListener('focus', this.focusEventHandler.bind(this));
+      }
+  
+      for (let panel of this.panels) {
+        panel.setAttribute('hidden', 'hidden');
+      }
+    }
+  
+    focusFirstTab() {
+      this.buttons[0].focus();
+    }
+  
+    focusLastTab() {
+      this.buttons[this.buttons.length - 1].focus();
+    }
+  
+    // Determine whether there should be a delay
+    // when user navigates with the arrow keys
+    determineDelay() {
+      var hasDelay = this.tablist.hasAttribute('data-delay');
+      var delay = 0;
+  
+      if (hasDelay) {
+        var delayValue = this.tablist.getAttribute('data-delay');
+        if (delayValue) {
+          delay = delayValue;
+        }
+        else {
+          // If no value is specified, default to 300ms
+          delay = 300;
+        };
+      };
+  
+      return delay;
+    }
+  
+    focusEventHandler(event) {
+      var target = event.target;
+  
+      setTimeout(this.checkTabFocus.bind(this), this.delay, target);
+    };
+  
+    // Only activate tab on focus if it still has focus after the delay
+    checkTabFocus(target) {
+      let focused = document.activeElement;
+  
+      if (target === focused) {
+        this.activateTab(target, false);
+      }
+    }
+  }

bookwyrm/static/js/tabs.js

@@ -1,255 +0,0 @@
-/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-* Heavily modified to web component by Zach Leatherman
-* Further modified to support Bulma markup and nested tabs by Ned Zimmerman
-*/
-class SevenMinuteTabs extends HTMLElement {
-    constructor() {
-      super();
-  
-      this.tablist = this.querySelector('[role="tablist"]');
-      this.buttons = this.tablist.querySelectorAll('[role="tab"]');
-      this.panels = this.querySelectorAll(':scope > [role="tabpanel"]');
-      this.delay = this.determineDelay();
-  
-      if(!this.tablist || !this.buttons.length || !this.panels.length) {
-        return;
-      }
-  
-      this.initButtons();
-      this.initPanels();
-    }
-  
-    get keys() {
-      return {
-        end: 35,
-        home: 36,
-        left: 37,
-        up: 38,
-        right: 39,
-        down: 40
-      };
-    }
-  
-    // Add or substract depending on key pressed
-    get direction() {
-      return {
-        37: -1,
-        38: -1,
-        39: 1,
-        40: 1
-      };
-    }
-  
-    initButtons() {
-      let count = 0;
-      for(let button of this.buttons) {
-        let isSelected = button.getAttribute("aria-selected") === "true";
-        button.setAttribute("tabindex", isSelected ? "0" : "-1");
-  
-        button.addEventListener('click', this.clickEventListener.bind(this));
-        button.addEventListener('keydown', this.keydownEventListener.bind(this));
-        button.addEventListener('keyup', this.keyupEventListener.bind(this));
-  
-        button.index = count++;
-      }
-    }
-  
-    initPanels() {
-      let selectedPanelId = this.tablist.querySelector('[role="tab"][aria-selected="true"]').getAttribute("aria-controls");
-      for(let panel of this.panels) {
-        if(panel.getAttribute("id") !== selectedPanelId) {
-          panel.setAttribute("hidden", "");
-        }
-        panel.setAttribute("tabindex", "0");
-      }
-    }
-  
-    clickEventListener(event) {
-      let button = event.target;
-      if(button.tagName === "A" || button.tagName === "BUTTON" && button.getAttribute("type") === "submit") {
-        event.preventDefault();
-      }
-  
-      this.activateTab(button, false);
-    }
-  
-    // Handle keydown on tabs
-    keydownEventListener(event) {
-      var key = event.keyCode;
-  
-      switch (key) {
-        case this.keys.end:
-          event.preventDefault();
-          // Activate last tab
-          this.activateTab(this.buttons[this.buttons.length - 1]);
-          break;
-        case this.keys.home:
-          event.preventDefault();
-          // Activate first tab
-          this.activateTab(this.buttons[0]);
-          break;
-  
-        // Up and down are in keydown
-        // because we need to prevent page scroll >:)
-        case this.keys.up:
-        case this.keys.down:
-          this.determineOrientation(event);
-          break;
-      };
-    }
-  
-    // Handle keyup on tabs
-    keyupEventListener(event) {
-      var key = event.keyCode;
-  
-      switch (key) {
-        case this.keys.left:
-        case this.keys.right:
-          this.determineOrientation(event);
-          break;
-      };
-    }
-  
-    // When a tablist’s aria-orientation is set to vertical,
-    // only up and down arrow should function.
-    // In all other cases only left and right arrow function.
-    determineOrientation(event) {
-      var key = event.keyCode;
-      var vertical = this.tablist.getAttribute('aria-orientation') == 'vertical';
-      var proceed = false;
-  
-      if (vertical) {
-        if (key === this.keys.up || key === this.keys.down) {
-          event.preventDefault();
-          proceed = true;
-        };
-      }
-      else {
-        if (key === this.keys.left || key === this.keys.right) {
-          proceed = true;
-        };
-      };
-  
-      if (proceed) {
-        this.switchTabOnArrowPress(event);
-      };
-    }
-  
-    // Either focus the next, previous, first, or last tab
-    // depending on key pressed
-    switchTabOnArrowPress(event) {
-      var pressed = event.keyCode;
-  
-      for (let button of this.buttons) {
-        button.addEventListener('focus', this.focusEventHandler.bind(this));
-      };
-  
-      if (this.direction[pressed]) {
-        var target = event.target;
-        if (target.index !== undefined) {
-          if (this.buttons[target.index + this.direction[pressed]]) {
-            this.buttons[target.index + this.direction[pressed]].focus();
-          }
-          else if (pressed === this.keys.left || pressed === this.keys.up) {
-            this.focusLastTab();
-          }
-          else if (pressed === this.keys.right || pressed == this.keys.down) {
-            this.focusFirstTab();
-          }
-        }
-      }
-    }
-  
-    // Activates any given tab panel
-    activateTab (tab, setFocus) {
-      if(tab.getAttribute("role") !== "tab") {
-        tab = tab.closest('[role="tab"]');
-      }
-  
-      setFocus = setFocus || true;
-  
-      // Deactivate all other tabs
-      this.deactivateTabs();
-  
-      // Remove tabindex attribute
-      tab.removeAttribute('tabindex');
-  
-      // Set the tab as selected
-      tab.setAttribute('aria-selected', 'true');
-      
-      // Give the tab parent an is-active class
-      tab.parentNode.classList.add('is-active');
-  
-      // Get the value of aria-controls (which is an ID)
-      var controls = tab.getAttribute('aria-controls');
-  
-      // Remove hidden attribute from tab panel to make it visible
-      document.getElementById(controls).removeAttribute('hidden');
-  
-      // Set focus when required
-      if (setFocus) {
-        tab.focus();
-      }
-    }
-  
-    // Deactivate all tabs and tab panels
-    deactivateTabs() {
-      for (let button of this.buttons) {
-        button.parentNode.classList.remove('is-active');
-        button.setAttribute('tabindex', '-1');
-        button.setAttribute('aria-selected', 'false');
-        button.removeEventListener('focus', this.focusEventHandler.bind(this));
-      }
-  
-      for (let panel of this.panels) {
-        panel.setAttribute('hidden', 'hidden');
-      }
-    }
-  
-    focusFirstTab() {
-      this.buttons[0].focus();
-    }
-  
-    focusLastTab() {
-      this.buttons[this.buttons.length - 1].focus();
-    }
-  
-    // Determine whether there should be a delay
-    // when user navigates with the arrow keys
-    determineDelay() {
-      var hasDelay = this.tablist.hasAttribute('data-delay');
-      var delay = 0;
-  
-      if (hasDelay) {
-        var delayValue = this.tablist.getAttribute('data-delay');
-        if (delayValue) {
-          delay = delayValue;
-        }
-        else {
-          // If no value is specified, default to 300ms
-          delay = 300;
-        };
-      };
-  
-      return delay;
-    }
-  
-    focusEventHandler(event) {
-      var target = event.target;
-  
-      setTimeout(this.checkTabFocus.bind(this), this.delay, target);
-    };
-  
-    // Only activate tab on focus if it still has focus after the delay
-    checkTabFocus(target) {
-      let focused = document.activeElement;
-  
-      if (target === focused) {
-        this.activateTab(target, false);
-      }
-    }
-  }
-  
-  window.customElements.define("seven-minute-tabs", SevenMinuteTabs);

bookwyrm/templates/feed/feed_layout.html

@@ -10,7 +10,7 @@
         {% if not suggested_books %}
         <p>{% trans "There are no books here right now! Try searching for a book to get started" %}</p>
         {% else %}
-        <seven-minute-tabs>
+        <div class="tab-group">
             <div class="tabs is-small">
                 <ul role="tablist">
                 {% for shelf in suggested_books %}
@@ -24,7 +24,7 @@
                             <ul>
                                 {% for book in shelf.books %}
                                 <li{% if shelf_counter == 1 and forloop.first %} class="is-active"{% endif %}>
-                                    <a href="#book-{{ book.id }}" role="tab" {% if not forloop.first %}tabindex="-1"{% endif %} aria-selected="{% if shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}" aria-controls="book-{{ book.id }}">
+                                    <a href="#book-{{ book.id }}" id="tab-book-{{ book.id }}" role="tab" aria-label="{{ book.title }}" aria-selected="{% if shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}" aria-controls="book-{{ book.id }}">
                                         {% include 'snippets/book_cover.html' with book=book size="medium" %}
                                     </a>
                                 </li>
@@ -40,7 +40,7 @@
             {% for shelf in suggested_books %}
             {% with shelf_counter=forloop.counter %}
             {% for book in shelf.books %}
-            <div class="suggested-tabs card" role="tabpanel" id="book-{{ book.id }}"{% if shelf_counter != 1 or not forloop.first %} hidden{% endif %}>
+            <div class="suggested-tabs card" role="tabpanel" id="book-{{ book.id }}"{% if shelf_counter != 1 or not forloop.first %} hidden{% endif %} aria-labelledby="tab-book-{{ book.id }}">
                 <div class="card-header">
                     <p class="card-header-title">
                         <span>{% include 'snippets/book_titleby.html' with book=book %}</span>
@@ -61,7 +61,7 @@
             {% endfor %}
             {% endwith %}
             {% endfor %}
-        </seven-minute-tabs>
+        </div>
         {% endif %}
 
         {% if goal %}

bookwyrm/templates/layout.html

@@ -205,6 +205,5 @@
     var csrf_token = '{{ csrf_token }}';
 </script>
 <script src="/static/js/shared.js"></script>
-<script src="/static/js/tabs.js" type="module"></script>
 </body>
 </html>

bookwyrm/templates/snippets/book_cover.html

@@ -1,7 +1,7 @@
 {% load bookwyrm_tags %}
 <div class="cover-container is-{{ size }}">
 {% if book.cover %}
-<img class="book-cover" src="/images/{{ book.cover }}" alt="{{ book.alt_text }}" title="{{ book.alt_text }}">
+<img class="book-cover" src="/images/{{ book.cover }}" alt="{{ book.alt_text }}">
 {% else %}
     <div class="no-cover book-cover">
         <img class="book-cover" src="/static/images/no_cover.jpg" alt="No cover">

bookwyrm/templates/snippets/create_status.html

@@ -2,22 +2,22 @@
 {% load i18n %}
 {% load bookwyrm_tags %}
 
-<seven-minute-tabs>
+<div class="tab-group">
     <div class="tabs is-boxed" role="tablist">
         <ul>
             <li class="is-active">
                 <a href="#review-{{ book.id }}" id="tab-review-{{ book.id }}" role="tab" aria-selected="true" aria-controls="review-{{ book.id }}" data-category="tab-option-{{ book.id }}">{% trans "Review" %}</a>
             </li>
             <li>
-                <a href="#comment-{{ book.id}}" id="tab-comment-{{ book.id }}" role="tab" tabindex="-1" aria-selected="false" aria-controls="comment-{{ book.id}}" data-category="tab-option-{{ book.id }}">{% trans "Comment" %}</a>
+                <a href="#comment-{{ book.id}}" id="tab-comment-{{ book.id }}" role="tab" aria-selected="false" aria-controls="comment-{{ book.id}}" data-category="tab-option-{{ book.id }}">{% trans "Comment" %}</a>
             </li>
             <li>
-                <a href="#quote-{{ book.id }}" id="tab-quote-{{ book.id }}" role="tab" tabindex="-1" aria-selected="false" aria-controls="quote-{{ book.id }}" data-category="tab-option-{{ book.id }}">{% trans "Quote" %}</a>
+                <a href="#quote-{{ book.id }}" id="tab-quote-{{ book.id }}" role="tab" aria-selected="false" aria-controls="quote-{{ book.id }}" data-category="tab-option-{{ book.id }}">{% trans "Quote" %}</a>
             </li>
         </ul>
     </div>
 
-    <div class="tab-option-{{ book.id }}" id="review-{{ book.id }}" role="tabpanel" tabindex="0" aria-labelledby="tab-review-{{ book.id }}">
+    <div class="tab-option-{{ book.id }}" id="review-{{ book.id }}" role="tabpanel" aria-labelledby="tab-review-{{ book.id }}">
         {% with 0|uuid as uuid %}
         {% include 'snippets/create_status_form.html' with type='review' %}
         {% endwith %}
@@ -34,4 +34,4 @@
         {% include 'snippets/create_status_form.html' with type="quotation" placeholder="An excerpt from '"|add:book.title|add:"'" %}
         {% endwith %}
     </div>
-</seven-minute-tabs>
+</div>