mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-06-10 01:09:23 +00:00
feat: modify tabbed interfaces to support keyboard accessibility (fixes #526)
This commit is contained in:
Ned Zimmerman
parent
7ed63bacc9
commit
9580bec154
|
|
@ -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';
|
||||
|
|
|
|||
255
bookwyrm/static/js/tabs.js
Normal file
255
bookwyrm/static/js/tabs.js
Normal file
|
|
@ -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);
|
||||
|
|
@ -8,56 +8,58 @@
|
|||
{% if not suggested_books %}
|
||||
<p>There are no books here right now! Try searching for a book to get started</p>
|
||||
{% else %}
|
||||
<div class="tabs is-small">
|
||||
<ul role="tablist">
|
||||
<seven-minute-tabs>
|
||||
<div class="tabs is-small">
|
||||
<ul role="tablist">
|
||||
{% for shelf in suggested_books %}
|
||||
{% if shelf.books %}
|
||||
{% with shelf_counter=forloop.counter %}
|
||||
<li>
|
||||
<p>
|
||||
{{ shelf.name }}
|
||||
</p>
|
||||
<div class="tabs is-small is-toggle">
|
||||
<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 }}">
|
||||
{% include 'snippets/book_cover.html' with book=book size="medium" %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% for shelf in suggested_books %}
|
||||
{% if shelf.books %}
|
||||
{% with shelf_counter=forloop.counter %}
|
||||
<li>
|
||||
<p>
|
||||
{{ shelf.name }}
|
||||
{% 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="card-header">
|
||||
<p class="card-header-title">
|
||||
<span>{% include 'snippets/book_titleby.html' with book=book %}</span>
|
||||
</p>
|
||||
<div class="tabs is-small is-toggle">
|
||||
<ul>
|
||||
{% for book in shelf.books %}
|
||||
<li class="tab-change{% if shelf_counter == 1 and forloop.first %} is-active{% endif %}" data-tab="book-{{ book.id }}" data-tab="book-{{ book.id }}" role="tab" tabindex="0" aria-selected="{% if shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}" aria-controls="book-{{ book.id }}" data-category="suggested-tabs">
|
||||
<a>
|
||||
{% include 'snippets/book_cover.html' with book=book size="medium" %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="card-header-icon is-hidden-tablet">
|
||||
{% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="book" controls_uid=book.id class="delete" nonbutton=True pressed=True %}
|
||||
</div>
|
||||
</li>
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% for shelf in suggested_books %}
|
||||
{% with shelf_counter=forloop.counter %}
|
||||
{% for book in shelf.books %}
|
||||
<div class="suggested-tabs card{% if shelf_counter != 1 or not forloop.first %} hidden{% endif %}" role="tabpanel" id="book-{{ book.id }}">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">
|
||||
<span>{% include 'snippets/book_titleby.html' with book=book %}</span>
|
||||
</p>
|
||||
<div class="card-header-icon is-hidden-tablet">
|
||||
{% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="book" controls_uid=book.id class="delete" nonbutton=True pressed=True %}
|
||||
</div>
|
||||
<div class="card-content">
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</seven-minute-tabs>
|
||||
{% endif %}
|
||||
|
||||
{% if goal %}
|
||||
|
|
|
|||
|
|
@ -191,5 +191,6 @@
|
|||
var csrf_token = '{{ csrf_token }}';
|
||||
</script>
|
||||
<script src="/static/js/shared.js"></script>
|
||||
<script src="/static/js/tabs.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@
|
|||
|
||||
<div class="block columns">
|
||||
<div class="column">
|
||||
<div class="tabs" role="tablist">
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
{% for shelf_tab in shelves %}
|
||||
<li class="{% if shelf_tab.identifier == shelf.identifier %}is-active{% endif %}">
|
||||
<a href="/user/{{ user | username }}/shelf/{{ shelf_tab.identifier }}" role="tab" aria-selected="{% if shelf_tab.identifier == shelf.identifier %}true{% else %}false{% endif %}">{{ shelf_tab.name }}</a>
|
||||
<a href="/user/{{ user | username }}/shelf/{{ shelf_tab.identifier }}"{% if shelf_tab.identifier == shelf.identifier %} aria-current="page"{% endif %}>{{ shelf_tab.name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,36 @@
|
|||
{% load humanize %}
|
||||
{% load bookwyrm_tags %}
|
||||
|
||||
<div class="tabs is-boxed">
|
||||
<ul role="tablist">
|
||||
<li class="tab-change is-active" data-category="tab-option-{{ book.id }}" role="tab" aria-selected="true" tabindex="0" data-tab="review-{{ book.id }}">
|
||||
<a>Review</a>
|
||||
</li>
|
||||
<li class="tab-change" data-category="tab-option-{{ book.id }}" role="tab" tabindex="0" data-tab="comment-{{ book.id}}">
|
||||
<a>Comment</a>
|
||||
</li>
|
||||
<li class="tab-change" data-category="tab-option-{{ book.id }}" role="tab" tabindex="0" data-tab="quote-{{ book.id }}">
|
||||
<a>Quote</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<seven-minute-tabs>
|
||||
<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 }}">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 }}">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 }}">Quote</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-option-{{ book.id }}" id="review-{{ book.id }}">
|
||||
{% with 0|uuid as uuid %}
|
||||
{% include 'snippets/create_status_form.html' with type='review' %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="tab-option-{{ book.id }}" id="review-{{ book.id }}" role="tabpanel" tabindex="0" aria-labelledby="tab-review-{{ book.id }}">
|
||||
{% with 0|uuid as uuid %}
|
||||
{% include 'snippets/create_status_form.html' with type='review' %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
|
||||
<div class="hidden tab-option-{{ book.id }}" id="comment-{{ book.id }}">
|
||||
{% with 0|uuid as uuid %}
|
||||
{% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thoughts on '"|add:book.title|add:"'" %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="tab-option-{{ book.id }}" id="comment-{{ book.id }}" role="tabpanel" aria-labelledby="tab-comment-{{ book.id }}" hidden>
|
||||
{% with 0|uuid as uuid %}
|
||||
{% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thoughts on '"|add:book.title|add:"'" %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
|
||||
<div class="hidden tab-option-{{ book.id }}" id="quote-{{ book.id }}">
|
||||
{% with 0|uuid as uuid %}
|
||||
{% include 'snippets/create_status_form.html' with type="quotation" placeholder="An excerpt from '"|add:book.title|add:"'" %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="tab-option-{{ book.id }}" id="quote-{{ book.id }}" role="tabpanel" aria-labelledby="tab-quote-{{ book.id }}" hidden>
|
||||
{% with 0|uuid as uuid %}
|
||||
{% include 'snippets/create_status_form.html' with type="quotation" placeholder="An excerpt from '"|add:book.title|add:"'" %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
</seven-minute-tabs>
|
||||
|
|
|
|||
Loading…
Reference in a new issue