mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-05-31 22:58:18 +00:00
Adapt tab handler to vanilla JS, fix focus jump, improve accessible naming of tabs/panels
This commit is contained in:
Ned Zimmerman
parent
b324e668ca
commit
263b13f157
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue