From 9580bec1541bec5127326cbbdc1e9115e7dfe811 Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Sat, 27 Feb 2021 11:47:03 -0400 Subject: [PATCH 1/2] feat: modify tabbed interfaces to support keyboard accessibility (fixes #526) --- bookwyrm/static/js/shared.js | 21 -- bookwyrm/static/js/tabs.js | 255 ++++++++++++++++++ bookwyrm/templates/feed.html | 90 ++++--- bookwyrm/templates/layout.html | 1 + bookwyrm/templates/shelf.html | 4 +- .../templates/snippets/create_status.html | 58 ++-- 6 files changed, 334 insertions(+), 95 deletions(-) create mode 100644 bookwyrm/static/js/tabs.js diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js index a0c21bec6..3b0fa589e 100644 --- a/bookwyrm/static/js/shared.js +++ b/bookwyrm/static/js/shared.js @@ -12,10 +12,6 @@ window.onload = function() { Array.from(document.getElementsByClassName('select-all')) .forEach(t => t.onclick = selectAll); - // toggle between tabs - Array.from(document.getElementsByClassName('tab-change')) - .forEach(t => t.onclick = tabChange); - // handle aria settings on menus Array.from(document.getElementsByClassName('pulldown-menu')) .forEach(t => t.onclick = toggleMenu); @@ -131,23 +127,6 @@ function selectAll(e) { .forEach(t => t.checked=true); } -function tabChange(e) { - var el = e.currentTarget; - var parentElement = el.closest('[role="tablist"]'); - - parentElement.querySelectorAll('[aria-selected="true"]') - .forEach(t => t.setAttribute("aria-selected", false)); - el.setAttribute("aria-selected", true); - - parentElement.querySelectorAll('li') - .forEach(t => removeClass(t, 'is-active')); - addClass(el, 'is-active'); - - var tabId = el.getAttribute('data-tab'); - Array.from(document.getElementsByClassName(el.getAttribute('data-category'))) - .forEach(t => addRemoveClass(t, 'hidden', t.id != tabId)); -} - function toggleMenu(e) { var el = e.currentTarget; var expanded = el.getAttribute('aria-expanded') == 'false'; diff --git a/bookwyrm/static/js/tabs.js b/bookwyrm/static/js/tabs.js new file mode 100644 index 000000000..a57d29aed --- /dev/null +++ b/bookwyrm/static/js/tabs.js @@ -0,0 +1,255 @@ +/* +* 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); diff --git a/bookwyrm/templates/feed.html b/bookwyrm/templates/feed.html index 1368660bc..82ccff5a1 100644 --- a/bookwyrm/templates/feed.html +++ b/bookwyrm/templates/feed.html @@ -8,56 +8,58 @@ {% if not suggested_books %}

There are no books here right now! Try searching for a book to get started

{% else %} -
- -
- {% for shelf in suggested_books %} - {% with shelf_counter=forloop.counter %} - {% for book in shelf.books %} -
-
-

- {% include 'snippets/book_titleby.html' with book=book %} -

-
- {% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="book" controls_uid=book.id class="delete" nonbutton=True pressed=True %} +
+
+ {% include 'snippets/shelve_button.html' with book=book %} + {% active_shelf book as active_shelf %} + {% if active_shelf.shelf.identifier == 'reading' and book.latest_readthrough %} + {% include 'snippets/progress_update.html' with readthrough=book.latest_readthrough %} + {% endif %} + {% include 'snippets/create_status.html' with book=book %}
-
- {% include 'snippets/shelve_button.html' with book=book %} - {% active_shelf book as active_shelf %} - {% if active_shelf.shelf.identifier == 'reading' and book.latest_readthrough %} - {% include 'snippets/progress_update.html' with readthrough=book.latest_readthrough %} - {% endif %} - {% include 'snippets/create_status.html' with book=book %} -
-
- {% endfor %} - {% endwith %} - {% endfor %} + {% endfor %} + {% endwith %} + {% endfor %} + {% endif %} {% if goal %} diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html index ddbafbb42..c7a56cc74 100644 --- a/bookwyrm/templates/layout.html +++ b/bookwyrm/templates/layout.html @@ -191,5 +191,6 @@ var csrf_token = '{{ csrf_token }}'; + diff --git a/bookwyrm/templates/shelf.html b/bookwyrm/templates/shelf.html index da599c7d2..0206d7e91 100644 --- a/bookwyrm/templates/shelf.html +++ b/bookwyrm/templates/shelf.html @@ -18,11 +18,11 @@
-
+
diff --git a/bookwyrm/templates/snippets/create_status.html b/bookwyrm/templates/snippets/create_status.html index b443acdd6..1842285f2 100644 --- a/bookwyrm/templates/snippets/create_status.html +++ b/bookwyrm/templates/snippets/create_status.html @@ -1,34 +1,36 @@ {% load humanize %} {% load bookwyrm_tags %} -
- -
+ +
+ +
-
- {% with 0|uuid as uuid %} - {% include 'snippets/create_status_form.html' with type='review' %} - {% endwith %} -
+
+ {% with 0|uuid as uuid %} + {% include 'snippets/create_status_form.html' with type='review' %} + {% endwith %} +
- + - + + From 263b13f1576a901a995a414aa45f97ae2f2917b1 Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Sun, 28 Feb 2021 14:04:04 -0400 Subject: [PATCH 2/2] Adapt tab handler to vanilla JS, fix focus jump, improve accessible naming of tabs/panels --- bookwyrm/static/js/shared.js | 259 ++++++++++++++++++ bookwyrm/static/js/tabs.js | 255 ----------------- bookwyrm/templates/feed/feed_layout.html | 8 +- bookwyrm/templates/layout.html | 1 - bookwyrm/templates/snippets/book_cover.html | 2 +- .../templates/snippets/create_status.html | 10 +- 6 files changed, 269 insertions(+), 266 deletions(-) delete mode 100644 bookwyrm/static/js/tabs.js diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js index fe3e4d19d..7d65ee039 100644 --- a/bookwyrm/static/js/shared.js +++ b/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); + } + } + } diff --git a/bookwyrm/static/js/tabs.js b/bookwyrm/static/js/tabs.js deleted file mode 100644 index a57d29aed..000000000 --- a/bookwyrm/static/js/tabs.js +++ /dev/null @@ -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); diff --git a/bookwyrm/templates/feed/feed_layout.html b/bookwyrm/templates/feed/feed_layout.html index 0575bbc6d..edd4ce4af 100644 --- a/bookwyrm/templates/feed/feed_layout.html +++ b/bookwyrm/templates/feed/feed_layout.html @@ -10,7 +10,7 @@ {% if not suggested_books %}

{% trans "There are no books here right now! Try searching for a book to get started" %}

{% else %} - +
    {% for shelf in suggested_books %} @@ -24,7 +24,7 @@
      {% for book in shelf.books %} - + {% include 'snippets/book_cover.html' with book=book size="medium" %} @@ -40,7 +40,7 @@ {% for shelf in suggested_books %} {% with shelf_counter=forloop.counter %} {% for book in shelf.books %} -
      +

      {% include 'snippets/book_titleby.html' with book=book %} @@ -61,7 +61,7 @@ {% endfor %} {% endwith %} {% endfor %} - +

      {% endif %} {% if goal %} diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html index 70f4fe432..39b781965 100644 --- a/bookwyrm/templates/layout.html +++ b/bookwyrm/templates/layout.html @@ -205,6 +205,5 @@ var csrf_token = '{{ csrf_token }}'; - diff --git a/bookwyrm/templates/snippets/book_cover.html b/bookwyrm/templates/snippets/book_cover.html index 0df2d6d10..6d15b37f8 100644 --- a/bookwyrm/templates/snippets/book_cover.html +++ b/bookwyrm/templates/snippets/book_cover.html @@ -1,7 +1,7 @@ {% load bookwyrm_tags %}
      {% if book.cover %} -{{ book.alt_text }} +{{ book.alt_text }} {% else %}
      No cover diff --git a/bookwyrm/templates/snippets/create_status.html b/bookwyrm/templates/snippets/create_status.html index b12b38738..76357986a 100644 --- a/bookwyrm/templates/snippets/create_status.html +++ b/bookwyrm/templates/snippets/create_status.html @@ -2,22 +2,22 @@ {% load i18n %} {% load bookwyrm_tags %} - +
      -
      +
      {% 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 %}
      - +